上海动漫音乐分享社区

Hexo博客利用Hexo插件插入音乐/视频

黑火软件大师2019-03-12 07:41:37


本文属于《利用hexo+github搭建博客、网站》系列教程

需要看此系列教程的请在公众号黑火软件大师后台回复hexo.遇到问题欢迎在文章、后台留言。

闲话少说进入正文:



本文是技术文章闲话少说直接进入正文,本文的目录如下:

前言

0基础免费搭建博客和网站


 
准备工作

需要安装hexo并利用hexo写博客需要在电脑安装以下软件进行电脑环境配置。

  1. Git下载、安装

    Git下载、安装指导教程


  2. Node.js下载、安装

    Node.js下载、安装指导教程

    Node.js环境配置教程

  3. Hexo安装

    Hexo安装及初始化教程

  4. Github账号准备

    Github账号注册及新建项目

    SSH Key生成及配置

  5. 文本编辑软件+MD软件

    Markdown编辑软件大全(22款)

    Markdown 语法手册

    Markdown 简明语法手册

以上软件均可以在本公众号找到下载链接,公众号黑火软件大师后台回复“hexo”即可得到。


       正所谓没有逼格的博客不是好博客,而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器,当然也少不了这些吊炸天的功能。

       首先我们需要通过命令行安装以下两款插件(当然装一个就可以了,如果一个实现不了再装另一个),这两款插件我们都可以从hexo的官方网站上查询到:

  • hexo-tag-aplayer

  • hexo-tag-dplayer


 
插件介绍


hexo-tag-aplayer

本项目是将diygod的dplayer运行在hexo的插件;项目地址:https://github.com/MoePlayer/hexo-tag-aplayer

感谢关注这个插件的人们,感谢aplayer的hexo插件作者@grzhan,感谢A or D播放器作者@Diygod

hexo-tag-dplayer

本项目是将diygod的dplayer运行在hexo的插件
感谢关注这个插件的人们,感谢aplayer的hexo插件作者@grzhan,感谢A or D播放器作者@Diygod


 
插件安装


在你本地安装博客的根目录下右击鼠标打开Git Bash ,运行如下两条命令来分别安装以上的两款插件:

npm install hexo-tag-dplayer
npm install hexo-tag-aplayer


运行之后如图所示:

此时你会在 blog/node_modules 目录下发现有两个aplayer 和 `dplayer 的文件夹。(这个blog文件是你在搭建博客时自定义命名的文件)


 
添加音乐

详细查看:https://github.com/MoePlayer/hexo-tag-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

在markdown内添加以下代码:

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

  • title : music title

  • author: music author

  • url: music file url

  • picture_url: optional, music picture url

  • narrow: optional, narrow style

  • autoplay: optional, autoplay music, not supported by mobile browsers

  • width:xxx: optional, prefix width:, player's width (default: 100%)

  • lrc:xxx: optional, prefix lrc:, LRC file url

{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" "autoplay=false" %}


效果:

播放列表代码:


{% aplayerlist %}
{
    "narrow": false,                          // (可选)播放器袖珍风格
    "autoplay": true,                         // (可选) 自动播放,移动端浏览器暂时不支持此功能
    "mode": "random",                         // (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation'
    "showlrc": 3,                             // (可选)歌词显示配置项,可选项有:1,2,3
    "mutex": true,                            // (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
    "theme": "#e6d0b2",                          // (可选)播放器风格色彩设置,默认:#b7daff
    "preload": "metadata",                    // (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}


 
插入视频


详细代码查看:https://github.com/MoePlayer/hexo-tag-dplayer

http://dplayer.js.org/#/zh-Hans/

代码:

{% dplayer key=value ... %}

key属性包括:

dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag




在markdown内添加以下代码:

{% dplayer "url=http://home.ustc.edu.cn/~mmmwhy/GEM.mp4"  "pic=http://home.ustc.edu.cn/~mmmwhy/GEM.jpg" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}


效果:


 

推荐阅读

制作便携、免安装软件程序

安卓手机秒变WIN10电脑桌面

推荐春节大家一起用小程序放电子鞭炮

效率软件WGestures:自定义全局鼠标手势

语音变声软件morphvox pro破解版下载及使用教程


【END】


—— 黑软件大师 ——

微信号:heihuovip

专注各类软件的下载、安装、教学

  • 欢迎大家投稿、交流、反馈

  • 喜欢请关注、点赞、收藏、评论、转发

  • 支持请打赏、点击广告