Hexo搭建个人博客教程II
前言
在上一篇博客中,已经初步搭建了个人博客,在这篇教程中,我们将对博客进行美化并添加其他功能。
主题安装(下以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就会出现