hexo-plugins
音乐(hexo-tag-aplayer)
音乐界面使用了插件 hexo-tag-aplayer
插件文档手册
hexo-tag-aplayer下载
1 | npm install --save hexo-tag-aplayer |
hexo-tag-aplayer说明
aplayer似乎适用于大多为ejs创造的主题，butterfly主题使用的是pug，使用aplayer不能显示。解决方法如下：
1.hexo安装目录下执行npm install aplayer
2.主题目录\layout\includes新建aplayer.pug文件，内容如下
3.重新生成网站
1 | link(rel="stylesheet" type='text/css', href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css") |
hexo-tag-aplayer基本使用
1 | {% aplayer title author url [picture_url narrow autoplay width:xxx lrc:xxx] %} |
示例
1 | {% aplayer "Windy Hill" "羽肿" "https://xxx.mp3" "https://p2.music.126.net/R5wdneWJADdilEDtqBev-w==/109951169463411528.jpg" "autoplay" %} |
其会被插件渲染为1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="aplayer-ScwgoAxt" class="aplayer aplayer-tag-marker" style="margin-bottom: 20px;">
<pre class="aplayer-lrc-content"></pre>
</div>
<script>
var ap = new APlayer({
element: document.getElementById("aplayer-ScwgoAxt"),
narrow: false,
autoplay: true,
showlrc: false,
music: {
title: "Windy Hill",
author: "羽肿",
url: "https://xxx.mp3",
pic: "https://p2.music.126.net/R5wdneWJADdilEDtqBev-w==/109951169463411528.jpg",
lrc: ""
}
});
window.aplayers || (window.aplayers = []);
window.aplayers.push(ap);
</script>
当开启Hexo的文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用。
1 | {% aplayer "title" "author1 author2" "title.mp3" "picture.jpg" "lrc:title.txt" %} |
示例
1 | {% aplayer "城南花已开" "三亩地" "城南花已开.mp3" "/img/avatar003.jpg" "lrc:城南花已开.lrc" %} |
[00:00.00]城南花已开 - 三亩地 [00:01.00]该歌曲为纯音乐请欣赏
Meing JS支持(3.0 新功能)
但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
修改Hexo配置文件_config.yml1
2aplayer:
meting: true
接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了：
1 | {% meting "427606780" "netease" "song" %} |
标签被渲染为
1 |
|
如果不想使用插件，就需要在markdown中用html的格式书写，同时把主题配置文件中的aplayerInject开启
1 | {% meting "427606780" "netease" "song" "autoplay" "mutex:false" "preload:none" "theme:#00e500"%} |
标签会被渲染为
1 |
|
有关 {% meting %} 的选项列表如下:
| 选项 | 默认值 | 描述 |
|---|---|---|
| id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
| server | 必须值 | 音乐平台: netease ,tencent, kugou, xiami, baidu |
| type | 必须值 | song, playlist, album, search, artist |
| fixed | false |
开启固定模式，加入fixed开启固定（左下角）用于全局 |
| mini | false |
开启迷你模式，加入mini开启，只有小图标呈现 |
| loop | all |
列表循环模式：all, one,none |
| order | list |
列表播放模式： list, random |
| volume | 0.7 | 播放器音量 |
| lrctype | 0 | 歌词格式类型，好像不为0会没有歌词 |
| listfolded | false |
指定音乐播放列表是否折叠 |
| storagename | metingjs |
LocalStorage 中存储播放器设定的键名 |
| autoplay | true |
自动播放，移动端浏览器暂时不支持此功能，加autoplay表示自动播放 |
| mutex | true |
该选项开启时，如果同页面有其他 aplayer 播放，点击播放，其他播放器会暂停 |
| listmaxheight | 340px |
播放列表的最大长度 |
| preload | auto |
音乐文件预载入模式(进度条)，可选项： none, metadata, auto |
| theme | #ad7a86 |
播放器风格色彩设置 |
添加全局吸底Aplayer
简述
如果想使用aplayer，很多人都会推荐安装 hexo-tag-aplayer 这款插件。这款插件通过 Hexo 独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的 html。如果你只是使用一些简单的功能，其实无需使用到这个插件，只需以 html 格式书写就行，不用插件去转换。
For example：
如果使用插件，在 markdown 中要这样写
1 | {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} |
会被插件渲染为1
<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>
如果我们不想使用插件，就需要在markdown中用html的格式书写，同时把主题配置文件中的aplayerInject开启
1 | <div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div> |
关闭asset_inject
由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false
修改Hexo配置文件1
2
3aplayer:
meting: true
asset_inject: false
开启主题的aplayerInject
修改主题配置文件1
2
3
4# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true
插入 Aplayer html
把 aplayer代码 插入到主题配置文件的 inject.bottom 去1
2
3
4inject:
head:
bottom:
- <div class="aplayer no-destroy" data-id="8332009741" data-server="tencent" data-type="playlist" data-fixed="true" data-mini="true" data-autoplay="false" > </div>
参数使用同上面aplayer标签参数，只是前面加上data-即可
运行 Hexo 就可以看到网页左下角出现了 Aplayer
最后，如果你想切换页面时，音乐不会中断。设置主题配置文件的pjax: true
评论
支持双评论显示，只需要配置两个评论（第一个为默认显示）
1 | comments: |
| 参数 | 解释 |
|---|---|
| use | 使用的评论（请注意，最多支持两个，如果不需要请留空） 注意：双评论不能是 Disqus 和 Disqusjs 一起，由于其共用同一个 ID，会出错 |
| text | 是否显示评论服务商的名字 |
| lazyload | 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示） |
| count | 是否在文章顶部显示评论数 livere、Giscus 和 utterances 不支持评论数显示 |
| card_post_count | 是否在首页文章卡片显示评论数 gitalk、livere 、Giscus 和 utterances 不支持评论数显示 |
Twikoo是一个简洁、安全、无后端的静态网站评论系统，基于腾讯云开发。
具体如何配置评论，请查看Twikoo文档
只需要把获取到的 环境ID (envId) 填写到配置上去就行
修改主题配置文件
1 | twikoo: |
| 参数 | 解释 |
|---|---|
| envId | 环境 ID（配置好的评论系统网址）这里我用的是Vercel部署 |
| region | 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数 |
| visitor | 是否显示文章阅读数 |
| option | 可选配置 |
开启 visitor 后，文章页的访问人数将改为Twikoo提供，而不是 不蒜子
Waline是一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine。
修改主题配置文件
1 | waline: |
开启 visitor 后，文章页的访问人数将改为Waline提供，而不是 不蒜子
hexo-douban
hexo-douban一个在 Hexo 页面中嵌入豆瓣个人主页的小插件。
安装
node 版本要求 >= v18
1 | npm install hexo-douban --save |
配置
将配置文件写入站点的配置文件 _config.yml 里(不是主题的配置文件)。
精简配置
1 | douban: |
完整配置
1 | douban: |
| options | descriptions |
|---|---|
id |
豆瓣ID。 |
builtin |
是否将hexo douban命令默认嵌入进hexo g、hexo s，使其自动执行hexo douban命令。默认关闭。 |
dynamic |
豆瓣页面是否在访问时实时请求接口，默认为false，推送时更新。设置为 true页面会在访问页面时更新豆瓣信息，接口挂了，页面自然也没有了 |
item_per_page |
每页展示的条目数，默认10。 |
meta_max_line |
每个条目展示的详细信息的最大行数，超过该行数则会以”…”省略，默认4。 |
customize_layout |
自定义布局文件。默认值为page。无特别需要，留空即可。若配置为abcd，则表示指定//theme/hexo-theme/layout/abcd.ejs文件渲染豆瓣页面。 |
path |
生成页面后的路径，默认生成在//blog-root/books/index.html 等下面。如需自定义路径，则可以修改这里。 |
title |
该页面的标题。 |
quote |
写在页面开头的一段话，支持html语法，可以为空。 |
actions |
一个字符串列表，表示生成的页面中的“已X” “想X” “X过” 的标签配置，默认会自动聚焦在第一个标签。可选项为: do,wish,collect。 |
option |
该页面额外的Front-matter配置，参考Hexo文档。无特别需要，留空即可。 |
使用
展示帮助文档1
hexo douban -h
主动生成豆瓣页面1
hexo douban
通常大家都喜欢用hexo d来作为hexo deploy命令的简化，但是当安装了hexo douban之后，就不能用hexo d了，因为hexo douban跟hexo deploy的前缀都是hexo d。
升级
可以用下面的方法来更新:
- 修改
package.json内hexo-douban的版本号至最新。(my blog version:2.3.5) - 重新安装最新版本
npm install hexo-douban --save或者使用npm install hexo-douban --update --save直接更新。
菜单
配置成功后，即可在相应的path界面查看结果。
如果上面的显示没有问题就可以在主题的配置文件_config.yml里添加如下配置来为这些页面添加菜单链接。
1 | menu: |
在线聊天
从3.0开始，Butterfly主题内置了多种在线聊天工具。可以选择开启一种，方便与访客的交流。
这些工具都提供了一个按钮可以打开/关闭聊天窗口。
主题也提供了一个集合主题特色的按钮来替换这些工具本身的按钮，这个聊天按钮将会出现在右下角里。
只需要把chat_btn打开就行。
修改主题配置文件
1 | # Chat Button [recommend] |
为了不影响访客的体验，主题提供一个chat_hide_show配置。
设为true后，使用工具提供的按钮时，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。
修改主题配置文件
1 | # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down |
如果使用工具自带的聊天按钮，按钮位置可能会遮挡右下角图标，请配置rightside-bottom调正右下角图标位置
QQ邮箱不可以
配置chatra,需要知道
Public key。打开chatra并注册账号。
修改主题配置文件
1 | # chatra |
chatra的样式你可以Chat Widget自行配置
配置tidio，需要知道Public key
打开tidio并注册账号。【科学上网才可以！】
你可以在设置 > Project data中找到Public key
修改主题配置文件
1 | # tidio |
- wechat
- alipay
