Butterfly进阶

哔哩哔哩番剧页面插件

安装

npm install hexo-bilibili-bangumi --save

配置

将下面的配置写入站点的配置文件_config.yml里(不是主题的配置文件).

bangumi: # 追番设置
  enable: true
  path:
  vmid: xxxxxxx
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  loading:
  metaColor:
  color:
  webp:
  progress:
cinema: # 追剧设置
  enable: false
  path:
  vmid: xxxxxxx
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  loading:
  metaColor:
  color:
  webp:
  progress:

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

获取 uid

登录哔哩哔哩后前往https://space.bilibili.com/页面，网址最后的一串数字就是uid ==需要将追番列表设置为公开！==

使用

在hexo generate或hexo deploy之前使用hexo bangumi -u命令更新追番数据，使用hexo cinema -u命令更新追剧数据！ 删除数据命令:hexo bangumi -d/hexo cinema -d

添加信封样式留言板

安装

在博客根目录下打开终端，运行以下指令：

npm install hexo-butterfly-envelope --save

配置

添加配置信息，以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺头部图片
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

参数释义

参数	备选值/类型	释义
enable	true/false	控制开关
cover	URL	信笺头部图片链接
message	text	信笺正文，支持多行文本，写法见上文示例
bottom	text	信笺底部信息，仅支持单行文本
height	1050px	默认1050px，信封划出的高度
path	comments	【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
front_matter	object	【可选】comments页面的 front_matter 配置,写法见上文示例

文章链接唯一化

也许你会数次更改文章题目或者变更文章发布时间，在默认设置下，文章链接都会改变，不利于搜索引擎收录，也不利于分享。唯一永久链接才是更好的选择。

安装

npm install hexo-abbrlink --save

在站点配置文件中查找代码permalink，将其更改为:

permalink: posts/:abbrlink/  # “posts/” 可自行更换

这里有个知识点：

百度蜘蛛抓取网页的规则: 对于蜘蛛说网页权重越高、信用度越高抓取越频繁，例如网站的首页和内页。蜘蛛先抓取网站的首页，因为首页权重更高，并且大部分的链接都是指向首页。然后通过首页抓取网站的内页，并不是所有内页蜘蛛都会去抓取。

搜索引擎认为对于一般的中小型站点，3层足够承受所有的内容了，所以蜘蛛经常抓取的内容是前三层，而超过三层的内容蜘蛛认为那些内容并不重要，所以不经常爬取。出于这个原因所以permalink后面跟着的最好不要超过2个斜杠。

配置

然后在站点配置文件中添加如下代码:

# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

可选择模式：

• crc16 & hex
• crc16 & dec
• crc32 & hex
• crc32 & dec

压缩（hexo-all-minifier）

它兼顾了hexo-neat的易用性，和gulp的功能。

安装

npm install hexo-all-minifier --save

如果安装失败试试用cnpm（我就是这么安装成功的）

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-all-minifier --save

配置

在_config.yml里添加:

all_minifier: true

详细设置：

html_minifier:
  enable: true
  ignore_error: false
  exclude:

css_minifier:
  enable: true
  exclude:
    - '*.min.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

效果

本地搜索

安装

npm install hexo-generator-search --save

配置

修改主题配置文件

local_search:
  enable: false

模型宠物

安装

npm install --save hexo-helper-live2d
npm install live2d-widget-model-tororo   对应的模型命令

模型的GitHub地址：https://github.com/xiazeyu/live2d-widget-models

配置

将下面的配置写入站点的配置文件_config.yml里(不是主题的配置文件).

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    # 这是宠物模型 对应命令
    use: live2d-widget-model-hijiki
  display:
    # 设置模型的位置
    position: right   # left  左边    right  右边  
    width: 150        # 模型大小  宽度
    height: 300       # 模型大小	 高度
    hOffset: 0         # 水平偏移
    vOffset: 0      # 垂直偏移
  mobile:
    show: true  # 手机显示开关
    scale: 0.5
  react:
    opacityDefault: 0.7   # 透明度
    opacityOnHover: 0.2

评论

Twikoo 是一个简洁、安全、无后端的静态网站评论系统，基于腾讯云开发。

具体如何配置评论，请查看Twikoo文档

你只需要把获取到的 环境ID (envId) 填写到配置上去就行

修改 主题配置文件

twikoo:
  envId:
  region:
  visitor: false
  option:

字数统计

安装

npm install hexo-wordcount --save 

配置

修改 主题配置文件:

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

说说（Artitalk）

安装

npm install hexo-butterfly-artitalk

LeanCloud

參考 Artitalk 文檔 - LeanCloud 的相關準備

配置

添加配置信息 在 Hexo 的配置文件 或者 主题的配置文件中添加

# Artitalk
# see https://artitalk.js.org/
artitalk:
  enable: true
  appId:
  appKey:
  path:
  js:
  option:
  front_matter:

参数	解释
appId	【必须】LeanCloud创建的应用程序中的AppID
appKey	【必须】LeanCloud创建的应用程序中的AppKEY
path	【任选】Artitalk 的路径名称（默认为artitalk，生成的页面为 artitalk/index.html）
js	【任选】Artitalk 的 js CDN（默认为https://cdn.jsdelivr.net/npm/artitalk）
option	【任选】Artitalk 需要额外的配置
front_matter	【任选】Artitalk页面的front_matter配置