前言

这个是一些比较基础但是Jerry大佬没有整合进去的功能
因为不受Hexo Butterfly 官方支持
所以可能会存在一些奇奇怪怪的问题

图片路径转换

介绍

为了让我们的照片放在对应的文件夹下面
我们需要安装一个叫做 hexo-asset-image 插件

安装插件

1
npm install hexo-asset-img --save

修改 Hexo 配置文件

  • 修改 _config.yml 文件
1
post_asset_folder: true

Markdown 图片格式

然后我们还要把文章中粘贴的图片名改为

{% asset_img "Picture_Name" "" %}

之后我们每次生成新文章时
都会读取我们的文章下属文件夹的照片了

永久链接

介绍

为了不要让我们的文档名经常变来变去
我们使用这个Hexo-abbrlink 进行指派永久编号
从而让每一篇文档无论怎么修改也是同一个网址访问

安装插件

1
npm install hexo-abbrlink --save

修改 Hexo 配置文件

  • 修改 _config.yml 文件
  1. 修改 permalink 参数
1
2
- permalink: :year/:month/:day/:title/
+ permalink: posts/:abbrlink.html
  1. 高级配置
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
# abbrlink config (永久链接)
abbrlink:
  # support crc16(default) and crc32
  # 支持 crc16(default) 和 crc32 加密
  alg: crc32
  # support dec（默认值） and hex
  # 支持 dec（默认值） 和 hex 算法
  rep: hex
  # (true)Process draft,(false)Do not process draft. false(default) 
  #（true）处理草稿，（false）不处理草稿。false（默认值）
  drafts: false
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     # true(default)
     enable: true
     # 3(default)
     depth:        
     over_write: false
  # enable auto title, it can auto fill the title by path
  # 启用自动标题，它可以按路径自动填充标题
  auto_title: false
  # enable auto date, it can auto fill the date by time today
  # 启用自动日期，它可以按当前的时间自动填充日期
  auto_date: false
  # enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.
  # 启用强制模式，在这种模式下，插件将忽略缓存，并为每个帖子重新计算abbrlink值，即使它已经有abbrlink值。
  force: false

页脚美化

  • 该插件包括页脚计时器和页脚徽标两个功能

安装插件

1
npm install hexo-butterfly-footer-beautify --save

修改 Hexo 配置文件

  • 添加到 _Config.yml 中去
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
# footer_beautify (页脚美化)
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    # 计时器开关
    timer: true
    # 徽标开关
    bdage: true
  # 过滤器优先权
  priority: 5
  # 应用页面
  enable_page: all
  # 屏蔽页面
  exclude:
    # - /posts/
    # - /about/
  # 挂载容器类型
  layout:
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项
  runtime_js: https://unpkg.zhimg.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://unpkg.zhimg.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  # 若非0，则开启轮播功能，每行徽标个数
  swiperpara: 3
  bdageitem:
    # 徽标指向网站链接
    - link: https://hexo.io/
      # 徽标API
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo
      # 徽标提示语
      # message: 博客框架 Hexo_v7.0.0
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      # message: 主题版本 Butterfly_v3.11.0
    #- link: https://www.jsdelivr.com/
    #  shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
    #  message: 本站使用JsDelivr为静态资源提供CDN加速
    #- link: https://vercel.com/
    #  shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
    #  message: 本站采用双线部署，默认线路托管于Vercel
    #- link: https://vercel.com/
    #  shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
    #  message: 本站采用双线部署，联通线路托管于Coding
    #- link: https://github.com/
    #  shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
    #  message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      # message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
  swiper_css: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://unpkg.zhimg.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

文章加密 (hexo-blog-encrypt)

之前一直没找到 Hexo 的加密插件
差点都叛逃到 WordPress

hexo-blog-encrypt

  • 感谢 D0n9X1n 大佬的开发
1
https://github.com/D0n9X1n/hexo-blog-encrypt

安装插件

1
npm install --save hexo-blog-encrypt

加密方式

Front matter

  • 修改需要加密的文章的开头部分
1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hello World
tags:
- 作为日记加密
date: 2020-01-23 20:01:23
password: HelloWorld
abstract: 有东西被加密了, 请输入密码查看。
message: 您好, 这里需要密码。
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试。
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容。
---

Hexo 配置文件

  • 添加到 _Config.yml 中去
1
2
3
4
5
6
7
8
9
10
11
# Security
# hexo-blog-encrypt
encrypt: 
  abstract: 有东西被加密了, 请输入密码查看。
  message: 您好, 这里需要密码。
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  theme: xray
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试。
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容。

Bilibili 追番 (hexo-bilibili-bangumi)

二刺螈都知道的东西
什么？你不知道？
你被开除二刺螈籍了

安装插件

1
npm install hexo-bilibili-bangumi --save

添加 Hexo 配置文件

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
59
60
61
62
# Bilibili 追番记录
bangumi: 
  enable: true
# 数据源
  source: bgmApi
# 获取Bangumi番剧信息时使用的Api，仅使用Bangumi源时此选项生效，`bgmApi`: Bangumi Api, `bgmSub`: Bangumi-Subject
  bgmInfoSource: 'bgmApi'
# 就是上面生成页面的地址
  path: bangumis/index.html
# Bangumi的用户id，直接点到个人主页看头像那里就有
  vmid: *********
# 页面的标题
  title: '追番列表'
# 页头的话
  quote: '「B站未来有可能会倒闭，但绝不会变质」'
# 初始显示页面：`0: 想看`, `1: 在看`, `2: 看过`，默认为`1`
  show: 1
# 是否启用图片懒加载，如果与主题的懒加载冲突请关闭
  lazyload: true
# 设置封面图的默认`src`值, `__image__`为封面链接, `__loading__`为loading图片链接, `lazyload`选项为`false`时此选项生效
  srcValue: '__image__'
# 设置封面图的属性与属性值, 例`lazyloadAttrName: 'data-src=__image__'`代表为`img`元素添加`data-src`属性, 其值为图片链接, `lazyload`选项为`false`时此选项生效
  lazyloadAttrName: 'data-src=__image__'
# 图片加载完成前的 loading 图片，需启用图片懒加载
  loading:
# 使用`bgm`源时显示自己的评价及评论，默认`false`
  showMyComment: true
# 分页优化，只将第一页的数据渲染到`html`文件中，其余数据将通过异步请求加载，避免番剧过多时html文件过大导致页面加载缓慢，建议番剧较多时使用，默认`false`
  pagination: false
# meta 部分(简介上方)字体颜色
  metaColor:
# 简介字体颜色
  color:
# 番剧封面使用`webp`格式(此格式在`safari`浏览器下不显示，但是图片大小可以缩小 100 倍左右，仅支持哔哩哔哩源), 默认`true`
  webp: false
# 获取番剧数据时是否显示进度条，默认`true`
  progress: false
# 手动添加的番剧/追剧数据是否优先显示，`1`为优先，其它为不优先
  extraOrder:
# 此配置会扩展到Hexo`page`变量中
  extra_options:
    key: value
    lazyload:
      enable: false # 关闭主题自带的懒加载(只关闭番剧页，不影响其他页面)
cinema: # 追剧设置
  enable: true
  path: cinemas/index.html
  vmid: **********
  title: '追剧列表'
  quote: '「人生没有彩排，每天都是现场直播」'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  extra_options:
    key: value

参数详解

  • enable: 是否启用
  • path: 番剧页面路径，默认bangumis/index.html
  • vmid: 哔哩哔哩番剧页面的 vmid(uid),如何获取？
  • title: 该页面的标题
  • quote: 写在页面开头的一段话,支持html语法
  • show: 初始显示页面：0: 想看, 1: 在看, 2: 看过，默认为1
  • loading: 图片加载完成前的loading图片
  • metaColor: meta部分(简介上方)字体颜色
  • color: 简介字体颜色
  • webp: 番剧封面使用webp格式(此格式在safari浏览器下不显示，但是图片大小可以缩小100倍左右), 默认true

获取 Bilibili UUID

  1. 进入你的Bilibili 用户主页
1
https://space.bilibili.com/
  1. 记录下你的 UID
  1. 公开我的追番追剧

更新追番追剧数据

1
2
# 追番
hexo bangumi -u
1
2
# 追剧
hexo cinema -u

Steam 游戏库 (hexo-steam-games)

安装插件

1
npm install hexo-steam-games --save

添加 Hexo 配置文件

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
# Steam 游戏库
steam:
  enable: true
  # steam 64位Id
  steamId: '***************'
  # steam api key
  apiKey: '*********************' 
#  steamInfos: # 多账号配置
#    - id: '*****' #steam 64位Id
#      path: # 为每个帐号游戏库单独配置页面路径，默认`steamgames/{steamId}/index.html`
#      ... # 兼容以下配置项
#    - id: '*****'
#      ...
  freeGames: true
  path:
  title: Steam 游戏库
  quote: 'G胖亏爆了'
  tab: recent
  length: 1000
  imgUrl: # '*****'
  proxy:
    host:
    port:
  extra_options:
    key: value

参数详解

  • enable: 是否启用
  • steamId: steam 64位Id(需要放在引号里面，不然会有BUG), 需要将steam库设置为公开！
  • path: 番剧页面路径，默认steamgames/index.html
  • title: 该页面的标题
  • quote: 写在页面开头的一段话,支持html语法
  • tab: all或recent, all: 所有游戏, recent: 最近游玩的游戏
  • length: 要显示游戏的数量，游戏太多的话可以限制一下
  • imgUrl: 图片链接，在quote下面放一张图片，图片链接到Steam个人资料，可留空
  • proxy: 如果无法访问steam社区的话请使用代理
    • host: 代理ip或域名
    • port: 代理端口

获取 Steam ID & API

  1. 直接登录获取 Steam API
1
https://steamcommunity.com/dev/apikey

  1. 右上角 账号名 --> 账号详细资料

  2. 然后获取到 Steam ID

参考 & 引用

https://butterfly.js.org/posts/ceeb73f/
https://akilar.top/posts/f99b208/
https://www.fomal.cc/posts/eec9786.html
https://github.com/HCLonely/hexo-steam-games