前言

第一篇搭建博客的博文-00004-Hexo快速搭建一个博客-ubuntu，虽然已经介绍了方方面面，但是还有一些遗漏之处，并且它包含的内容过多，导致它的加载很缓慢，影响观看。因此本篇博文将作为其补充为大家介绍其他内容。

操作系统：Ubuntu 20.04.4 LTS

参考文档

  1. 给hexo-theme-hiero添加雪花飘落效果（2020-07-05）

  2. Butterfly 安装文档(三) 主题配置-1

  3. 解决 Hexo ButterFly 主题中最新评论功能模块出现无法获取评论的问题

  4. Twikoo 文档

  5. Twikoo 文档-快速上手

  6. Butterfly 安裝文檔(四) 主題配置-2

  7. 部署Twikoo评论系统及其邮件推送(Vercel)

  8. hexo搭建个人博客（提高篇）

  9. Hexo 官方文档-引用文章

  10. 信笺样式留言板

  11. 添加白天夜间模式转换动画

  12. 给博客添加个性名片

  13. twikoo评论块气泡风格魔改美化

  14. Butterfly comment board beautify

  15. 如何快速备案您的网站

  16. Butterfly 安装文档(三) 主题配置-1-页脚自定义文本

  17. html语法大全

  18. Butterfly 安裝文檔(四) 主題配置-2-footer 背景

  19. 二级域名的活用方法

  20. Github Page 个人主页——自定义域名

  21. 宝塔面板 SSL 证书安装部署

  22. 腾讯云-免费 SSL 证书名额相关问题

  23. Butterfly 安装文档(六) 进阶教程-Icon

  24. 开启自定义 CDN 加速域名

  25. 域名归属权验证

  26. 配置 CNAME

  27. 新用户体验奖励

  28. 关于 COS 不再支持新增默认 CDN 加速域名的通知

  29. 腾讯云对象存储COS及CDN加速配置

  30. 公安备案流程

  31. 公安备案常见问题

  32. 域名证书下载

  33. 日新博客提交了公安备案及流程

  34. 网站备案之交互式公安备案流程

  35. 为什么越来越多的网站关闭了评论功能

  36. 很多网站评论功能关闭了，网络监管要开始严格了吗？

  37. 卢松松博客关闭评论功能，是否意味着评论式推广无用武之地？

  38. 个人博客禁止评论应该怎么办？可用境外主机或注册云上公司

  39. 如何获取公安备案号？如何将公安备案号放到网站底部？

  40. 网站公安备案需要多久？- 桃源侠

  41. 全国公安备案流程

  42. 内容分发网络 CDN-产品概述

  43. 域名管理概述

  44. CDN 流量包介绍

  45. COS-CDN 计费说明

  46. 流量费用

  47. 防盗链配置

  48. Hexo增添头像卡片动态背景

  49. Hexo博客Butterfly主题美化

  50. Math 数学

  51. npm install 安装依赖无反应

  52. MarkDown数学公式基本语法

  53. Supported Functions

  54. Support Table

环境版本

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
git         2.25.1
node        v18.2.0
npm         8.9.0

cnpm -v
cnpm@7.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.17 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@18.2.0 (/usr/bin/node)
npminstall@5.8.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
linux x64 5.13.0-41-generic 
registry=https://registry.npmmirror.com

hexo -v
INFO  Validating config
INFO  
  ===================================================================
                                                                     
      #####  #    # ##### ##### ###### #####  ###### #      #   #    
      #    # #    #   #     #   #      #    # #      #       # #     
      #####  #    #   #     #   #####  #    # #####  #        #     
      #    # #    #   #     #   #      #####  #      #        #      
      #    # #    #   #     #   #      #   #  #      #        #    
      #####   ####    #     #   ###### #    # #      ######   #  

                            4.2.0
  ===================================================================
hexo: 6.1.0
hexo-cli: 4.3.0
os: linux 5.13.0-41-generic Ubuntu 20.04.4 LTS (Focal Fossa)
node: 18.2.0
v8: 10.1.124.8-node.13
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 108
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.6
openssl: 3.0.3+quic
cldr: 41.0
icu: 71.1
tz: 2022a
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

# 轻量应用服务器信息

实例规格                 CPU: 2核 内存: 2GB
系统盘                   40GB SSD云硬盘
带宽                    4Mbps
镜像名称                 宝塔Linux面板
镜像类型                 应用镜像
操作系统                 CentOS 7.9 64bit
预装应用软件              宝塔Linux面板 7.8.0 腾讯云专享版

雪花动态效果背景进阶

在 blog/themes/butterfly/source/js 目录下新建 snow2.js，并粘贴下面代码

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/*样式一*/
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
    documentHeight  = $(document).height(),
    documentWidth   = $(document).width(),
    defaults = {
        minSize     : 10,
        maxSize     : 20,
        newOn       : 1000,
        flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
    },
    options = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

在 _config.butterfly.yml 文件的 inject 的 bottom 处引入上面的代码

1
- <script defer src="/js/snow2.js"></script>

修改网站图标

修改 _config.butterfly.yml 文件

1
2
# Favicon（網站圖標）
favicon: /img/favicon.png

效果

最新评论

最新评论只会在刷新时才会去读取，并不会实时变化。

由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分钟。也就是説，调用后资料会存在 localStorage 里，10分钟内刷新网站只会去 localStorage 读取资料。 10 分钟期限一过，刷新页面时才会去调取 API 读取新的数据。

在侧边栏显示最新评论板块。

修改 _config.butterfly.yml 文件

1
2
3
4
5
6
7
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

本人选择的是 Valine 评论，Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。关于怎么配置 valine 评论可以参考我的 00004-Hexo快速搭建一个博客-ubuntu 博文。

登录 LeanCloud 进入设置 Valine 那个应用。

点击 设置 > 应用凭证 > 服务器地址 > REST API 服务器地址，复制 REST APT 服务器地址。将 REST APT 服务器地址填入到 _config.butterfly.yml 文件的 valine 的 serverURLs。

1
2
3
4
5
6
7
8
9
10
11
# valine
# https://valine.js.org
valine:
  appId:
  appKey:
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:
  lang: zh_CN

效果

Twikoo 和 Valine 双评论

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

A simple, safe, free comment system based on Tencent CloudBase (tcb).

特色

  • 支持回复、点赞

  • 无需额外适配、支持搭配浅色主题与深色主题使用

  • 支持 API 调用、批量获取文章评论数、最新评论

  • 访客在昵称栏输入 QQ 号，会自动补全 QQ 昵称和 QQ 邮箱

  • 访客填写数字 QQ 邮箱，会使用 QQ 头像作为评论头像

  • 支持评论框粘贴图片（可禁用）

  • 支持插入图片（可禁用）

  • 支持 7bu image bed, Tencent CloudBase image bed

  • 支持插入表情（可禁用）

  • 支持 Ctrl + Enter 快捷回复

  • 评论框内容实时保存草稿，刷新不会丢失

  • 支持 Katex 公式

  • 支持邮件提醒（访客和博主）

  • 支持自定义“博主” 标识文字

  • 内嵌式管理面板，通过密码登录，可以方便地查看评论、隐藏评论、删除评论、修改配置

  • 支持隐藏管理入口，通过输入暗号显示

  • 支持按语言的代码高亮

官方部署文档-Twikoo 文档-快速上手

Twikoo 分为云函数和前端两部分，部署时请注意保持二者版本一致。

  • 云函数部署有 4 种方式，一键部署、手动部署、命令行部署和 Vercel 部署。

  • 前端部署有 2 种方式，如果您的网站主题支持 Twikoo，您只需在配置文件中指定 Twikoo 即可；如果您的网站主题不支持 Twikoo，您需要修改源码手动引入 Twikoo 的 js 文件并初始化。

云函数部署
部署方式 描述
一键部署 [ 不建议 ] 虽然方便，但是仅支持按量计费环境——也就是说，一键部署的环境，当免费资源用尽后，将会产生费用。且按量计费环境无法切换为包年包月环境。免费额度数据库读操作数只有 500 次 / 天，无法支撑 Twikoo 的运行需求。
手动部署 [ 建议 ] 手动部署到腾讯云云开发环境，在中国大陆访问速度较快。由于基础版 1 已从 0 元涨价至 6.9 元 / 月，需要付费购买环境才能部署。
命令行部署 [ 不建议 ] 仅针对有 Node.js 经验的开发者。
Vercel 部署 [ 建议 ] 适用于想要免费部署的用户，在中国大陆访问速度较慢。
Vercel部署

查看官方视频教程

  1. 申请 MongoDB 账号

  2. 创建免费 MongoDB 数据库，区域推荐选择 AWS / N. Virginia (us-east-1)

  3. 在 Clusters 页面点击 CONNECT，按步骤设置允许所有 IP 地址的连接，创建数据库用户，并记录数据库连接字符串，请将连接字符串中的 <password> 修改为数据库密码

  4. 申请 Vercel 账号

  5. Twikoo 一键部署到 Vercel

  6. 进入 Settings - Environment Variables，添加环境变量 MONGODB_URI，值为第 3 步的数据库连接字符串

  7. 进入 Deployments , 然后在任意一项后面点击更多（三个点） , 然后点击 Redeploy , 最后点击下面的 Redeploy

  8. 进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到 “Twikoo 云函数运行正常” 的提示

  9. Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app ）即为您的环境 id，如我的 https://twikoo-lemon-theta.vercel.app/

前端部署

Hexo Butterfly 主题已经支持 Twikoo 评论系统了，我们只需在 _config.butterfly.yml 文件中配置一下就可以了。

请参考Butterfly 安裝文檔(四) 主題配置-2进行配置。

由于之前我们已经有 Valine 评论了，因此我们能够开启双评论了。

配置 _config.butterfly.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
# Comments System
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
  use: Twikoo,Valine # Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: true # Display comment count in post's top_img
  card_post_count: true # Display comment count in Home Page

配置 _config.butterfly.yml 文件，环境 ID(envId) 为前面的 Vercel Domains（如 https://twikoo-lemon-theta.vercel.app/），开启 visitor 后，文章页的访问人数将改为 Twikoo 提供，而不是 不蒜子。

1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo-lemon-theta.vercel.app/
  region:
  visitor: true #false
  option:
效果

开通POP3/SMTP服务

以 QQ 邮箱为例，登录 QQ 邮箱 > 设置 > 账号 > POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务，开启 POP3/SMTP 服务

需要用 QQ 绑定的手机发送短信，获得授权码（需要留存，后面要用 ）。

进入你的博客的评论区，点击右下角的设置按钮，注册账号并登录，你就可以配置你的评论区了。

点击配置管理，进行常规配置，点击保存。

1
2
3
4
5
6
通用

BLOGGER_NICK：博主的昵称。
BLOGGER_EMAIL：博主的邮箱地址，用于邮件通知、博主标识。
MASTER_TAG：博主标识自定义文字，默认为 “博主”。
HIDE_ADMIN_CRYPT：隐藏管理面板入口。可设置一个“暗号”，只有在“昵称”一栏输入相同的“暗号”时，管理面板入口才会显示，留空则不隐藏管理入口

效果如下，只有在昵称输入暗号才能显示管理面板入口。

配置邮件通知服务

配置管理 > 邮件通知

1
2
3
4
5
6
7
SENDER_EMAIL: <你的QQ邮箱地址>
SMTP_SERVICE: <你的邮件服务提供商>
SMTP_HOST: <自定义 SMTP 服务器地址>
SMTP_PORT: <自定义 SMTP 端口>
SMTP_SECURE: <自定义 SMTP 是否使用 TLS>
SMTP_USER: <邮件通知邮箱用户名>(需与SENDER_EMAIL一致)
SMTP_PASS: <邮件通知邮箱密码>(授权码)

拉到最下方点击保存后，打开邮件通知测试，输入你的邮箱，点击发送测试邮件，如果能成功收到邮件即说明邮件通知服务设置成功！

然后用其他的 QQ 在你的博客的评论区评论，你会收到邮件通知。

按语言的代码高亮

Twikoo 管理面板 > 插件，如下图设置，点击保存。

在评论框输入下面代码（按 Markdown 格式)，这里加了括号是为了防止转义，因为这篇博文是使用 Markdown 写的。

1
2
3
4
5
6
7
8
9
10
11
12
(```)html
<script>
    // Just a lil’ script to show off that inline JS gets highlighted
    window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="assets/vendor/prefixfree.min.js"></script>
(```)

效果

显示用户系统、浏览器和用户IP到省

Twikoo 管理面板 > 隐私，如下图设置，点击保存。

设置前

设置后(需要新添一个评论，刷新评论系统)

引用站内文章

Hexo 官方文档-引用文章

1
{% post_link filename [title] [escape] %}

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

例如，在文章中使用 {% post_link how-to-bake-a-cake %} 时，只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。

默认链接文字是文章的标题，你也可以自定义要显示的文本。

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用 escape 选项，禁止对特殊字符进行转义。

1
2
3
4
5
6
7
{% post_link 00013-C-11新特性初探-ubuntu %}

{% post_link 00013-C-11新特性初探-ubuntu 'C++11 新特性' %}

{% post_link 00013-C-11新特性初探-ubuntu '<b> C++11 </b> 新特性' %}

{% post_link 00013-C-11新特性初探-ubuntu '<b> C++11 </b> 新特性' false %}
效果
00013-C++11新特性初探-ubuntu
C++11 新特性
<b> C++11 </b> 新特性
C++11 新特性

信笺样式留言板

原作者的教程：信笺样式留言板

  1. 安装插件
1
npm install hexo-butterfly-envelope --save
  1. 在 _config.butterfly.yml 文件添加配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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: Message #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true
    top_img: https://cos.luyf-lemon-love.space/images/20220511162303.png

path: 是你留言板所在的目录，如我的为 blog/source/Message/index.md，因此我填写 Message。

下图是原作者关于这个问题的回答。

效果

代码框展开/关闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码

  • true 全部代码框不展开，需点击 > 打开

  • false 代码框展开，有 > 点击按钮

  • none 不显示 > 按钮

修改 _config.butterfly.yml 文件

1
highlight_shrink: true #代码框不展开，需点击 '>' 打开

添加白天夜间模式转换动画

原作者的教程：添加白天夜间模式转换动画

注：原作者很优秀，还有很多魔改内容，相信会让你满意，可以多多访问他的博客来支持他的创作。原作者的博客地址：Akilarの糖果屋

  1. 新建 blog/themes/butterfly/layout/includes/custom/sun_moon.pug 文件（如果没有路径中的 custom 目录，请新建 custom 目录），粘贴下面代码。
1
2
3
4
5
6
7
8
9
svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
  symbol#icon-sun(viewBox='0 0 1024 1024')
    path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
    path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
    path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
    path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
  symbol#icon-moon(viewBox='0 0 1024 1024')
    path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
    path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')
  1. 新建 blog/themes/butterfly/source/css/_layout/sun_moon.styl 文件，粘贴下面代码
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
63
64
65
66
67
68
69
70
71
.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(#feb8b0, #fef9db)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(#4c3f6d, #6c62bb, #93b1ed)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  &:after
    position absolute
    left 35%
    top 40%
    width 9.375rem
    height 9.375rem
    border-radius 50%
    content ''
    background linear-gradient(#fefefe, #fffbe8)

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
.icon-V
  padding 5px
  1. 新建 blog/themes/butterfly/source/js/sun_moon.js 文件，粘贴下面代码
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
function switchNightMode() {
  document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'),
    setTimeout(function() {
      document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
        setTimeout(function() {
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
          setTimeout(function() {
            document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
          }, 1e3);
        }, 2e3)
    })
  const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  if (nowMode === 'light') {
    activateDarkMode()
    saveToLocal.set('theme', 'dark', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
  } else {
    activateLightMode()
    saveToLocal.set('theme', 'light', 2)
    document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
  }
  // handle some cases
  typeof utterancesTheme === 'function' && utterancesTheme()
  typeof FB === 'object' && window.loadFBComment()
  window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}
  1. 修改 blog/themes/butterfly/layout/includes/head.pug 文件，在文件末添加一行代码：
1
2
3
4
5
6
7
8
9
10
  //- global config
  !=partial('includes/head/config', {}, {cache: true})

  include ./head/config_site.pug
  include ./head/noscript.pug

  !=fragment_cache('injectHeadJs', function(){return inject_head_js()})

  !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+ include ./custom/sun_moon.pug
  1. 修改 blog/themes/butterfly/layout/includes/rightside.pug 文件，替换原本的昼夜切换（注：每一行代码都比上一行往里缩进两个 space bar）
1
2
3
4
5
6
7
8
9
10
  when 'translate'
    if translate.enable
      button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
  when 'darkmode'
    if darkmode.enable && darkmode.button
-     button#darkmode(type="button" title=_p('rightside.night_mode_title'))
-       i.fas.fa-adjust
+     a.icon-V.hidden(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
+       svg(width='25', height='25', viewBox='0 0 1024 1024')
+         use#modeicon(xlink:href='#icon-moon')

如下图

  1. 在 _config.butterfly.yml 文件中的 inject 的 bottom 处添加
1
- <script src="/js/sun_moon.js" async></script>
效果

给博客添加个性化名片

原作者的教程：给博客添加个性名片

注：原作者很优秀，还有很多魔改内容，相信会让你满意，可以多多访问他的博客来支持他的创作。原作者的博客地址：Akilarの糖果屋

  1. 新建 blog/themes/butterfly/layout/includes/custom/businesscard.pug 文件，粘贴下面代码
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
.business-center
  .business-card
    .business-flip
      .business-front
        .business-strip-bottom
        .business-strip-top
        img.business-logo(width="80" height="80" src=url_for(theme.businesscard.QR_code) alt="cardcode")

        .business-Invitation Invitation
        .business-chip
          .business-chip-line
          .business-chip-line
          .business-chip-line
          .business-chip-line
          .business-chip-main

        svg.business-wave(viewBox="0 3.71 26.959 38.787" width="26.959" height="38.787" fill="white")
          path(d="M19.709 3.719c.266.043.5.187.656.406 4.125 5.207 6.594 11.781 6.594 18.938 0 7.156-2.469 13.73-6.594 18.937-.195.336-.57.531-.957.492a.9946.9946 0 0 1-.851-.66c-.129-.367-.035-.777.246-1.051 3.855-4.867 6.156-11.023 6.156-17.718 0-6.696-2.301-12.852-6.156-17.719-.262-.317-.301-.762-.102-1.121.204-.36.602-.559 1.008-.504z")
          path(d="M13.74 7.563c.231.039.442.164.594.343 3.508 4.059 5.625 9.371 5.625 15.157 0 5.785-2.113 11.097-5.625 15.156-.363.422-1 .472-1.422.109-.422-.363-.472-1-.109-1.422 3.211-3.711 5.156-8.551 5.156-13.843 0-5.293-1.949-10.133-5.156-13.844-.27-.309-.324-.75-.141-1.114.188-.367.578-.582.985-.542h.093z")
          path(d="M7.584 11.438c.227.031.438.144.594.312 2.953 2.863 4.781 6.875 4.781 11.313 0 4.433-1.828 8.449-4.781 11.312-.398.387-1.035.383-1.422-.016-.387-.398-.383-1.035.016-1.421 2.582-2.504 4.187-5.993 4.187-9.875 0-3.883-1.605-7.372-4.187-9.875-.321-.282-.426-.739-.266-1.133.164-.395.559-.641.984-.617h.094zM1.178 15.531c.121.02.238.063.344.125 2.633 1.414 4.437 4.215 4.437 7.407 0 3.195-1.797 5.996-4.437 7.406-.492.258-1.102.07-1.36-.422-.257-.492-.07-1.102.422-1.359 2.012-1.075 3.375-3.176 3.375-5.625 0-2.446-1.371-4.551-3.375-5.625-.441-.204-.676-.692-.551-1.165.122-.468.567-.785 1.051-.742h.094z")

        .business-card-number
          .business-section=theme.businesscard.master

          .business-section=theme.businesscard.group

        .business-end
          span.business-end-text created:
          span.business-end-date=theme.businesscard.created

        .business-card-holder!=`${theme.businesscard.front}`
        .business-master
          .business-circle.business-master-red
          .business-circle.business-master-yellow    
      .business-back
        .business-strip-black
        .business-ccv
          label!=`${theme.businesscard.back1}`
          div!=`${theme.businesscard.back2}`
        .business-terms
          p!=`${theme.businesscard.back3}`
          p!=`${theme.businesscard.back4}`
  1. 新建 blog/themes/butterfly/source/css/_layout/businesscard.styl 文件，粘贴下面代码
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
//媒体选择，屏幕过窄则隐藏，需要则取消注释
// @media screen and (max-width: 450px)
//  .business-center
//  display: none!important
.business-center
  position: relative
  margin: 20px auto
  display: block
  left: calc(50% - 200px)

.business-card
  width: 400px
  height: 250px

@keyframes business-flip
  0%
  100%
    transform: rotateY(0deg)
  50%
    transform: rotateY(180deg)

.business-flip
  width: inherit
  height: inherit
  transition: 0.7s
  transform-style: preserve-3d
  animation: business-flip 2.5s ease

.business-front
.business-back
  position: absolute
  width: inherit
  height: inherit
  border-radius: 15px
  color: #fff
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
  box-shadow: 0 1px 10px 1px rgba(0,0,0,0.3)
  backface-visibility: hidden
  background-image: linear-gradient(to right, #111, #555)
  overflow: hidden

.business-front
  transform: translateZ(0)

.business-strip-bottom
.business-strip-top
  position: absolute
  right: 0
  height: inherit
  background-image: linear-gradient(to bottom, #ff6767, #ff4545)
  box-shadow: 0 0 10px 0px rgba(0,0,0,0.5)

.business-strip-bottom
  width: 200px
  transform: skewX(-15deg) translateX(50px)

.business-strip-top
  width: 180px
  transform: skewX(20deg) translateX(50px)

.business-logo
  position: absolute
  top: 30px
  right: 25px

.business-Invitation
  position: relative
  top: 20px
  left: 25px
  text-transform: uppercase

.business-chip
  position: relative
  top: 30px
  left: 25px
  display: flex
  align-items: center
  justify-content: center
  width: 50px
  height: 40px
  border-radius: 5px
  background-image: linear-gradient(to bottom left, #ffecc7, #d0b978)
  overflow: hidden

  .business-chip-line
    position: absolute
    width: 100%
    height: 1px
    background-color: #333

    &:nth-child(1)
      top: 13px

    &:nth-child(2)
      top: 20px

    &:nth-child(3)
      top: 28px

    &:nth-child(4)
      left: 25px
      width: 1px
      height: 50px

  .business-chip-main
    width: 20px
    height: 25px
    border: 1px solid #333
    border-radius: 3px
    background-image: linear-gradient(to bottom left, #efdbab, #e1cb94)
    z-index: 1

.business-wave
  position: relative
  top: -10px
  left: 100px

.business-card-number
  position: relative
  display: flex
  justify-content: space-between
  align-items: center
  margin: 0px 25px 0px
  font-size: 23px
  font-family: 'cc font', monospace

.business-end
  margin-left: 25px
  text-transform: uppercase
  font-family: 'cc font', monospace

  .business-end-text
    font-size: 9px
    color: rgba(255, 255, 255, 0.8)

.business-card-holder
  margin: 5px 25px
  font-size: 14px
  text-transform: uppercase
  font-family: 'cc font', monospace

.business-master
  position: absolute
  right: 20px
  bottom: 20px
  display: flex

  .business-circle
    width: 25px
    height: 25px
    border-radius: 50%

  .business-master-red
    background-color: #eb001b
  .business-master-yellow
    margin-left: -10px
    background-color: rgba(255, 209, 0, 0.7)

.business-card
  perspective: 1000

  &:hover .business-flip
    transform: rotateY(180deg)

.business-back
  transform: rotateY(180deg) translateZ(0)
  background: #9e9e9e

.business-back
  .business-strip-black
    position: absolute
    top: 30px
    left: 0
    width: 100%
    height: 50px
    background: black

  .business-ccv
    position: absolute
    top: 110px
    left: 0
    right: 0
    height: 36px
    width: 90%
    padding: 10px
    margin: 0 auto
    border-radius: 5px
    text-align: right
    letter-spacing: 1px
    color: #000
    background: white

    label
      display: block
      margin: -30px 0 5px
      font-size: 10px
      text-transform: uppercase
      color: white
    div
      position: relative
      top: -5px
  .business-terms
    position: absolute
    top: 130px
    padding: 20px
    font-size: 10px
    text-align: justify

@font-face
  font-family: 'cc font'
  src: url("data:application/font-woff2;charset=utf-8;base64,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") format("woff2")
  font-weight: normal
  font-style: normal
  1. 修改 blog/themes/butterfly/layout/post.pug 文件
1
2
3
4
5
6
7
8
9
10
11
  extends includes/layout.pug

  block content
    #post
      if top_img === false
        include includes/header/post-info.pug
      article#article-container.post-content!=page.content
+     if page.businesscard ? page.businesscard : theme.businesscard.enable
+       include includes/custom/businesscard.pug
      include includes/post/post-copyright.pug
      .tag_share

如下图

  1. 在 _config.butterfly.yml 文件中添加如下配置
1
2
3
4
5
6
7
8
9
10
11
businesscard:
  enable: true #总开关
  QR_code: https://cos.luyf-lemon-love.space/images/20220606142536.png #加群二维码
  master: DNF #群主ID
  group: 千万别在森林里迷路！ #QQ群号
  created: 06/19/2008 #建群时间
  front: 欢迎来到阿拉德！ #卡面正面描述语
  back1: 年华一去不复返，是非成败转头空。 ——似水流年 #背面从上到下四行文字内容自定义
  back2: 故国空余恨，旧王泪无痕。 ——空城泪-旧王愁
  back3: 月光色，女子香。泪断剑，情多长。望明月，心悲凉。千古恨，轮回尝。 ——月之光芒
  back4: 江天一色无纤尘，皎皎空中孤月轮。 ——月影霜岚
效果

Twikoo评论块气泡风格魔改美化

原作者的教程：twikoo评论块气泡风格魔改美化

注：原作者很优秀，还有很多魔改内容，相信会让你满意，可以多多访问他的博客来支持他的创作。原作者的博客地址：Akilarの糖果屋

  1. 新建 blog/themes/butterfly/source/css/custom/twikoo_beautify.css 文件（如果没有路径中的 custom 目录，请新建），粘贴下面代码
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
/* 自定义twikoo评论输入框高度 */
.tk-input[data-v-619b4c52] .el-textarea__inner {
  height: 130px !important;
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input[data-v-619b4c52] .el-textarea__inner:focus {
  background-image: none !important;
}
/* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
.tk-replies {
  left: -70px;
  width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.tk-replies .tk-avatar img {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
/* 回复框左移，避免窄屏时出框 */
.tk-comments-container .tk-submit {
  position: relative;
  left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
  background: #00a6ff; /*默认模式访客气泡配色*/
  padding: 10px;
  color: #fff; /*默认模式访客气泡字体配色*/
  border-radius: 10px;
  font-size: 16px !important;
  width: fit-content;
  max-width: 100%;
  position: relative !important;
  overflow: visible !important;
  max-height: none !important;
}
/* 修复图片出框 */
.tk-content img {
  max-width: 100% !important;
}
/* 修复过长文本出框 */
.tk-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tk-content a {
  color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-master .tk-content {
  background: #ff8080; /*默认模式博主气泡配色*/
  color: #fff; /*默认模式博主气泡字体配色*/
  width: fit-content;
  max-width: 100%;
}
.tk-master .tk-content a {
  color: #eeecaa;
}
.tk-master .tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-row[data-v-d82ce9a0] {
  max-width: 100%;
  width: fit-content;
}
.tk-avatar {
  border-radius: 50%;
  margin-top: 10px;
}

/* 夜间模式配色，具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
  border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #000;
  border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
  /* 设置宽度上限，避免挤压博主头像 */
  .tk-content {
    max-width: 75%;
    width: fit-content;
  }
  .tk-master .tk-content {
    width: 75%;
  }
  .tk-master .tk-content::before {
    left: 100%;
    border-left: 15px solid #ff8080;
    border-right: 0px solid transparent;
  }
  .tk-master .tk-avatar {
    position: relative;
    left: calc(75% + 70px);
  }
  .tk-master .tk-row[data-v-d82ce9a0] {
    position: relative;
    top: 0px;
    left: calc(75% - 230px);
  }
  [data-theme="dark"] .tk-master .tk-content::before {
    border-left: 15px solid #000;
    border-right: 0px solid transparent;
  }
}
/* 设备名称常态隐藏，悬停评论时显示 */
.tk-extras {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
  -webkit-animation: tk-extras-fadeIn 0.5s linear;
  -moz-animation: tk-extras-fadeIn 0.5s linear;
  -o-animation: tk-extras-fadeIn 0.5s linear;
  -ms-animation: tk-extras-fadeIn 0.5s linear;
  animation: tk-extras-fadeIn 0.5s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
  1. 在 _config.butterfly.yml 文件中的 inject 的 head 处引用样式表
1
- <link rel="stylesheet" href="/css/custom/twikoo_beautify.css"  media="defer" onload="this.media='all'">
修改前

修改后

Butterfly comment board beautify

原作者的教程：Butterfly comment board beautify

注：原作者很优秀，还有很多魔改内容，相信会让你满意，可以多多访问他的博客来支持他的创作。原作者的博客地址：Akilarの糖果屋

  1. 新建 blog/themes/butterfly/source/css/custom/fixed_comment.css 文件，粘贴下面代码
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
div#post-comment.fixedcomment {
    position: fixed;
    top: 0;
    width: 60%;
    right: 0;
    padding: 25px 30px 20px 20px;
    height: 100vh;
    overflow: scroll;
    z-index: 90;
    background: rgba(222, 222, 222, 0.95);
    box-shadow:3px 2px 14px #464340;
    animation: fixedright 0.5s linear;
}
div#post-comment.fixedcomment::-webkit-scrollbar {
width: 0;
}
div#quit-board{
  display: none;
}
div#quit-board.fixedcomment {
  position: fixed;
  display:block!important;
  left: 0;
  top: 0;
  width: 40%;
  height: 100vh;
  z-index: 89!important;
  background: rgba(25,25,25,0.3);
  filter: blur(4px) !important;
  animation: fixedleft 0.5s linear;
}
/*手机端样式适配*/
@media screen and (max-width: 768px) {
  div#post-comment.fixedcomment {
      width: 90%;
      right: 0;
  }
  div#quit-board.fixedcomment {
    width: 10%;
  }
}
/*动画效果*/
@keyframes fixedright {
  from {right:-50%;}
  to {right:0;}
}
@keyframes fixedleft {
  from {left:-50%;}
  to {left:0;}
}
/* 夜间模式匹配 */
[data-theme="dark"]
  div#post-comment.fixedcomment {
      background: rgba(35, 35, 35, 0.95);
      box-shadow:3px 2px 12px #90a1a4;
  }
[data-theme="dark"]
  div#quit-board.fixedcomment {
    background: rgba(147, 146, 128, 0.3);
  }
  1. 新建 blog/themes/butterfly/source/js/custom/fixed_comment.js 文件（如果没有路径中的 custom 目录，请新建），粘贴下面代码
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
//移除FixedComment类，保持原生样式，确保不与最新评论跳转冲突
function RemoveFixedComment() {
  var activedItems = document.querySelectorAll('.fixedcomment');
  if (activedItems) {
    for (i = 0; i < activedItems.length; i++) {
      activedItems[i].classList.remove('fixedcomment');
    }
  }
}
//给post-comment添加fixedcomment类
function AddFixedComment(){
  var commentBoard = document.getElementById('post-comment');
  var quitBoard = document.getElementById('quit-board');
  commentBoard.classList.add('fixedcomment');
  quitBoard.classList.add('fixedcomment');
}
//创建一个蒙版，作为退出键使用
function CreateQuitBoard(){
  var quitBoard = `<div id="quit-board" onclick="RemoveFixedComment()"></div>`
  var commentBoard = document.getElementById('post-comment');
  commentBoard.insertAdjacentHTML("beforebegin",quitBoard)
}

function FixedCommentBtn(){
  //第一步，判断当前是否存在FixedComment类，存在则移除，不存在则添加
  // 获取评论区对象
  var commentBoard = document.getElementById('post-comment');
  // 若评论区存在
  if (commentBoard) {
      // 判断是否存在fixedcomment类
      if (commentBoard.className.indexOf('fixedcomment') > -1){
        // 存在则移除
        RemoveFixedComment();
      }
      else{
        // 不存在则添加
        CreateQuitBoard();
        AddFixedComment();
      }
  }
  // 若不存在评论区则跳转至留言板(留言板路径记得改为自己的)
  else{
    // 判断是否开启了pjax，尽量不破坏全局吸底音乐刷新
      if (pjax){
        pjax.loadUrl("/comments/#post-comment");
      }
      else{
        window.location.href = "/comments/#post-comment";
      }
  }
}
//切换页面先初始化一遍，确保开始时是原生状态。所以要加pjax重载。
RemoveFixedComment();
  1. 在 _config.butterfly.yml 的 inject 处引入上面的 css 和 js
1
2
3
4
5
  inject:
    head:
+     - <link rel="stylesheet" href="/css/custom/fixed_comment.css"  media="defer" onload="this.media='all'">
    bottom:
+     - <script data-pjax defer src="/js/custom/fixed_comment.js"></script>
  1. 修改 blog/themes/butterfly/layout/includes/rightside.pug 文件
1
2
3
  if commentsJsLoad
-   a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+   button#to_comment(type="button" title=_p("rightside.scroll_to_comment") onclick="FixedCommentBtn();")
请按右下角的直达评论按钮

效果

腾讯云备案

由于我是从腾讯云上买的域名和轻量应用服务器，所以可以从腾讯云上免费备案。关于如何购买域名和购买配置使用轻量应用服务器可以参考之前博文 00004-Hexo快速搭建一个博客-ubuntu

如果您使用中国大陆境内的服务器开办网站，则必须先办理网站备案，备案成功并获取通信管理局下发的 ICP 备案号后才能开通访问。

腾讯云官方备案教程：如何快速备案您的网站

备案可以使用微信小程序，个人博客备案比较简单，只需要身份证。

从 5 月 25 日晚在小程序上提交备案到 6 月 6 日下午备案成功，一共花了 12 天。

注：前两天，腾讯云客服会和你进行电话沟通你之前提交信息的问题。然后就是管局审核。细节问题都会短信或者电话通知。服务态度都特别好。

备案成功后 工业和信息化部（早一点） 和 腾讯云 都会给你发短信和电子邮件通知你。

在备案成功后，也请您按照管局要求将网站备案号展示在网站首页底部，并链接到工信部首页。

修改 _config.butterfly.yml 文件的页脚设置

1
2
3
4
5
6
7
8
9
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2022
  custom_text: 
    - <a href="https://beian.miit.gov.cn"><span>冀ICP备2022012632号-1</span></a><br/><span>感谢光临小破站，欢迎您提出宝贵的意见！</span>
  copyright: true # Copyright of theme and framework

由于用 普通的页脚养鱼会遮挡住 备案/许可证编号，所以我们将 页脚养鱼设置为 页脚彩色养鱼

修改 _config.butterfly.yml 文件的 inject 的 bottom 处

1
2
+ - <script defer src="/js/colorfishes.js"></script> # 页脚养鱼(彩色)    
- - <script defer src="/js/fishes.js"></script>

由于 页脚彩色养鱼 在页脚底部会有很大的空白，因此可以在页脚添加背景图片。

修改 _config.butterfly.yml 文件

1
2
# Footer Background
footer_bg: https://cos.luyf-lemon-love.space/images/20220607151451.png #false

在 blog/themes/butterfly/source/css/_custom 目录中创建 myCreate.css 文件，_custom 目录的作用请看 00004-Hexo快速搭建一个博客-ubuntu 的 Hexo 异步加载方案，粘贴下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 页脚半透明 */
#footer {
    background: rgba(255, 255, 255, 0);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
    background: rgba(255,255,255,0)
}

#footer #footer-wrap {
    color: var(--font-color);
}

#footer #footer-wrap a {
    color: var(--font-color);
}
效果

建立分站-绑定域名（Github-Vercel-轻量应用服务器）

前言：阿里云的免费 DNS 解析套餐 线路类型支持境外，可以做到境外访问的是 Github 的服务器，境内访问的是自己的轻量应用服务器，但是腾讯云的免费 DNS 解析套餐不支持境外线路类型，因此无法做到自动分流，我们只能在顶部的菜单栏建立分站，来使得用户可以选择不同线路类型来加速访问。

腾讯云域名绑定到Github上
  1. 然后进入腾讯云 DNS 解析控制台，点击你的域名的解析按钮，点击 前往 DNSPod 控制台，点击添加记录按钮，如图

1
主机记录：填写子域名。例如，添加 www.123.com 的解析，您在 “主机记录” 处选择 “www” 即可。如果只是想添加 123.com 的解析，您在 “主机记录” 处选择 “@” 即可。“@” 的 CNAME 会影响到 MX 记录的正常解析，添加时请您慎重考虑。
记录类型 使用目的
A 记录 将域名指向一个 IP 地址（外网地址）。
CNAME 记录 将域名指向另一个域名，再由另一个域名提供 IP 地址（外网地址）。
MX 记录 设置邮箱，让邮箱能收到邮件。
NS 记录 将子域名交给其他 DNS 服务商解析。
AAAA 记录 将域名指向一个 IPv6 地址。
SRV 记录 用来标识某台服务器使用了某个服务，常见于微软系统的目录管理。
TXT 记录 对域名进行标识和说明，绝大多数的 TXT 记录是用来做 SPF 记录（反垃圾邮件）。
隐、显性 URL 记录 将一个域名指向另外一个已经存在的站点。
  1. 为了使访客用不用 www 都可以访问博客，我们添加两条记录，注意：我们选择 CNAME 记录类型，记录值填写 你的 Github 用户名.github.io，如图（下面的第二张图是 DNSPod 控制台的这一节配置完成的最终图，本步添加的记录仅有第一张图的两条 Github 记录）

  1. 进入你的 Github 博客所在仓库的设置页面，点击 Pages，在 Custom domain 处修改域名为你之前买的域名，并勾选 Enforce HTTPS，然后点击 Save。如图

  1. 在 blog/source 目录下新建一个 CNAME 文件，填入你的域名。
1
luyf-lemon-love.space
  1. 然后一键三连，过不了多久，再打开你的浏览器，输入你自己的域名如 https://luyf-lemon-love.space/，就可以看到搭建的网站啦！
1
2
3
hexo clean
hexo g
hexo d
  1. 在 DNSPod 控制台，你可以点击下图的 @ 记录的 SSL 按钮申请免费的 SSL 证书，该证书能让用户以 HTTPS 的方式访问该网站。（由于我已经申请过了，所以按钮是绿色，如果没有申请是灰色，申请过程是傻瓜式操作，10 分钟就可以完成，Github 会自动安装，我们只需要申请就可以了。我们给 @ 记录申请 SSL 证书，www 记录会获得 SSL 证书的）

在 2018 年 5 月 1 日之后，GitHub Pages 已经开始提供免费为自定义域名开启 HTTPS 的功能，并且大大简化了操作的流程（只需勾选 Enforce HTTPS 的选项），现在用户已经不再需要自己提供证书，只需要将自己的域名使用 CNAME 的方式指向自己的 GitHub Pages 域名即可。因此本步不需要做。

腾讯云域名绑定到Vercel上
  1. 登录 Vercel

  1. 进入到部署博客的项目

  1. 点击 Settings > Domains

  1. 添加域名，我一共添加了两个自定义域名，分别为：vercel.luyf-lemon-love.space 和 www.vercel.luyf-lemon-love.space，每一次，点击 add 后，在下方会出现一组解析记录。

  1. 到腾讯云的 DNSPod 控制台，添加解析记录（Vercel 自带 SSL 证书，无需申请）。

  1. 这时你就可以通过二级域名如 https://vercel.luyf-lemon-love.space/ ，访问部署在 Vercel 的博客了。
腾讯云域名绑定到轻量应用服务器上
  1. 到腾讯云的 DNSPod 控制台，添加解析记录到轻量应用服务器，用 A 记录解析 IP 地址的形式。IP 地址是轻量应用服务器的公共 IP 地址。

  1. 在 DNSPod 控制台，你可以点击下图的 server 记录的 SSL 按钮申请免费的 SSL 证书，该证书能让用户以 HTTPS 的方式访问该网站。（由于我已经申请过了，所以按钮是绿色，如果没有申请是灰色，申请过程是傻瓜式操作，10 分钟就可以完成。轻量应用服务器与 Github 不同，需要手动安装，后续步骤讲解安装方法。我们给 server 记录申请 SSL 证书，www.server 记录会获得 SSL 证书的），注意申请 SSL 证书时请将其他解析记录都暂停解析，也就是上面配置的 Github 和 Vercel 的四条解析记录，否则证书不会颁发。颁发失败的证书也会消耗配额，只能重新申请，重新申请相当于重新购买会另外消耗配额，按照官方的文档，同一主域在 15 个月内至多只能申请 20 张亚洲诚信品牌免费型 DV 版 SSL 证书。请小心申请，以免浪费配额。

  1. 域名绑定到轻量应用服务器必须使用 SSL 证书，因此我们需要手动安装 SSL 证书。由于我的轻量应用服务器是宝塔面板，因此可以参考官方配置文档 宝塔面板 SSL 证书安装部署

  2. 请在 SSL 证书管理控制台 中选择您需要安装的证书并单击下载。

  1. 在弹出的 “证书下载” 窗口中，服务器类型选择 Nginx，单击下载并解压缩 server.luyf-lemon-love.space 证书文件包（server.luyf-lemon-love.space_nginx.zip）到本地目录。解压缩后，可获得相关类型的证书文件。

    文件夹名称：server.luyf-lemon-love.space_nginx

    文件夹内容：

    server.luyf-lemon-love.space_bundle.crt 证书文件

server.luyf-lemon-love.space_bundle.pem 证书文件

server.luyf-lemon-love.space.key 私钥文件

server.luyf-lemon-love.space.csr CSR 文件

CSR 文件是申请证书时由您上传或系统在线生成的，提供给 CA 机构。安装时可忽略该文件。

  1. 登录宝塔 Web 面板，单击网站，即可进入 “网站管理” 页面。

  2. 在 “网站管理” 页面中选择您需要配置 SSL 证书的域名对应的站点并单击设置。

  3. 在弹出的“ 站点修改” 窗口中，依次单击 SSL > 其他证书，填写密钥以及证书文件。如下图所示：

  • 密钥（KEY）：使用文本编辑器打开 .key 私钥文件，并复制内容至对应区域

  • 证书（PEM 格式）：使用文本编辑器打开 .crt 证书文件，并复制内容至对应区域。

  1. 单击保存并显示以下信息，即可部署成功。如下图所示：

  1. HTTP 自动跳转 HTTPS 的安全配置（可选），请在弹出的 “站点修改” 窗口，单击开启强制 HTTPS 即可完成配置。如下图所示：

HTTP 跳转 HTTPS 过程中，如果您的网站元素中存在外部链接或者使用的 HTTP 协议，导致整个页面不完全是 HTTPS 协议。部分浏览器会因为这些因素报不安全的提示，例如，链接不安全。您可以单击不安全页面中的 “详细信息” 查看报错原因。

  1. DNSPod 控制台处的最终域名解析记录。一共 6 条。

增加Server页面

Butterfly 主题内置了 Font Awesome V5 图标，目前已更新到 5.13.0，总共有1,588个免费图标。由于是国外的图标网站，对于国内的一些网站 Icon 并不支持。

由于 Gitee 和 Vercel 的图标 Font Awesome V5 并不支持。因此我要像之前 Bilibili 页面一样申请图标。

  1. 注册登录 iconfont，Butterfly 官方文档介绍了 iconfont 申请流程，可以参考该文文档 Butterfly 安装文档(六) 进阶教程-Icon

  2. 添加图标到购物车

  3. 点击购物车，将图标添加进项目，如果没有项目点击下面的按钮，新建一个项目

  4. 点击 Font class 和 View the Online Link

  5. 将显示的链接补全成 css，然后添加到 _config.butterfly.yml 文件的 inject 的 head 处

  6. 可以在 _config.butterfly.yml 文件的 menu 处引用，引用的格式为 iconfont icon名字，如 iconfont icon-bilibili

  7. 修改 _config.butterfly.yml 文件，我们在 menu 处添加了 Server 页面，可以看到 iconfont 图标名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  Server||fas fa-server:
    Github: https://luyf-lemon-love.space || fab fa-github
    Gitee: https://luyf-lemon-love.gitee.io || iconfont icon-gitee
    Vercel: https://vercel.luyf-lemon-love.space || iconfont icon-logo-vercel
    Cloud: https://server.luyf-lemon-love.space || fas fa-cloud
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Image: /Gallery/ || fas fa-images
    Movie: /movies/ || fas fa-video
    ShuoShuo: /artitalk/ || fas fa-comment
    Bilibili: /bilibili/ || iconfont icon-bilibili
  Link: /link/ || fas fa-link
  Message: /Message/ || fas fa-comment
  Domains: /Domains/ || fas fa-gift
  About: /about/ || fas fa-heart
  1. 修改 _config.butterfly.yml 文件
1
2
3
card_announcement:
  enable: true
  content: 本站部署到了几个地方，对应的域名请看顶部的 Domains 页，也可以直接访问 Server 页。
  1. 修改 blog/source/Domains/index.md 文件
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
---
title: Domains
date: 2022-05-13 17:04:06
type: "Domains"
top_img: https://cos.luyf-lemon-love.space/images/20220513171728.png
---

### 自定义域名

#### 解析到 Github 上的域名

https://luyf-lemon-love.space/	> Server > Github Page

https://www.luyf-lemon-love.space/

#### 解析到 Vercel 上的域名

https://vercel.luyf-lemon-love.space/	> Server > Vercel Page 

https://www.vercel.luyf-lemon-love.space/

#### 解析到 轻量应用服务器 上的域名

https://server.luyf-lemon-love.space/	> Server > Cloud Page

https://www.server.luyf-lemon-love.space/

### Github 域名

https://luyf-lemon-love.github.io/

### Vercel 加速域名

https://lu-yf-lemon-love-github-io.vercel.app/

https://lu-yf-lemon-love-github-io-luyf-lemon-love.vercel.app/

https://lu-yf-lemon-love-github-io-git-master-luyf-lemon-love.vercel.app/

### Gitee 域名

https://luyf-lemon-love.gitee.io	> Server > Gitee Page

注：国内最出名的莫过于 iconfont ,功能很强大且图标内容很丰富的矢量图标库。很多 Font Awesome 不支持的图标都可以在这里找到。同时，iconfont 支持选择需要的图标生成 css 链接，减少不必要的 CSS 加载。使用 Font Awesome，博客第一次加载时可能无法加载图标。2022 年 6 月 8 日开始， iconfont 官网维护了 3 日，还没有完成，导致用户没办法使用。因此，我们这次将把 iconfont 下载到本地加载。Butterfly 主题的 Menu 中的 List > Music 和 List > Movie 会自动加载，无需配置图标。尽量不要随意修改 Butterfly 主题的 Menu，可能导致移动端加载 Menu 失败。

  1. 注册登录 iconfont，Butterfly 官方文档介绍了 iconfont 申请流程，可以参考该文文档 Butterfly 安装文档(六) 进阶教程-Icon

  2. 添加图标到购物车

  3. 点击购物车，将图标添加进项目，如果没有项目点击下面的按钮，新建一个项目。项目中的图标为

  1. 点击 Download Code，下载到本地。解压压缩包，里面的文件如图

  1. 将上面的所有文件复制到 blog/themes/butterfly/source/css/iconfont 目录中（路径中的 iconfont 目录如果没有，请创建），然后添加到 _config.butterfly.yml 文件的 inject 的 head 处

1
- <link rel="stylesheet" href="/css/iconfont/iconfont.css">

  1. 可以在 _config.butterfly.yml 文件的 menu 处引用，引用的格式为 iconfont icon名字，如 iconfont icon-bilibili

  2. 修改 _config.butterfly.yml 文件，修改 menu 处的配置（Server 页的域名链接修改在下一小节介绍）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
menu:
  Home: / || iconfont icon-home
  Archives: /archives/ || iconfont icon-archive
  Tags: /tags/ || iconfont icon-tag-color
  Categories: /categories/ || iconfont icon-category
  Life||iconfont icon-list:
    Image: /Gallery/ || iconfont icon-image
    ShuoShuo: /artitalk/ || iconfont icon-comment
    Bilibili: /bilibili/ || iconfont icon-bilibili
  Server||iconfont icon-lx-server:
    Github: https://github.luyf-lemon-love.space || iconfont icon-github
    Gitee: https://luyf-lemon-love.gitee.io || iconfont icon-gitee
    Vercel: https://vercel.luyf-lemon-love.space || iconfont icon-logo-vercel
    Cloud: https://server.luyf-lemon-love.space || iconfont icon-cloud
  Link: /link/ || iconfont icon-link
  Message: /Message/ || iconfont icon-comment1
  Domains: /Domains/ || iconfont icon-domainyuming
  About: /about/ || iconfont icon-set_about_hov
  1. 修改 Message 的 title
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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: Message #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: Message
    comments: true
    top_img: https://cos.luyf-lemon-love.space/images/20220511162303.png

完善博客域名

为了更好的展示博客域名，我们将修改 Github 和 Vercel 的域名解析记录。关于如何修改域名解析记录，请参考第 16 小节——建立分站-绑定域名（Github-Vercel-轻量应用服务器）。

DNSPod 控制台的解析记录如下：

Github Pages 配置如下：

Vercel Domains：

修改 _config.butterfly.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
menu:
  Home: / || iconfont icon-home
  Archives: /archives/ || iconfont icon-archive
  Tags: /tags/ || iconfont icon-tag-color
  Categories: /categories/ || iconfont icon-category
  Life||iconfont icon-list:
    Image: /Gallery/ || iconfont icon-image
    ShuoShuo: /artitalk/ || iconfont icon-comment
    Bilibili: /bilibili/ || iconfont icon-bilibili
  Server||iconfont icon-lx-server:
    Github: https://github.luyf-lemon-love.space || iconfont icon-github
    Gitee: https://luyf-lemon-love.gitee.io || iconfont icon-gitee
    Vercel: https://vercel.luyf-lemon-love.space || iconfont icon-logo-vercel
    Cloud: https://server.luyf-lemon-love.space || iconfont icon-cloud
  Link: /link/ || iconfont icon-link
  Message: /Message/ || iconfont icon-comment1
  Domains: /Domains/ || iconfont icon-domainyuming
  About: /about/ || iconfont icon-set_about_hov

修改 blog/source/Domains/index.md 文件

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
---
title: Domains
date: 2022-05-13 17:04:06
type: "Domains"
top_img: https://cos.luyf-lemon-love.space/images/20220513171728.png
---

### 自定义域名

https://luyf-lemon-love.space/

https://www.luyf-lemon-love.space/

#### 解析到 Github 上的域名

https://github.luyf-lemon-love.space/	> Server > Github Page

#### 解析到 Vercel 上的域名

https://luyf-lemon-love.space/

https://www.luyf-lemon-love.space/

https://www.github.luyf-lemon-love.space/

https://vercel.luyf-lemon-love.space/	> Server > Vercel Page 

https://www.vercel.luyf-lemon-love.space/

#### 解析到 轻量应用服务器 上的域名

https://server.luyf-lemon-love.space/	> Server > Cloud Page

https://www.server.luyf-lemon-love.space/

### Github 域名

https://luyf-lemon-love.github.io/

### Vercel 加速域名

https://lu-yf-lemon-love-github-io.vercel.app/

https://lu-yf-lemon-love-github-io-luyf-lemon-love.vercel.app/

https://lu-yf-lemon-love-github-io-git-master-luyf-lemon-love.vercel.app/

### Gitee 域名

https://luyf-lemon-love.gitee.io	> Server > Gitee Page

公安备案

公安备案是否必须操作？

根据《中华人民共和国计算机信息系统安全保护条例》以及《计算机信息网络国际联网安全保护管理办法》的相关规定，开办网站必须到当地公安机关网安部门办理备案手续，并且在自网络正式联通后的三十日内办理，如果不履行，公安机关会给予警告或者停机整顿不超过六个月的处罚。

如何进行公安备案？

依据《计算机信息网络国际联网安全保护管理办法》相关规定，各网站在工信部备案成功后，需在网站开通之日起30日内登录 全国公安机关互联网站安全管理服务平台 提交公安备案申请。

公安备案审核通过后，您需在30日内登录 全国公安机关互联网站安全管理服务平台，在您的已备案网站详情中，复制网站公安机关备案号，下载备案编号图标，复制备案编号 HTML 代码，并编辑您的网页源代码。

公安备案的流程请参考腾讯云官方文档——公安备案流程

操作步骤

注册与登录

  1. 在 全国公安机关互联网站安全管理服务平台， 单击联网备案登录。

  2. 在 “联网备案登录” 页面，单击注册。若您已有互联网站安全服务平台的账号，请跳过此操作，直接登录。

  3. 根据页面提示填写信息，单击注册，完成互联网站安全服务平台的账号注册。

  4. 返回 “联网备案登录” 页面，输入您注册的账号、密码，以及验证码，单击登录。

填写开办者主体信息
  1. 在弹出的 “系统提示” 窗口中，单击进入。如下图所示，若系统未自动提示，请您单击主页页签，即可提示您填写开办主体信息。

  1. 在 “网站开办主体” 页面，根据实际需求，选择开办主体性质。

  2. 根据页面提示逐步操作。由于我们要为个人博客公安备案，“开办主体性质” 选择为 “个人”：填写 “开办者信息”，单击提交审核。注：地址一定填写要常住地址。

填写新办网站信息
  1. 在左侧导航栏中，单击新办网站申请，进入 “新办网站申请” 页面。如下图所示：

  1. 确认网站开办主体信息无误，单击下一步。

  2. 根据页面提示，填写网站基本信息，并单击下一步。

主要参数 详细信息
网站信息 1. 网站开通日期：首次备案通过日期。您可在 工信部网站 页面输入域名、单位名称或备案号关键字，单击搜索查询审核通过时间。2. 域名证书：腾讯云域名证书获取请参考 证书下载，其它服务商请前往服务商域名管理后台获取。3. 从域名：能访问该网站的其它域名。4. IP：填写您备案云服务器的 IP 地址。
网络接入服务商 若您的网站基于腾讯云云服务之上，办理公安备案的域名是通过腾讯云在工信部备案，腾讯云信息如下：1. 网络接入服务商名称：腾讯云计算（北京）有限责任公司。2. 网络接入商所属区域：北京市市辖区海淀区。3. 网站接入方式：选择租赁虚拟空间。
域名注册服务商 由于我的域名注册服务商是烟台帝思普网络科技有限公司。所以填写内容为，域名注册服务商名称：烟台帝思普网络科技有限公司。域名注册服务商所属区域：山东省烟台市开发区。
服务类型 “是否提供互联网交互服务” 选择为 “否”，“网站服务内容” 选择为 “www服务”
特许经营内容 “是否提供涉及管制物品信息发布服务” 选择为 “否”
网站内容 “是否涉及前置审核内容” 选择 “否”
网站语言 “中文繁体”、“中文简体”、“英语”、“日语”
  1. 根据页面提示，填写网站负责人信息，并单击下一步。由于我们 “开办主体性质” 为 “个人”，可直接勾选同主体负责人后会自动填入。
同意责任书并提交审核

阅读《互联网信息服务单位网络安全责任告知书》，勾选 “我已阅知上述告知事项，保证提交内容真实有效，承诺履行上述网络安全义务。”，单击提交。

网站违规信息处理机制

根据网监部门规定，网站出现违规信息必须删除。如果您解析到腾讯云云服务器上的网站出现违规信息，腾讯云工作人员会立即通知您删除违规信息。如果您无响应，腾讯云将取消您的网站接入。

域名证书下载

域名证书下载的流程请参考腾讯云官方文档——域名证书下载

  1. 登录腾讯云 域名注册控制台，进入 “我的域名” 页面，查看已购买的所有域名信息。

  2. 在待下载域名证书的域名行中，单击更多 > 下载域名证书。如下图所示：

  1. 在弹出的 “域名证书” 窗口中，单击下载证书，选择下载路径，保存证书。如下图所示：

  1. 上传的域名证书大小需要 400KB 以内，可以在这个网站——图片压缩软件在线版免费在线压缩证书图片。可以重复压缩直到满足大小要求。
个人博客一定要关闭评论区

个人博客如果不关闭评论，就属于交互式网站。

服务类型如果选择互联网交互服务，会增加很多审核流程，需要填写很多表格。非交互式备案不需要线下审查流程，交互式备案需要线下审查，比如评论是否人工审核、网站后台是否能查看评论用户 IP 和端口，网站注册是否有手机验证，而且公安备案实际审查是当地公安审查的，因此每个地域也些许不同。

非交互式网站初步审核完成后即完成备案，交互式网站需要进行面审或实地检查，具体时间将以短信告知。

  • 如收到公安机关面审通知，请按照短信通知的时间携带所需证件到公安机关进行材料完整性检验。

  • 如收到公安机关实地审核通知，请按照通知的时间做好准备，配合公安民警进行安全检查。

  • 面审需要用到的所有资料具体需要带哪些由当地公安安排

评论功能关闭有以下好处：

  1. 安全性，避免出现敏感信息。

  2. 减少垃圾内容，因为垃圾评论很多。

  3. 避免无关评论，防止评论区有广告。

可以看见添加评论区，对于公安备案会很麻烦，而且评论区也对个人博客来说是一个不稳定因素。因此一定要关闭评论，选择互联网非交互服务，进行公安备案。

主域名和从域名

主域名：luyf-lemon-love.space

从域名：github.luyf-lemon-love.space，server.luyf-lemon-love.space，vercel.luyf-lemon-love.space

下载备案号码，附在网站底部

在完成以上审核以后，公安机关将会发放公安部备案号，您需要将备案号放置网站首页下端。

  1. 登录全国公安机关互联网站安全管理服务平台，点击 主页 > 已备案网站 > 网站详情（放大镜按钮）。

  1. 点击 点击下载备案编号图标 下载图标，点击 点击复制备案编号HTML代码 得到HTML代码。

1
2
3
<div style="width:300px;margin:0 auto; padding:20px 0;">
	<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32011502011618" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">苏公网安备 32011502011618号</p></a>
</div>
  1. 但是由于 Butterfly 主题不能直接内嵌上面的 html 代码。因此需要修改成 Butterfly 主题文档——页脚自定义文本里面介绍的形式。
1
custom_text: <a href="icp链接"><img class="icp-icon" src="icp图片"><span>备案号：xxxxxx</span></a>
  1. 修改 _config.butterfly.yml 文件
1
2
3
4
5
6
7
8
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2022
  custom_text: <a href="https://beian.miit.gov.cn"><span>冀ICP备2022012632号-1</span></a><br/><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32011502011618"><img src="https://cos.luyf-lemon-love.space/images/备案图标.png"><span>苏公网安备 32011502011618号</span></a><br/><span>感谢光临小破站，欢迎您提出宝贵的意见！</span>
  copyright: true # Copyright of theme and framework

开启自定义 CDN 加速域名

开启 CDN 加速域名可以省去 COS 下行流量费用，换成价格更便宜的 CDN 下行流量费用和 CDN 回源流量费用。自2022年5月9日起，对象存储（Cloud Object Storage，COS）服务将不再支持新增默认 CDN 加速域名。因此只能开启自定义 CDN 加速域名，但是如果域名接入国内 CDN，是需要备案的。

内容分发网络（Content Delivery Network，CDN），是在现有 Internet 中增加的一层新的网络架构，由遍布全球的高性能加速节点构成。这些高性能的服务节点都会按照一定的缓存策略存储您的业务内容，当您的用户向您的某一业务内容发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点快速响应，有效降低用户访问延迟，提升可用性。

CDN 有效地解决了目前互联网业务中网络层面的以下问题：

  • 用户与业务服务器地域间物理距离较远，需要进行多次网络转发，传输延时较高且不稳定。

  • 用户使用运营商与业务服务器所在运营商不同，请求需要运营商之间进行互联转发。

  • 业务服务器网络带宽、处理能力有限，当接收到海量用户请求时，会导致响应速度降低、可用性降低。

当您将文件上传至存储桶后，对象存储（Cloud Object Storage，COS）会自动生成文件链接（文件的 URL），您可以直接通过文件 URL（即 COS 默认域名）访问该文件。若您希望通过自己的域名访问 COS 上的文件，需要将自己的域名绑定至文件所在的存储桶。

您可以根据实际需求，使用对应的域名访问文件。例如您想通过 CDN 加速访问文件，则需要访问由 CDN 加速域名生成的文件链接。

在对自定义 CDN 加速域名开启了 CDN 加速的情况下，如果源站为公有读存储桶，那么系统会默认用户可以直接通过自定义 CDN 加速域名访问到源站中的对象。如果源站为私有读存储桶，则建议用户开启 CDN 回源鉴权和 CDN 鉴权配置两个选项。

  • 回源鉴权（开启前提是已添加 CDN 服务授权）：当用户请求的数据在边缘节点没有命中缓存时，CDN 需要回源获取数据内容。使用 COS 作为源站并开启回源鉴权后，CDN 边缘节点将使用特殊的服务身份（需要通过 CDN 服务授权得到此身份）访问 COS 源站，以实现获取并缓存私有访问存储桶中的数据。

  • CDN 鉴权配置：当用户通过访问边缘节点获取缓存数据时，边缘节点会根据鉴权配置规则，校验访问 URL 中的身份验证字段，以此防范非授权的访问，实现防盗链，提高边缘节点缓存数据的安全性和可靠性。

CDN 鉴权配置和 CDN 回源鉴权的使用情况不冲突，但是两者配置的状态不同对数据的保护效果也不同，具体情况如下表：

存储桶访问权限 是否开启 CDN 回源鉴权 是否开启 CDN 鉴权配置 通过 CDN 加速域名是否可访问源站 通过 COS 源站域名是否可访问源站 适用场景
公有读 关闭 关闭 可访问 可访问 全站公共访问
公有读 开启 关闭 可访问 可访问 不推荐
公有读 关闭 开启 需使用 URL 鉴权 可访问 不推荐
公有读 开启 开启 需使用 URL 鉴权 可访问 不推荐
私有读+CDN 服务授权 开启 开启 需使用 URL 鉴权 需使用 COS 鉴权 全链路保护
私有读+CDN 服务授权 关闭 开启 需使用 URL 鉴权 需使用 COS 鉴权 不推荐
私有读+CDN 服务授权 开启 关闭 可访问 需使用 COS 鉴权 源站保护
私有读+CDN 服务授权 关闭 关闭 不可访问 需使用 COS 鉴权 不推荐
私有读 关闭 开启或关闭 不可访问 需使用 COS 鉴权 无法使用 CDN
  • 用户为域名启用 CDN 加速之后，任何人都可以通过此域名直接访问源站，所以如果您的数据有一定的私密性，请您务必通过鉴权配置来保护您的源站数据。
定价

用户可将其静态资源（包括静态脚本、音视频、图片、附件等文件）全部托管在腾讯云 COS 的标准存储中，并利用无限容量、高频读写的特性，为静态资源提供可扩展和可靠的存储，减轻资源服务器的压力。COS 中的静态资源可接入 CDN 服务，由 CDN 进行全球加速，分发到用户客户端。

COS 作为 CDN 源站时，含两部分计费：CDN 计费（加速）和 COS 计费（回源）。

  • CDN 计费: 当 CDN 进行加速服务，从 CDN 节点获取资源分发到用户客户端时（过程1和过程4），消耗的用量由 CDN 进行计费。

  • COS 计费: 当 CDN 回源，从 COS 源站获取资源（过程2和过程3），消耗的用量由 COS 进行计费。

最终的费用为存储容量费用 + CDN回源流量费用（CDN回源流量包） + CDN下行流量（CDN流量包）+ 请求费用

个人用户每月享受50GB标准存储容量，6个月，详情请参见 免费额度。

COS部分

对象存储（Cloud Object Storage，COS）开启自定义 CDN 加速域名的教程：

  1. 开启自定义 CDN 加速域名

  2. 域名归属权验证

  3. 配置 CNAME

  4. 腾讯云对象存储COS及CDN加速配置

  5. 新用户体验奖励

  6. 防盗链配置

腾讯云 COS 搭建图床的教程请参考 00007-PicGo+腾讯云COS搭建图床-ubuntu

  1. 登录 对象存储控制台 。 在左侧导航栏中，单击存储桶列表，进入存储桶列表页面。

  2. 单击需要配置域名的存储桶，进入存储桶配置页面。

  3. 单击左侧的域名与传输管理 > 自定义 CDN 加速域名配置项，单击添加域名，配置如下选项。若您之前在老版本 COS 控制台使用过“自定义域名”，则在新版控制台不显示“自定义 CDN 加速域名”，仍显示“自定义域名”。

  • 域名：输入待绑定的自定义域名（ 例如 www.example.com ）。请确保输入的域名已备案，并已在 DNS 服务商处设置好对应的 CNAME，详情请参见 CNAME 配置。若您在接入的自定义 CDN 加速域名为以下情况，则需要进行域名归属权验证，详情请查看 域名归属验证 文档。

    • 首次接入该域名

    • 该域名已被其他用户接入

    • 接入域名为泛域名

  • 加速地域：支持中国大陆地域加速、中国香港和海外加速以及全球加速，其中全球加速指支持所有地域之间的存储桶加速。

  • 源站类型：有默认源站和静态网站源站两种，如果您的存储桶开启了静态网站功能即为静态网站源站，否则为默认源站。如果您的自定义加速域名需要用作静态网站，请使用静态网站源站并开启存储桶的静态网站功能。

  • 鉴权：开启回源鉴权。对于私有读存储桶，请开启回源鉴权以保护源站。

  1. 我们选择域名为 cos.luyf-lemon-love.space，加速地域为 中国境内，源站类型为 默认源站，由于我们的 COS 为公有读私有写，因此不开启回源鉴权。

  2. 域名归属权验证，我们选择 DNS解析验证

    • 域名首次接入时，例如：a.example.com；该域名接入后，同级域名及次级域名如 b.example.com 视为已有权限域名，默认可接入，无需校验。但上级域名如 example.com接入仍需校验；

    • 子域名已在其他账号下接入时，需进行域名归属校验验证当前域名归属权，如验证通过，可通过取回域名接入当前账号；

    • 同级泛域名接入时，需校验，例如：a.example.com 已接入，*.example.com 接入时仍需校验，*.a.example.com 属于次级泛域名，可免校验接入。

    1. 在添加域名时，如果该域名需校验，在域名下方会提示需验证域名归属权，单击验证方法；

    1. 验证方法中，默认为 DNS 解析验证。使用 DNS 解析验证的方式，需要您前往该域名的解析服务商，在主域名下添加一个主机记录值为_cdnauth的 TXT 记录。

    1. 进入 DNS 解析 DNSPod 控制台，找到该域名并单击解析，添加一条记录类型为 TXT 的 DNS 记录，主机记录填写为_cdnauth，记录类型选择为 TXT，记录值填写为腾讯云 CDN 提供的记录值，其余选项按照默认参数填写即可。

  3. 点击保存。点击 去 CDN 控制台配置进入 CDN 控制台，点击域名管理。

  1. 配置 CNAME，当您在腾讯云 CDN 内成功完成添加域名后，腾讯云 CDN 会为您的域名分配一个专属的 CNAME 地址，您还需要完成 CNAME 配置，才可以将用户的访问指向腾讯云 CDN 节点，使CDN加速生效。因为 DNS 变更解析到实际生效需要一段时间，期间可能会导致网站暂时不可访问，请您留意变更操作对业务的影响。请注意，CNAME 域名不可以直接作为访问域名使用。

  2. 如果您当前的域名已托管于腾讯云 DNSPod 内，且当前账号有该域名的解析权限，则可以在添加完域名后，使用一键配置完成域名配置。您可后续前往 dnspod 控制台 管理解析记录。

  3. 在域名管理列表内，鼠标悬浮在 CNAME 前的图标上，即可看到相关提示，单击一键配置进入 CNAME 配置界面。

  1. 腾讯云 CDN 将默认为您在 DNSPod 内针对该域名增加一条 CNAME 解析记录值，TTL 默认值为600。如果您的域名内已有一条 CNAME 解析记录值，为了防止 CNAME 解析冲突，将会为您自动删除原有的 CNAME 解析记录并增加一条新的 CNAME 解析记录值。

  1. 在 dnspod 控制台 中，可以看到腾讯云 CDN 默认增加的记录。

  1. 在 dnspod 控制台 中，点击该记录的 SSL 按钮，为该记录申请 SSL 证书。

  2. SSL 证书审核通过后，如下图。点击 一键部署，如下面第二张图配置，完成后点击确定。

  1. 等到 CDN 配置成功。需要一点时间。

  1. 验证，进入存储桶的文件目录，点击任意文件上的详情按钮，选择自定义加速域名。

  1. 复制 对象地址 到浏览器。

  1. 由于 PicGo 之前已经配置过 腾讯云 COS，因此我们也不需要配置密钥，只需要填写自定义域名即可。完成后点击确定即可。

  1. 这时就可以用 自定义 CDN 加速域名 来使用图床了。

  2. 防盗链配置请参看官方文档——防盗链配置

  3. 若您希望对业务资源的访问来源进行控制，腾讯云 CDN 为您提供了 referer 防盗链配置功能。通过对用户 HTTP Request Header 中 referer 字段的值设置访问控制策略，从而限制访问来源，避免恶意用户盗刷。

  4. 登录 CDN 控制台，在菜单栏里选择域名管理，单击域名右侧管理，即可进入域名配置页面，第二栏【访问控制】中可看到防盗链配置，默认情况下，防盗链配置为关闭状态：

  1. 单击开关，选择防盗链类型并填入列表，即可启用防盗链配置：

  • referer 黑名单：

  • 若请求的 referer 字段匹配黑名单内设置的内容，CDN 节点拒绝返回该请求信息，直接返回403状态码。

  • 若请求的 referer 不匹配黑名单内设置的内容，则 CDN 节点正常返回请求信息。

  • 空 referer 选项勾选拒绝空 referer访问 选项时，此时若请求 referer 字段为空或无 referer 字段（如浏览器请求），则 CDN 节点拒绝返回该请求信息，返回403状态码。

  • referer白名单：

  • 若请求的 referer 字段匹配白名单设置的内容，则 CDN 节点正常返回请求信息。

  • 若请求的 referer 字段不匹配白名单设置的内容，则 CDN 节点拒绝返回该请求信息，会直接返回状态码403。

  • 当设置白名单时，CDN 节点只能返回符合该白名单内字符串内容的请求。

  • 空referer选项勾选允许空 referer访问 选项时，此时若请求 referer 字段为空或无 referer 字段（如浏览器请求），则 CDN 正常返回请求信息。

  • 您可以通过防盗链开关，一键关闭防盗链配置，开关为关闭状态时，即便下方存在已有配置，仍不会生效，下次单击开启时，会先行进行配置的二次确认，不会立即发布至全网生效。

  • 防盗链支持域名 / IP 规则，匹配方式为前缀匹配（仅支持路径情况下，域名的前缀匹配不支持），即假设配置名单为 www.abc.com，则 www.abc.com/123 匹配，www.abc.com.cn 不匹配；假设配置名单为 127.0.0.1，则 127.0.0.1/123 也会匹配。

  • 防盗链支持通配符匹配，即假设名单为 *.qq.com，则 www.qq.com、a.qq.com 均会匹配，qq.com 因其域名级别与 *.qq.com 的域名级别不同，则不会被匹配。

Google | Bing | Baidu

偶然间发现 Bing 竟然收录了我的博客，但是我并没有向其添加站点。因此我看了看 Google 和 Baidu，发现它们也都收录了我的博客。但是不幸的是之前向百度提交的站点，并没有被百度收录（site:lu-yf-lemon-love-github-io.vercel.app）。

这也证明了我们不需要主动向搜索引擎提交站点，也能被收录。因为 Google 账号在国内很难申请，这也省去了很多麻烦。

也证明了即便你向百度提交站点，也不一定被收录。

也证明了部署在 Vercel 上的博客能够被百度收录。

www.luyf-lemon-love.space 是 2022 年 6 月 11 日创建的，而我是 2022 年 6 月 16 日发现上面现象的。

增添头像卡片动态背景

原教程链接：Hexo增添头像卡片动态背景

本节将介绍如何在侧边栏增添头像卡片动态背景。效果展示：将鼠标移至头像卡片即可看到。

在 blog/themes/butterfly/source/css/_custom 目录中创建 my_avatar.css 文件，粘贴下面代码。_custom 目录的作用及使用方法请参考 00004-Hexo快速搭建一个博客-ubuntu 中的 Hexo 异步加载方案 小节。

1
2
3
4
5
6
7
8
9
10
11
/* 效果一：彩带 */
.card-info>.is-center:hover {
  background: url(https://fastly.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);
}

/* 效果二：花 */
/*
.card-info>.is-center:hover {
  background: url(https://fastly.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);
}
*/
彩带和花两种效果
效果

公告板图片

原教程链接：Hexo博客Butterfly主题美化

修改 _config.butterfly.yml 文件

1
2
3
card_announcement:
  enable: true
  content: 本站部署到了几个地方，对应的域名请看顶部的 Domains 页，也可以直接访问 Server 页。<img src="https://cos.luyf-lemon-love.space//images/src=http___5b0988e595225.cdn.sohucs.com_images_20190807_3a7deb1efdfc4111bada5782b7fbf454.gif&refer=http___5b0988e595225.cdn.sohucs.gif">
效果

Math 数学

KaTeX 官网

不要在标题里使用 KaTeX 语法，toc 目录不能正确显示 KaTeX。

  1. 修改 _config.butterfly.yml 文件：
1
2
3
4
5
6
7
# KaTeX
katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: true
  hide_scrollbar: true
  1. 安装插件，建议使用淘宝镜像 cnpm 安装，在国内，npm 有可能安装失败。
1
2
3
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i hexo-renderer-markdown-it --save
cnpm install @neilsustc/markdown-it-katex --save
  1. 配置 hexo 根目录的 _config.yml 文件：
1
2
3
4
5
6
markdown:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      options:
        strict: false

关于如何在 Markdown 中插入数学公式可以参考下面的文档。

MarkDown数学公式基本语法

Supported Functions

Support Table

效果

1
2
3
$$
\frac{M}{N}=\frac{piR^2}{(2R)^2} \Rightarrow pi=4*\frac{M}{N}
$$

MN=piR2(2R)2⇒pi=4∗MN\frac{M}{N}=\frac{piR^2}{(2R)^2} \Rightarrow pi=4*\frac{M}{N}

结语

第十二篇博文写完，开心！！！！

今天，也是充满希望的一天。