Hexo-NexT博客使用插件总结

Posted on In Views:

引言

这几天将博客主题从 Fluid 换回了 NexT，在重新安装插件的时候顺便记录了本博客当前使用的插件以及插件相关的主题美化，便于后续修改和供NexT主题读者参考。

一键部署

地址

安装配置

安装插件：

1
npm install hexo-deployer-git --save

然后修改站点配置文件_config.yml 中的配置：

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
  repo:
      github: git@github.com:Yousazoe/yousazoe.github.io.git
      coding: git@e.coding.net:yousazoe/yousazoe/yousazoe.git
  branch: master

永久链接

地址

安装配置

安装插件：

1
npm install hexo-abbrlink --save

然后我们可以在站点配置文件_config.yml 中修改为：

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://yousazoe.top
root: /
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:

文章推荐

这个可以帮助我们根据标签推荐相关文章，原版插件的使用要求编辑主题文件的，但是 NexT 主题集成了这个插件的配置，因此配置起来非常方便。

地址

安装配置

安装插件：

1
npm install hexo-related-popular-posts --save

我们只需要在主题配置文件_config.yml 中修改：

1
2
3
4
5
6
7
8
9
10
11
12
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: ture
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

站点地图

通用站点地图

安装配置：

1
npm install hexo-generator-sitemap --save

然后我们需要在 Hexo 站点配置文件_config.yml 中加入 sitemap 插件：

1
2
3
# 通用站点地图
sitemap:
  path: sitemap.xml

百度站点地图

安装配置：

1
npm install hexo-generator-baidu-sitemap --save

具体配置类似通用站点地图，当然也可以看官方提供的教程，下面是一个简单的配置，我们在 Hexo 站点配置文件_config.yml 中添加：

1
2
3
# 百度站点地图
baidusitemap:
  path: baidusitemap.xml

百度推送

地址

安装配置

安装插件：

1
npm install hexo-baidu-url-submit --save

在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
# 百度主动推送
baidu_url_submit:
  count: 5 				     ## 提交最新的1个链接
  host: tding.top 	     ## 百度站长平台中注册的域名
  token: 	 ## 准入秘钥
  path: baidu_urls.txt 		 ## 文本文档的地址， 新链接会保存在此文本文档里

RSS订阅

地址

安装配置

1
npm install hexo-generator-feed --save

在站点的配置根目录_config.yml添加：

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

接着在主题配置文件添加：

1
2
3
4
5
6
7
social:
  E-Mail: mailto:zoeyousa@gmail.com || fa fa-envelope
  GitHub: https://github.com/Yousazoe || fab fa-github
  Weibo: https://www.weibo.com/6034231696/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1 || fab fa-weibo
  Steam: https://steamcommunity.com/profiles/76561198856466228/ || fab fa-steam
  Chess: https://www.chess.com/member/yousazoe || fa fa-chess-pawn
+  RSS: /atom.xml || fa fa-rss

站点统计

地址

安装配置

1
npm install hexo-symbols-count-time --save

我们只需要在主题配置文件_config.yml 中修改：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: false # 统计信息不换行显示
  item_text_post: false # 文章统计信息中是否显示“本文字数/阅读时长”等描述文字
  item_text_total: ture # 站点统计信息中是否显示“本文字数/阅读时长”等描述文字
  awl: 2 # Average Word Length：平均字符长度
  wpm: 275 # Words Per Minute：阅读速度

汉字的平均字符长度为 1.5，如果在文章中使用纯中文进行写作（没有混杂英文），那么推荐设置 awl: 2 及 wpm: 300，但是如果文章中存在英文，建议设置 awl: 4 及 wpm: 275。

文章置顶

插件配置

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

图标配置

打开/themes/next/layout/_macro/ 目录下的post.swig文件，在<div class="post-meta">的第一个<span>标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
  <i class="fas fa-thumbtack"></i>
  <font color="#C0C0C0">Top</font>
  <span class="post-meta-divider">|</span>
{% endif %}

站内搜索

地址

安装配置

1
npm install hexo-generator-searchdb --save

在主题配置文件themes\next_config.yml中修改相关字段：

1
2
3
4
5
6

local_search:
  enable: true
  trigger: auto # 每次输入改变都执行搜索
  top_n_per_article: 3 # 每篇文章显示的搜索结果数量
  unescape: false

在站点配置文件_config.yml中添加以下字段：

1
2
3
4
5
search:
  path: search.xml
  field: post # 指定搜索范围，可选 post | page | all
  format: html # 指定页面内容形式，可选 html | raw (Markdown) | excerpt | more
  limit: 10000

静态资源压缩

地址

安装配置

1
npm install hexo-neat --save

在站点配置文件_config.yml中添加以下字段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

图片懒加载

地址

安装配置

1
npm install hexo-lazyload --save

在站点配置文件_config.yml中添加以下字段：

1
2
3
4
lazyload:
  enable: true
  # className: #可选 e.g. .J-lazyload-img
  # loadingImg: #可选 eg. ./images/loading.png

文章标题翻译

地址

安装配置

1
npm install hexo-translate-title --save

配置 hexo 根项目下的 _config.yml：

1
2
3
4
5
6
7
8
9
translate_title:
  translate_way: google  # google,youdao,baidu_with_appid,baidu_no_appid
  youdao_api_key: '' # Your youdao_api_key
  youdao_keyfrom: xxxx-blog # Your youdao_keyfrom
  is_need_proxy: false     # true | false
  proxy_url: http://localhost:50018 # Your proxy_url
  baidu_appid: '' # Your baidu_appid
  baidu_appkey: '' # Your baidu_appkey
  rewrite: false # is rewrite true | false

修改 hexo 根目录下的 _config.yml：

1
2
-permalink: :year/:month:day/:title.html
+permalink: :year/:month:day/:translate_title.html

将 :title 修改为 :translate_title 即可，前面的路径也可按照自己的要求变更，例如 permalink: blog/:translate_title.html。

外链优化

减少出站链接能够有效防止权重分散，hexo 有很方便的自动为出站链接添加 nofollow 标签的插件。

首先安装 hexo-filter-nofollow 插件：

1
npm install hexo-filter-nofollow --save

然后我们在站点的配置文件_config.yml 中添加配置，将 nofollow 设置为 true：

1
2
3
4
5
6
7
# 外部链接优化
nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

其中 exclude（例外的链接，比如友链）将不会被加上 nofollow 属性。

侧栏标签云

地址

安装配置

  • 进入到 hexo 的根目录，然后在 package.json 中添加依赖: "hexo-tag-cloud": "2.1.*"

  • 然后执行 npm install 命令

    1
    npm install hexo-tag-cloud

  • 然后需要你去修改主题的 tagcloud 的模板，这个依据你的主题而定。

这里以 Next 主题为例，找到文件 next/layout/_macro/sidebar.swig, 然后添加如下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="site-overview-wrap sidebar-panel">
  {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

  {{- next_inject('sidebar') }}
</div>

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width:100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">
  <i class="fa fa-arrow-up"></i>
  <span>0%</span>
</div>
{%- endif %}

侧栏 Celeste

这里以 Next 主题为例，找到文件 next/layout/_macro/sidebar.swig, 然后添加如下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="twopeople">
    <div class="container" style="height:200px;">
        <canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script>
    <script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script>
    <style>
        .twopeople{
            margin: 0;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
            cursor: move;
        }
    </style>
</div>


{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top motion-element">
  <i class="fa fa-arrow-up"></i>
  <span>0%</span>
</div>
{%- endif %}

PDF 展示

地址

安装配置

安装插件：

1
$ npm install --save hexo-pdf

使用方式；

Normal PDF

1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

or

1
{% pdf ./bash_freshman.pdf %}

Google drive

1
{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

Slideshare

1
{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

效果预览

Normal PDF

Google drive

Slideshare

Live2D

地址

安装配置

1
npm install --save hexo-helper-live2d

选择模型

可到https://huaji8.top/post/live2d-plugin-2.0/预览效果。

命令为:npm install live2d-widget-model-模型名，模型为可参考上面的预览内容，安装模型:

1
npm install live2d-widget-model-hijiki

主题配置

站点的配置文件\_config.yml或者是主题的配置文件中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: ture
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hijiki # 模型：https://huaji8.top/post/live2d-plugin-2.0/
  display:
    position: right
    width: 50
    height: 100
  mobile:
    show: true

参考

播放器标签

地址

安装

1
2
npm install hexo-tag-aplayer --save
npm install hexo-tag-dplayer --save

Aplayer

依赖
  • APlayer.js > 1.8.0
  • Meting.js > 1.1.1
使用
1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
标签参数
  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: （可选）播放器袖珍风格
  • autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
  • width:xxx: (可选) 播放器宽度 (默认: 100%)
  • lrc:xxx: （可选）歌词文件 URL 地址

当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用：

1
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}
歌词标签

除了使用标签 lrc 选项来设定歌词，你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中：

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}
播放列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% 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 %}
MeingJS 支持 (3.0 新功能)

MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：

1
2
aplayer:
  meting: true

接着就可以通过 {% meting ...%} 在文章中使用 MetingJS 播放器了：

1
2
3
4
5
<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关 {% meting %} 的选项列表如下:

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置

关于如何设置自建的 Meting API 服务器地址，以及其他 MetingJS 配置，请参考章节自定义配置

PJAX 兼容

若在 Hexo 中使用了 PJAX，可能需要自己手动清理 APlayer 全局实例：

1
2
3
4
5
6
7
8
$(document).on('pjax:start', function () {
    if (window.aplayers) {
        for (let i = 0; i < window.aplayers.length; i++) {
            window.aplayers[i].destroy();
        }
        window.aplayers = [];
    }
});
自定义配置（3.0 新功能）

现在你可以在 Hexo 配置文件 _config.yml 中配置本插件：

1
2
3
4
5
6
7
8
9
10
aplayer:
  script_dir: some/place                        # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: some/place                         # Public 目录下样式目录路径，默认: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同

Dplayer

快速开始

我们先尝试初始化一个最简单的 DPlayer

加载播放器文件:

1
2
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

或者使用模块管理器:

1
2
3
import DPlayer from 'dplayer';

const dp = new DPlayer(options);

在 js 里初始化:

1
2
3
4
5
6
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});

一个最简单的 DPlayer 就初始化好了，它只有最基本的视频播放功能

参数

DPlayer 有丰富的参数可以自定义你的播放器实例

名称 默认值 描述
container document.querySelector(‘.dplayer’) 播放器容器元素
live false 开启直播模式, 见#直播
autoplay false 视频自动播放
theme ‘#b7daff’ 主题色
loop false 视频循环播放
lang navigator.language.toLowerCase() 可选值: ‘en’, ‘zh-cn’, ‘zh-tw’
screenshot false 开启截图，如果开启，视频和视频封面需要允许跨域
hotkey true 开启热键，支持快进、快退、音量控制、播放暂停
airplay true 在 Safari 中开启 AirPlay
preload ‘auto’ 视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume 0.7 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
playbackSpeed [0.5, 0.75, 1, 1.25, 1.5, 2] 可选的播放速率，可以设置成自定义的数组
logo - 在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend - 自定义获取和发送弹幕行为，见#直播
video - 视频信息
video.quality - 见#清晰度切换
video.defaultQuality - 见#清晰度切换
video.url - 视频链接
video.pic - 视频封面
video.thumbnails - 视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
video.type ‘auto’ 可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
video.customType - 自定义类型, 见#MSE 支持
subtitle - 外挂字幕
subtitle.url required 字幕链接
subtitle.type ‘webvtt’ 字幕类型，可选值: ‘webvtt’, ‘ass’，目前只支持 webvtt
subtitle.fontSize ‘20px’ 字幕字号
subtitle.bottom ‘40px’ 字幕距离播放器底部的距离，取值形如: ‘10px’ ‘10%’
subtitle.color ‘#fff’ 字幕颜色
danmaku - 显示弹幕
danmaku.id required 弹幕池 id，必须唯一
danmaku.api required 见#弹幕接口
danmaku.token - 弹幕后端验证 token
danmaku.maximum - 弹幕最大数量
danmaku.addition - 额外外挂弹幕，见#bilibili 弹幕
danmaku.user ‘DIYgod’ 弹幕用户名
danmaku.bottom - 弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: ‘10px’ ‘10%’
danmaku.unlimited false 海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu [] 自定义右键菜单
highlight [] 自定义进度条提示点
mutex true 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff',
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
});
API

  • dp.play(): 播放视频

  • dp.pause(): 暂停视频

  • dp.seek(time: number): 跳转到特定时间

    1
    dp.seek(100);

  • dp.toggle(): 切换播放和暂停

  • dp.on(event: string, handler: function): 绑定视频和播放器事件，见#事件绑定

  • dp.switchVideo(video, danmaku): 切换到其他视频

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    dp.switchVideo(
        {
            url: 'second.mp4',
            pic: 'second.png',
            thumbnails: 'second.jpg',
        },
        {
            id: 'test',
            api: 'https://api.prprpr.me/dplayer/',
            maximum: 3000,
            user: 'DIYgod',
        }
    );

  • dp.notice(text: string, time: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8

  • dp.switchQuality(index: number): 切换清晰度

  • dp.destroy(): 销毁播放器

  • dp.speed(rate: number): 设置视频速度

  • dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量

    1
    dp.volume(0.1, true, false);

  • dp.video: 原生 video

  • dp.video.currentTime: 返回视频当前播放时间

  • dp.video.duration: 返回视频总时间

  • dp.video.paused: 返回视频是否暂停

  • 支持大多数原生 video 接口(opens new window)

  • dp.danmaku

  • dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    dp.danmaku.send(
        {
            text: 'dplayer is amazing',
            color: '#b7daff',
            type: 'right', // should be `top` `bottom` or `right`
        },
        function () {
            console.log('success');
        }
    );

  • dp.danmaku.draw(danmaku): 实时绘制一个新弹幕

    1
    2
    3
    4
    5
    dp.danmaku.draw({
        text: 'DIYgod is amazing',
        color: '#fff',
        type: 'top',
    });

  • dp.danmaku.opacity(percentage: number): 设置弹幕透明度，透明度值在 0 到 1 之间

    1
    dp.danmaku.opacity(0.5);

  • dp.danmaku.clear(): 清除所有弹幕

  • dp.danmaku.hide(): 隐藏弹幕

  • dp.danmaku.show(): 显示弹幕

  • dp.fullScreen: 两个类型：web 和 browser，默认类型是 browser

  • dp.fullScreen.request(type: string): 进入全屏

    1
    dp.fullScreen.request('web');

  • dp.fullScreen.cancel(type: string): 退出全屏

    1
    dp.fullScreen.cancel('web');
事件绑定
1
2
3
4
dp.on(event, handler)
dp.on('ended', function () {
    console.log('player ended');
});

视频事件

  • abort
  • canplay
  • canplaythrough
  • durationchange
  • emptied
  • ended
  • error
  • loadeddata
  • loadedmetadata
  • loadstart
  • mozaudioavailable
  • pause
  • play
  • playing
  • progress
  • ratechange
  • seeked
  • seeking
  • stalled
  • suspend
  • timeupdate
  • volumechange
  • waiting

播放器事件

  • screenshot
  • thumbnails_show
  • thumbnails_hide
  • danmaku_show
  • danmaku_hide
  • danmaku_clear
  • danmaku_loaded
  • danmaku_send
  • danmaku_opacity
  • contextmenu_show
  • contextmenu_hide
  • notice_show
  • notice_hide
  • quality_start
  • quality_end
  • destroy
  • resize
  • fullscreen
  • fullscreen_cancel
  • subtitle_show
  • subtitle_hide
  • subtitle_change
清晰度切换

在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度

Load demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls',
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});
弹幕
弹幕接口
1
danmaku.api

现成的接口

链接: https://api.prprpr.me/dplayer/

每日备份: DPlayer-data(opens new window)

自己搭建

DPlayer-node(opens new window)

bilibili 弹幕
1
danmaku.addition

API: https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid](opens new window)

1
2
3
4
5
6
const option = {
    danmaku: {
        // ...
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],
    },
};

Hexo管理器

地址

安装配置

安装插件：

1
2
3
npm install --save hexo-admin
hexo server -d
open http://localhost:4000/admin/

密码设置

If you’re using Hexo admin on your live server, you want some password protection. To enable this, you just add a few config variables to your hexo _config.yml:

1
2
3
4
admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

The password_hash is the bcrypt hash of your password. The secret is used to make the cookies secure, so it’s a good idea to have it be long and complicated.

A utility in Hexo admin’s Settings can hash your password and generate the admin section for you. Start Hexo and go to Settings > Setup authentification and fill out your information. Copy the generated YAML into your _config.yml.

Once that’s in place, start up your hexo server and going to /admin/ will require you to enter your password.

NexT主题文档

地址

安装配置

Install Hexo & NexT & NexT Website Source on Localhost:

1
2
3
git clone https://github.com/next-theme/theme-next-docs
cd theme-next-docs
npm install

Generate:

1
npx hexo generate

Run server:

1
npx hexo server

又拍云部署

地址

安装配置

编辑根目录的 _config.yml 文件的 deploy 字段，配置又拍云存储的服务名称、操作员名称、操作员密码：

1
2
3
4
5
6
deploy:
  - type: upyun
    serviceName: 服务名称
    operatorName: 操作员名称
    operatorPassword: 操作员密码
    path: / 上传目录(选填，默认为根目录)

Netlify CMS

地址

安装配置

这是一个 Netlify CMS 的 Hexo 插件，你可以使用它，简单的开启 Netlify CMS 服务。

1
cnpm install --save hexo-netlify-cms

设置自定义配置文件，覆盖默认的，自定义配置文件的定义变量与 hexo 配置文件的 netlify_cms 变量中定义的等效

1
2
netlify_cms:
  config_file: netlify-cms.yaml

设置 post 与 page 自动生成器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
auto_generator:
  post: 
    # 如果你有多个Post文件夹，在这里定义多个，见https://github.com/jiangtj/blog/blob/master/netlify-cms.yaml
    all_posts:
      # 设置为false，关闭默认的Post
      #enabled: true
      label: "Post"
      folder: "source/_posts"
      create: true
      editor:
        preview: true
  # Page生成配置
  page: 
    enabled: true
    config:
      label: "Page"
      # 默认禁止删除Page文件
      delete: false
      editor:
        preview: true

设置全局的 fields：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
global_fields:
  # 通过hexo配置覆盖时间格式
  over_format: true
  # 默认的fields
  default:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Publish Date", name: "date", widget: "datetime", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", format: "YYYY-MM-DD HH:mm:ss", required: false}
    - {label: "Tags", name: "tags", widget: "list", required: false}
    - {label: "Categories", name: "categories", widget: "list", required: false}
    - {label: "Body", name: "body", widget: "markdown", required: false}
    - {label: "Permalink", name: "permalink", widget: "string", required: false}
    - {label: "Comments", name: "comments", widget: "boolean", default: true, required: false}
  # 默认的post fields，如果设置，posts的fields将从这里取
  #post:
  # 默认的page fields，同理
  #page:

添加脚本, 用于自定义组件和预览样式：

1
2
3
4
5
6
7
netlify_cms:
  scripts:
    - js/cms/youtube.js
    #- js/cms/img.js
    #或者使用 jsdelivr cdn
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/youtube.js
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/img.js

Hexo Next 暗黑模式

适用于 NexT 主题的暗黑/夜间模式切换插件。

地址

安装配置

1
npm install hexo-next-darkmode --save

首先确保 NexT 主题原生的 darkmode 选项设置为 false：

1
2
# Close NexT's darkmode
darkmode: false

往 NexT 主题的 _config.yml 配置文件里添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js
  • isActivated: true：默认激活暗黑/夜间模式，请始终与 saveInCookies: false、autoMatchOsTheme: false 一起使用；同时需要在 NexT 主题的 _config.yml 配置文件里设置 pjax: true，即启用 Pjax。