前言

手把手搭建个人博客系列教程-六: 本节主要介绍如何搭建PicGo图床，如何搭建Live2D,留言板,Valine评论区,一图流,页脚美化,首页磁吸分类,首页文章轮播图,首页文章双栏显示等板块

参考文档:

环境与工具

  • 操作系统：Windows 10
  • VSCode编辑器
  • Github
  • VSCode的PicGo插件或PicGo客户端

PicGo图床

Github + VSCode的PicGo插件 实现图床.
每次写博客文章可能都有插入图片的需求，如果你不想通过外链的方式在博客中引用，你可以将要插入的图片放在source目录下，通过相对路径的方式来引用.
例如：在source目录下创建img文件夹，在其中放入要插入的图片 1.jpg ，在要使用的配置文件中通过相对路径 /img/1.jpg 来引用
注意默认的绝对路径根目录是source目录
但是插入的图片都保存在本地博客文件中会造成部署时项目文件庞大，维护不容易管理，加载耗时较长的问题，由此就需要引入图床这个工具了
图床是一种托管图片的方式，通过将本地图片上传至图床管理网站，通过外链访问原始图片地址，例如将本地的图片上传后，在项目代码中就可以用http形式的网络地址来插入图片
图床托管网站有多个，常用的有：七牛云、网易NOS、腾讯COS、Github等
本教程采用免费的Github为例介绍如何搭建和使用图床

创建仓库

在Github中创建图床仓库，注意仓库权限必须为 public ，图床仓库才能生效

设置token

  1. 在个人设置中选择 Settings -> Developer settings -> Personal access tokens -> Generate new token
  2. Expiration选项为token的有效期，设置为 no expiration 无期限
  3. 勾选 repo 选项
  4. 创建token，创建成功后将生成的token复制并保存在本地

注意token最好在本地备份，并注意起名字区分，因为页面刷新后此token内容会被隐藏，以后使用时不能再在GitHub上查看

VSCode中配置PicGo

  1. VSCode安装插件PicGo
  2. PicGo插件 -> 设置 -> Extension Settings，在配置项中找到以下配置项并配置：
    配置项 值
    Current github
    Branch main
    Custom Url https://cdn.jsdelivr.net/gh/github的账户名/图床仓库名
    Path 图床仓库里图片存储的文件夹名称，例如: img/
    Repo github用户名/图床仓库名
    Token 之前保存的token

其中 https://cdn.jsdelivr.net/gh/ 部分就是采用jsdelivr工具对访问github进行CDN加速的格式，设置后就启动了cdn加速
使用PicGo客户端的配置和PicGo插件配置基本相同

使用PicGo插件

配置好PicGo插件后，在VSCode中编辑文件时，将要插入的图片复制，然后用快捷键 Ctrl+Alt+U 就能将剪切板中的图片上传到Github图床仓库中去，PicGo插件会自动将引用的cdn加速外链放在剪切板，直接粘贴在文章中使用

使用VSCode的PicGo插件和使用PicGo客户端差别就是PicGo客户端可以查看图片，这两个都不能实现图片的管理，在本地修改删除后远端仓库中的图片并不会相对应的修改和删除
当你在使用PicGo时如果要更改已经上传的图片，需要在Github端和PicGo端都进行删除更改操作(如果使用的是PicGo软件就在PicGo软件清理，用的VSCode就重启VSCode),同时清理使用的浏览器的缓存数据，这样才能保证旧链接失效，新链接启用

Live2D

安装插件

  1. 安装Live2D必要插件

    1
    npm install --save hexo-helper-live2d

  2. 安装看板娘模块
    live2d-widget-model-wanko是默认的一款看板娘，使用时需要先安装此模块

    1
    npm install --save live2d-widget-model-wanko

设置全局配置文件

修改全局配置文件 _config.yml，如果第一次用live2d就直接在_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
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true # 开关插件版看板娘
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
    position: left #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
mobile:
    show: true # 手机中是否展示

这些配置里只需要关注 use 项配置为使用的插件看板娘名称，display 部分负责看板娘显示的位置，看板娘名称可以在作者Github查看
在查看效果前记得使用 hexo clean 清理缓存

更换看板娘模块

想要使用别的看板娘，还是通过npm来下载看板娘模块，例如要使用的看板娘模块名字为 live2d-widget-model-koharu，则先在博客根目录使用命令

1
npm install --save live2d-widget-model-koharu

然后修改 _config.yml 中live2d部分的use配置项为新的模型名字，例: use: live2d-widget-model-koharu

卸载看板娘模块和看板娘插件

1
2
3
4
# 卸载看板娘插件
npm uninstall hexo-helper-live2d
# 卸载看板娘模型, 记得替换modelname为看板娘模块名称
npm uninstall live2d-widget-model-modelname

卸载后记得将 _config.yml 中的live2d部分注释掉或者删除

Valine评论区

valine操作简单，可自行配置页面美化，虽简单但功能比较强大，而且快速安全，不要后端

hexo本身支持valine，不用另外使用npm安装valine模块

配置主题配置文件

配置 _config.butterfly.yml 文件中comments部分

1
2
3
4
5
6
7
comments:
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine # ,Disqus # 可实现但评论和双评论，配置两个的话默认用前一个
  text: true # 是否显示评论提供商名字
  lazyload: true # 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启lazyload后，评论数将失效）
  count: true # 在文章页top_img展示评论数，livere、Giscus 和 utterances 不支持评论数显示
  card_post_count: false # 在主页展示评论数

创建Valine应用

更多有关Valine的介绍请访问Valine官网

  1. 在Valine官网注册个账号，选择中国大陆或者国际版

    我测试时两种版本都试用过，国际版在评论时通过浏览器控制台看到 403 forbidden error ，说明comment请求正常发出，但被服务端拒绝了，我尝试过 设置服务器地址、添加web安全域名 等解决办法均不行，以后有时间再探究，大陆版本没问题

  2. 创建Valine应用，在应用页面，创建一个应用，选择开发版就行，需求量大的可以选择商用版(收费)
  3. 点击 对应应用 -> 设置 -> 应用凭证 ，复制 AppID 和 AppKey 和 服务器地址 ，在主题配置文件 _config.butterfly.yml 中添加Valine的配置 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # valine
    # https://valine.js.org
    valine:
    appId: Your AppId
    appKey: Your AppKey
    # 查询下面的网站，选择评论的适合出现的图像 https://valine.js.org/#/avatar
    avatar: monsterid # gravatar style
    # 你的对应的服务器的地址，就在appid那一页的下面
    serverURLs: Your server URL # 这项配置适合国内自定义域名用户，海外版本会自动检测(无需手动填写)
    # 评论系统的背景
    bg: # valine background
    # 是否允许游客评论
    visitor: false
    # 评论区显示的文字
    placeholder: 留下你的想法. ( •̀ ω •́ )✧
    # 每一页最大的评论数量
    pageSize: 15
    option:
  4. 在Valine的设置里 安全中心 -> web安全域名 处将自己博客网站的地址加进去，为方便调试localhost是默认不被阻拦的

测试评论功能

  1. 打开博客的评论区，按键盘 F12 打开浏览器控制台，切换到 Network 栏监控数据流，刷新页面
  2. 输入昵称和邮箱后书写内容点击提交
  3. 查看Name为 Comment 的请求是否发生错误，发生错误字体会报红，右上角出现错误数量，没有的话说明正常，看评论界面出现刚提交的消息说明功能正常

注意在浏览器控制台中，如果是第一次提交评论，会发现有两个以 Comment?where= 开头的请求报出 404 not found 的错误，这是正常的，因为第一次评论时评论区服务器端还是没有数据返回给客户端，在提交过评论后这两个请求就会正常

violet留言板

注意violet留言板要和评论功能搭配使用，单独留言板是不能进行留言的，violet留言板就相当于建立了一个可以留言的页面，留言还是要靠评论模块

安装留言板插件

1
npm install hexo-butterfly-envelope --save

设置全局配置文件

在全局配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加留言板模块的相关配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

一图流

一图流实现了博客的整个背景呈现出来是一张完整的图片，hexo默认是将页面分为top_img、background、footer三个部分，三个部分需要各自配置，如此三个部分的图片就是分离的
之前搭建博客的过程中为了美观，我将主页的top_img、footer同background设置为同一个图片，而别的页面直接禁用top_img，实现了一个 伪一图流(🤣)
这部分介绍如何通过css文件添加样式将顶部图和页脚设置透明，达到一图流的效果

创建css样式

创建 custom.css 样式文件在 source/css/ 路径下，在其中书写透明化顶部图和页脚的css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

注入css样式

修改主题配置文件 _config.butterfly.yml ，在配置项 inject 处配置head项，注入custom.css: 

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

取消加载项

因为上面配置后将顶部和底部图片都进行了透明化设置，因此修改主题配置文件 _config.butterfly.yml 中的 index_img 和 footer_bg 配置项取消顶部图与页脚图的加载项避免冗余加载

1
2
3
4
5
# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

页脚美化

安装页脚美化插件

在终端安装页脚美化插件

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

修改配置文件

在全局配置文件 _config.yml 或主题配置文件 _config.butterfly.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
# 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://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 0 # 若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ # 徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo # 徽标API
      message: 博客框架为Hexo_v7.2.0 # 徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本为Butterfly_v4.13.0
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 使用JsDelivr为静态资源CDN加速
    - 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://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

runtime.css 是计时模块的样式配置文件，runtime.js 是计时模块的脚本文件

首页磁吸分类

安装插件

在终端通过npm安装插件

1
npm install hexo-butterfly-categories-card --save

修改配置文件

在全局配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加以下代码，并根据描述排序改为你自己对应的分类名字：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 # 过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 # 显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: Markdown 教程  
      cover: # /img/202405131356060.jpg
    - descr: 手把手搭建个人博客系列教程
      cover: # /img/202405131356056.jpg
    - descr: 磁盘瘦身教程
      cover: # /img/202405131356053.jpg
  # custom_css可下载到本地放在css文件夹中采用相对地址的方式引入
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css
  • 注意在本地测试时即使使用 --draft 后缀草稿文章也不会包含在主页磁吸分类统计里
  • custom_css 配置项所示的链接css文件可下载到本地放在css文件夹中采用相对地址的方式引入，在其中可以魔改自己的样式

首页文章轮播图

安装插件

在终端使用npm安装插件

1
npm install hexo-butterfly-swiper --save

修改配置文件

在全局配置文件 _config.yml 或主题配置文件 _config.butterfly.yml 中添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

同样可以将css和js文件下载下来放在本地css文件夹和js文件夹中魔改自己的样式

设置轮播顺序

在文章front-matter部分添加优先级设置，值越大显示越靠前

1
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前

首页文章双栏显示

安装插件

在终端使用npm工具安装插件

1
npm i hexo-butterfly-article-double-row --save

修改配置文件

  1. 在全局配置文件 _config.yml 中增加配置项
    1
    2
    butterfly_article_double_row:
      enable: true
  2. 在 custom.css 样式文件中添加下面配置来解决最后一页文章数为奇数时不美观的bug
    1
    2
    3
    4
    5
    /* 翻页按钮居中 */
    #pagination {
      width: 100%;
      margin: auto;
    }