前言

在上一篇博客中,已经初步搭建了个人博客,在这篇教程中,我们将对博客进行美化并添加其他功能。

主题安装(下以Butterfly主题为例)

安装

在hexo根目录输入

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改在hexo根目录下的_config.yml,将主题修改为butterfly

theme: butterfly

追番页面

安装

$ npm install hexo-bilibili-bangumi --save

配置

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

bangumi: # 追番设置
  enable: true
  source: bili
  bgmInfoSource: 'bgmApi'
  path:
  vmid:
  title: '追番列表'
  quote: '生命不息,追番不止!'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true
  path:
  vmid:
  title: '追剧列表'
  quote: '生命不息,追剧不止!'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  extra_options:
    key: value

部分参数说明
source: 数据源,仅支持追番,追剧仅支持哔哩哔哩源。bili: 哔哩哔哩源, bangumi: Bangumi源(bangumi.tv),
vmid: 哔哩哔哩的 vmid(uid)或Bangumi的用户id

使用

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

Butterfly主题自带美化

以下是在butterfly主题文件夹下_config文件中提供的一些美化,可根据需求自行修改

# Typewriter Effect (打字效果)
# Background effects (背景特效)
# canvas_ribbon (靜止彩帶背景)
# Fluttering Ribbon (動態彩帶)
# canvas_nest
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
# Mouse click effects: words (鼠標點擊效果: 文字)
# Default display mode (網站默認的顯示模式)

雷姆live2d

安装

npm hexo-live2d-rem
在根目录的config中添加

live2d_rem:
enable: true

使用

在git bash中输入$ hexo live2d-rem -i
最后重新生成网页,雷姆live2d就会出现