0 前言 📝

2023年后半年萌生了一个想法，想搭建一个自己的网站，把自己的技术、生活等都记录整理到里面。由于时间紧张，一直到24年年初才腾出时间来，故倾心付之。如果说大脑是自己的主库，那么这个网站就是自己的副库。

该网站基于Github托管，在Hexo框架下搭建，通过Github Action进行版本更新。由于网上的内容过于碎片化，故而在下文详细记录了自己搭建整个网站的过程，并随着自己的日常使用不断补充新内容，力求完善。

当网站崩了的那一刻，我才发现这篇文档是如此的重要。从前4章的基操之后，后文将进入时间线记录中，以备不时之需，并将文档阶段性存档，方便回滚。

1 网站搭建总览图

1.1 搭建流程图

网站搭建需要Github托管，Hexo做框架，然后寻找相应的主题进行配置、魔改，前面几步可以在一天时间内完成，主要的功夫都会被魔改所占用。

1.2 所需资源网站总览

Github网站： https://github.com/

Git官网： https://git-scm.com/

腾讯云域名控制台网址：登录 - 腾讯云

node.js下载地址：Node.js

VScode下载网址：Download Visual Studio Code - Mac, Linux, Windows

marktext下载网址：GitHub - marktext/marktext: 📝A simple and elegant markdown editor, available for Linux, macOS and Windows.

butterfly主题官网：butterfly

和风天气： https://www.qweather.com/

高德地图： 创建应用和 Key-Web服务 API | 高德地图API

1.3 素材网站

1.3.1 配色网站

https://www.designgradients.com/

Gradient Colors Collection Palette - CoolHue 2.0

网页设计常用色彩搭配表 - 配色表 | 小影的工具箱

https://color.adobe.com/zh/

1.3.2 图标字体

https://www.iconfont.cn/

1.3.3 图库素材

https://bg-patterns.com/

Free Logo Maker | Create a Custom Logo Design Online

https://pngimg.com/

https://www.clearpng.com/

https://pixabay.com/

免费素材图片

微软官方图片素材免费下载- 热门图片素材完整下载- OfficePLUS (officeplus.cn)

Free to Use Clip Art Images & Vector Illustrations | ManyPixels

Illustrations | unDraw

https://www.bensound.com/

https://bigjpg.com/

https://wallpaperscraft.com/

https://pic.netbian.com/

2 Github准备

2.1 注册Github

Github网站： https://github.com/

进入网站注册并绑定邮箱后，生成自己的账号（账号名称确定后就无法更改了），然后点击创建仓库，仓库名称为：“Github名称+github.io”

2.2 下载Git

Git官网： https://git-scm.com/

按照安装指示默认选项即可，最后完成后，可以右键，菜单中显示Git图标即完成安装。

2.3 Git与Github绑定

(1) SSH 协议

Github与Git是由SSH协议来绑定并提交文件。SSH（Secure Shell,安全外壳协议）是建立在应用层基础上的安全协议。传统的网络服务程序如FTP、POP和Telnet等，在网络上用明文传送口令和数据，很容易受到“中间人攻击”（Man-in-the-middle attack），中间人会冒充真正的服务器接收你传给服务器的数据，然后再冒充你把数据传给真正的服务器，从而出现欺骗。

SSH协议可以把所有传输的数据进行加密，能否防止DNS欺骗和IP欺骗，而且传输的数据是经过压缩的，还可以加快传输的速度。

SSH主要由 传输层协议[SSH-TRANS]、用户认证协议【SSH-USERAUTH]和连接协议[SSSH-CONNECT]组成。传输层协议是提供强力的加密技术、密码主机认证及完整性保护；用户认证协议用于向服务器提供客户端用户鉴别功能。

SSH主要用于远程登录，可以口令登录和公钥登录。由于口令登录每次都必须输入密码比较麻烦，所以可以用公钥登录。用户将自己的公钥储存在远程主机上，登录时远程主机随机发送一段字符串，用户把自己的私钥加密后再发回来，远程主机用事先储存在公钥进行解密。

(2) 公钥生成

（1）先检测是否安装SSH，新建一个文件夹，在文件夹里面右键打开Git Bash，然后输入ssh

输入 ssh-keygen -t rsa

然后在提示的位置找到公钥id_rsa.pub，记事本打开后复制内容，然后去浏览器的Github主页中，从设置中找到SSH and GPG keys，再点击 New SSH key。

将复制的内容粘贴到key中，标题可填写当前本地电脑名称（更换主机时便于区分），再点击Add SSH key即可。

最后在Git Bash中输入ssh -T git@github.com

2.4 建立域名

在腾讯云注册的域名，腾讯云域名控制台网址：登录 - 腾讯云

开始注册域名，输入自己想要的域名信息，点击查询，选择自己相中的后加入购物车

选择好后点击右侧的立即购买，填入支付页。确认域名的价钱、期限后，创建信息模板，等待审核通过（5分钟左右）

审核通过后即可支付，获取自己的域名。

3 Hexo准备

3.1 Nodejs

node.js下载地址：Node.js

按照安装提示直接默认选项即可。安装完成后，win+R打开运行框，输入cmd，然后在命令提示符弹窗中输入 node -v和npm -v

由于需要经常安装模块供配置，所以需要设置npm在安装全局模块时的路径和环境变量，避免把下载的资源都占用到C盘中。

在安装后的nodejs中新建两个文件夹 node_cache、node_global，

然后右键选择文件夹属性，更改访问权限，改成完全控制。

打开cmd，输入以下命令：

1
2
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

打开环境变量，新建系统变量 NODE_PATH，如下

然后编辑用户变量中的path，将npm的路径更改：

最后在cmd中执行命令测试一下：

 npm install webpack -g

查看webpack文件是否已经出现。

3.2 安装Hexo

在D盘新建一个文件夹，命名为“Blog”，在Blog文件夹中点击Git Bush Here，输入npm install -g hexo-cli

安装完成后，输入hexo init初始化博客，然后输入hexo g静态部署，然后再输入hexo s可以在线查看。

查看网址：http://localhost:4000

快捷键ctrl+c可以停止服务器。

新建完成后，Hexo所在文件夹的目录如下：

1
2
3
4
5
6
7
├── _config.yml  #网站配置信息，在此配置部分参数
├── package.json #应用程序信息，默认安装markdown渲染引擎
├── scaffolds#模板文件夹，Hexo根据Scaffold来新建文章
├── source #存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes #主题文件夹，根据主题生成静态页面

下载安装Hexo的相关插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
npm install hexo-generator-index --save
# 主页插件，最新版Hexo默认安装，可跳过
npm install hexo-generator-archive --save
# 归档插件，最新版Hexo默认安装，可跳过
npm install hexo-generator-category --save
# 分类插件，最新版Hexo默认安装，可跳过
npm install hexo-generator-tag --save
# 标签插件，最新版Hexo默认安装，可跳过
npm install hexo-server --save
# 服务插件，最新版Hexo默认安装，可跳过
npm install hexo-renderer-marked --save
# markdown渲染支持插件，最新版Hexo默认安装，可跳过
npm install hexo-renderer-stylus --save
# nib css支持插件，如无需求，可跳过
npm install hexo-generator-feed --save
# RSS订阅支持插件，如无需求，可跳过
npm install hexo-generator-sitemap --save
# sitemap生成插件，帮助搜索引擎抓取，如无需求，可跳过
npm install hexo-admin --save
# 网页端hexo文档管理插件，如无需求，可跳过
npm install hexo-deployer-git --save
# git部署插件，必须安装

3.3 将Hexo部署到Github

进入Blog文件夹，用记事本打开 _config.yml文件，下滑到文件底部，填上内容：

注意，仓库地址是这个

然后回到Blog文件夹，打开Git Bash，安装Git部署插件，输入：

npm install hexo-deployer-git --save

然后记住下面这三连操作：

1
2
3
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成以后，输入 https://xxx.github.io就可以打开网页了。

Hexo的常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo clean
#清空缓存
hexo generate
hexo g #简写
#重新编译
hexo server
hexo s #简写
#打开本地访问
hexo new <layout> "文章title"
#新建文章
hexo deploy
hexo d #简写
#部署到云端

3.4 解析域名

现在虽然可以访问自己的网站，但是网址是Github提供的，为了启用自己的个性化域名，需要解析域名和绑定域名。

回到腾讯云-域名控制台：登录 - 腾讯云

点击解析，然后输入网址，自动生成两条解析记录。点击第二条的修改，更改为A，IPV4地址通过cmd命令，输入

1
ping sonny1996.github.io

然后打开Blog的source文件夹，新建CNAME.txt文件，打开后写上自己的域名，保存后把\txt删掉。

回到Blog文件夹，右键打开Git Bash，三连

1
2
3
hexo clean
hexo g
hexo d

这时就可以用自己的域名打开博客网页了。

如果此时报错，按照提示输入相应的代码进行修复

3.5 Vercel部署

Vercel是一个代码托管平台，首先需要创建一个Vercel账号，用Github账户关联，参考教程：Hexo博客搭建基础教程(二) | Fomalhaut🥝

3.6 Github Action

（1）创建源代码仓库

现已有静态博客页面存放仓库，类型为public

需要建立一个源代码仓库，类型为private

注：建立时勾选”readme file“

（2）生成部署密钥

在本地博客文件夹里，打开git bash，运行

1
ssh-keygen -f github-deploy-key

一路回车至创建成功，本地文件夹中出现两个文件

（3）配置部署密钥

在公共仓库中，添加公共钥匙（HEXO_DEPLOY_PUB）

在私密仓库中，添加secrets文件，注意命名 （私钥命名需用下划线 HEXO_DEPLOY_PRI）

（1）常量声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 在记事本中逐个记录，方便替换，以下为我的示例
[Blogroot]: E:\MyWebt

[SourceRepo]：Akilarlxh/Hexo-blog-source

[SiteBlogRepo]
  [GithubBlogRepo]：Akilarlxh.github.io
  [GiteeBlogRepo]：akilar
  [CodingBlogRepo]：akilar/akilar

[SiteUsername]
  [GithubUsername]：Akilarlxh
  [GiteeUsername]：Akilar
  [CodingUsername]：akilar

[SiteToken]
  [GithubToken]：15076c8eb9c874sad676bc9bfb13sadw86babf2
  [GiteeToken]：f57acasdadgar4578603adas5d8w79bb
  [CodingToken]：a4e45daf78as1f2670dcbbcfd5as7d8asd8cd66a77

[GithubEmail]：akilarlxh@gmail.com

[TokenUser]：RAxDiobbRi

（2）获取Token

访问Github->头像（右上角）->Settings->Developer Settings->Personal access tokens-

选择generate new token(classic),创建名称为Hexo-deploy，勾选repo和workflow，生成的Token（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）

（3）创建存放源码的私有仓库

在github上创建仓库，选择private属性，创建完成后把源码push到这里。

4 网站配置

4.1 网站主题选择

首先给网站找个主题，我当前使用的是Butterfly主题。

4.1.1 安装主题

首先确认主题的下载地址，然后打开Blog根文件夹，右键Git Bash，输入代码：

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

上述版本为稳定版，如果要升级，可以在主题目录下运行git pull

4.1.2 Butterfly主题应用

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

theme: butterfly

4.1.3 插件安装

需要安装pug以及stylus的渲染器

npm install hexo-renderer-pug hexo-renderer-stylus --save

4.1.4 避免升级不便

在hexo的theme中的_config.yml 文件复制到根目录下，并且改名字为_config.butterfly.yml。

Hexo会自动合并主题中的_config.yml和_config.butterfly.yml里的配置，如果存在同名配置，优先使用的是_config.butterfly.yml里的配置。同样的，如果使用了_config.butterfly.yml配置，theme里的原文件将不再会有效果。

4.2 网站根主题配置

在根目录里面的_config.yml中修改

（1）网站信息及网址信息更改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 网站信息
title: 挽风
subtitle: 一个钻研技术的文艺青年
description: 机器人
keywords: ''
author: Sonny
language: zh-CN
timezone: Asia/Shanghai #大陆只能写Asia/Shanghai

# 网址信息
url: https://sonny2024.space/ #网站网址信息
permalink: pages/:category/:name.html #文章链接格式
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

（2）永久链接生成

参考教程：Hexo：hexo利用hexo-abbrlink插件生成永久链接 | Elvin

安装abbrlink插件：在根文件下打开bash，输入以下代码

1
npm install hexo-abbrlink --save

修改_config.yml配置文件

1
2
## permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html  ## 此处可以自己设置,也可以直接使用 :/abbrlink

在_config.yml配置文件下增加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32 进制
  rep: hex        #support dec(default) and hex  算法
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  ## Generate categories from directory-tree
  ## depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.

完成后，可以在每篇文章的footer里面添加abbrlink: 1 #数字

（3）数字公式的渲染

下载mathjax插件：

1
npm install hexo-math --save

在_config.yml配置文件下增加以下配置

1
2
3
4
5
6
math:
  engine: 'mathjax'
  mathjax:
    src: custom_mathjax_source
    config:
      # MathJax config

在主题配置文件中将mathjax设置为true

1
2
3
mathjax:
  enable: true
  per_page: true

（4 ）挂载音乐挂件

安装hexo-tag-aplayer插件，git执行：

1
npm install --save hexo-tag-aplayer

在_config.yml配置文件下增加以下配置

1
2
3
aplayer:
  meting: true
  asset_inject: false

在主题配置文件中修改：

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后在博客文章中使用的话，可以在需要的位置插入以下内容：

1
{% meting "9094011425" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:100px" "preload:none" "theme:#ad7a86"%}

其中，常用选项的配置如下：

Hexo添加全局吸底Aplayer音乐播放器教程 | polar-bear～Blog

1
2
3
4
server可选：
netease tencent kugou xiami baidu
netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）
type可选：song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。添加单曲选的歌曲，歌单选择playlist。

全局吸底Aplayer模式：

在主题配置文件中插入：

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer" data-id="8492133976" data-server="netease" data-type="playlist"  data-fixed="true" data-theme="#3F51B5"></div>

（5）添加Algolia搜索引擎

注册账号：Sign in | Algolia

创建新应用： https://zhuanlan.zhihu.com/p/667645314

安装Algolia插件：

1
npm install hexo-algoliasearch --save

在_config.yml配置文件下增加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-algoliasearch(可以匹配内容)
algolia:
  appId: IL09IAT89V
  apiKey: fc7e04f5bb9ad5d83ce0715c4b0903f0
  adminApiKey: 537da783a4d4d52a131bef51bf348040
  chunkSize: 5000
  indexName: Web
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

填写后执行语句上传索引信息

1
hexo algolia

在主题配置文件中修改：

1
2
3
4
5
6
7
8
9
# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果（用时${time} ms）"

4.3 Butterfly主题配置

（1）学习网址

Butterfly主题学习网址： https://butterfly.js.org/

（2）Front-matter

在markdown文件最上方以- - -分割的区域，称为front-matter，Page和Post分别用于页面和文章页的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page 页面配置说明

title： 必须，页面标题
date： 必须，页面创建日期
type： 必须，分类、标签、友情链接三个页面需要配置
updated： 更新日期
descripe： 页面描述
keyword： 页面关键词
comment：页面评论
top_img： 页面顶部图片
mathjax:
katex：
aside： 显示侧边栏，默认为true
aplayer： 在需要页面加载aplayer
highlight_shrink: 配置代码框是否展开
random：配置友情链接是否随机排序，默认为false
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
Post 文章页配置说明

title: 必须，文章标题
date： 必须，文章创建日期
updated： 可选，文章更新日期
tags：文章标签
categories: 文章分类
keywords: 文章关键词
description: 文章描述
top_img: 文章顶部图片
cover: 文章缩略图
comments:文章评论
toc:显示文章toc
toc_number:显示toc_number
toc_style_simple: 显示toc的简洁模式
copyright:显示文章版权模块，enable配置
copyright_author: 文章版权模块的文章作者
copyright_author_href: 文章版权模块的文章作者
copyright_url: 文章版权模块的文章链接
copyright_info:文章版权模块的版权声明
mathjax: 显示mathjax
katex:显示katex
aplayer: 配置音乐
highlight_shrink: 配置代码框是否展开
aside: 显示侧边栏，默认true
abcjs: 加载abcjs

（3）导航栏设置

在主题配置文件中进行更改

1
2
3
4
5
6
# 导航栏設置
# --------------------------------------
nav:
  logo: /图片/Home/2.png
  display_title: true
  fixed: true # fixed navigation bar

（4）菜单/目录

在主题配置文件中进行更改

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
# Menu 目录
menu:
  首页: / || fa-solid fa-house-user #首页
  技术||fa-solid fa-robot||hide: #技术专栏
      机器人: /robot/ || fa-solid fa-robot
      机械: /mechanics/ || fa-solid fa-screwdriver-wrench
      电控: /electronics/ || fa-solid fa-bolt
      算法: /computer/ || fa-solid fa-computer
      语言: /language/ || fa-solid fa-globe
  生活||fas fa-book-reader||hide:
      运动: /sports/ || fa-solid fa-person-biking
      阅读: /read/|| fa-solid fa-book
      音乐: /musics/ || fa-solid fa-music
      书画: /drawings/ || fa-solid fa-palette
      日常: /dailylife/ || fa-solid fa-sun
  资源||fas fa-archive: #资源列表
      项目: /project/ || fa-solid fa-diagram-project
      下载: /download/ || fa-solid fa-download
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  关于: /about/ || fa-solid fa-mars

注意：必须是 /XXX/，后面用||分开，注意空格，然后写图标名称

（5）代码

代码功能仅适用于Hexo自带的代码渲染，主要修改文章中代码的主题风格、代码块复制按钮、代码语言、代码展开与否、代码高度限制、代码换行等。

1
2
3
4
5
6
7
8
# Code Blocks (代码相关)
# --------------------------------------
highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: true # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false

（6）社交图标

在主题配置文件中

1
2
3
4
5
6
7
# Social Settings (社交图标设置)
# formal:
#   icon: link || the description || color
social:
  fas fa-envelope: mailto:xbyning@gmail.com || 邮箱 || '#4a7dbe'
  fa-brands fa-qq: http://wpa.qq.com/msgrd?v=3&uin=1789285411&site=qq&menu=yes || QQ
  fa-brands fa-zhihu: https://www.zhihu.com/people/sun-ning-ning-69 || 知乎

（7）头像

在主题配置文件中

1
2
3
4
# Avatar (头像)
avatar:
  img: /img/avatar.gif
  effect: false

（8）顶部图

顶部图的配置在配置文件和各自配置文件中都可以进行，各自配置文件的优先级大于配置文件。

因此配置文件可以设置为通用型，在各自配置文件中做个性化处理。

其中首页的顶部图也需要设置

1
2
3
4
5
# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: /img/background.jpg

(9）文章封面

1
2
3
4
5
6
7
8
9
10
11
cover:
  # display the cover or not (是否显示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面显示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (当沒有设置cover时，默认的封面显示)
  default_cover: /img/background.gif
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

（10）错误页面

1
2
3
4
5
6
7
8
9
10
11
# Replace Broken Images (替換无法显示的图片)
error_img:
  flink: /图片/模板/404_1.jpg
  post_page: /图片/模板/friend_404.gif

# A simple 404 page
error_404:
  enable: true
  subtitle: "此页面不存在哦٩͡[๏̯͡๏]"
  # https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
  background: /图片/模板/404.jpg

（11）页面meta显示

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page: # Home Page
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

（12）文章打赏

在每篇文章结尾添加打赏按钮，相关二维码可以自行配置。

1
2
3
4
5
6
7
8
9
10
11
# Sponsor/reward
reward:
  enable: true
  text:
  QR_code:
      - img: /图片/Home/wechat.jpg
        link:
        text: 微信
      - img: /图片/Home/alipay.jpg
        link:
        text: 支付宝

4.4 基本操作

4.4.1 页面建立

要在Hexo创建页面，需要输入以下命令：

hexo new page "机器人技术"

4.4.2 文章建立

4.4.2.1 Markdown

（1） 编辑器下载

找了一个免费且好用的Markdown编辑器，叫做marktext，下载网址为：GitHub - marktext/marktext: 📝A simple and elegant markdown editor, available for Linux, macOS and Windows.

（2）Markdown基本语法

标题：# Heading One ## Heading two

加粗：**this text is bold**

段落：空白行（不能使用空格或制表符缩进段落）

换行：一行末尾添加两个及以上的空格，回车即可换行

斜体：*this is Italic*

粗体+斜体：前后各三个星号

创建块引用：> 块引用

嵌套块引用：>>

带有其他元素的块引用： > -

列表：1.

无序列表： -、、+

代码块：四个空格或者一个制表符

代码： `两个反引号``

分割线：单独一行使用三个或多个星号、破折号或者下划线

链接语法： [超链接显示名]（超链接地址”title“）

网址和Email地址： <>

图片语法：使用！

1
[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

查找帮助：@

（3）Markdown扩展语法

表格：

1
2
3
4
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

对齐：在左侧、右侧或者两侧加冒号

围栏代码块：三个反引号

语法高亮：```matlab

脚注：[^1],然后在其他任何位置添加：[^1]: My footnote.

使用表情： https://emojipedia.org/

4.4.3 创建文章

在博客根目录下打开git bash，输入指令

hexo new ”文章标题“ -p 路径/文件名

然后找到新建好的.md文件，右键选择marktext打开，进行编辑即可。

将编辑好的文章通过三连发布到博客上。

5 魔改日志

5.1 魔改素材

5.1.1 魔改教程搜集

几个很不错的博客案例：

https://www.fomal.cc/

https://fe32.top/

5.1.2 魔改所需素材

图标素材网址：Find Icons with the Perfect Look & Feel | Font Awesome

图标素材网址：图标库 - FontAwesome 字体图标中文Icon

图片素材网址：6,000+ Free GIFs & Stickers for Download - Pixabay

GIF素材网址：Discover Freelance GIF Artists | GIPHY

副标题更改： 糖果屋微调合集 | Akilarの糖果屋

5.2 魔改内容

参考来源：Fomalhaut-开源地址

5.2.1 和风天气挂件

登录和风天气官网： https://widget.qweather.com/

输入插件名称：Web_Weather，点击生成代码

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
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "12034",
    "background": "1",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "1",
    "language": "auto",
    "borderRadius": "5",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "ffb8e9a7c4ee4f84a9741e81eac5575a"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

在主题文件中的source\js的目录下创建一个weather.js文件，将上述代码填入。

在主题配置文件_config.butterfly.yml的inject的bottom中引入js文件：

1
2
- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script src="/js/weather.js"></script>

在nav.pug文件中添加代码

最后，为了将组件挂在左侧一些，可以在head.styl中增加以下内容：

1
2
#none_space
  flex:1

5.2.2 增加看板娘

在Hexo的根目录中打开Git bash，安装插件

npm install --save hexo-helper-live2d

下载模型

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

打开站点配置文件，复制以下内容

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: right #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: true # 手机中是否展示

5.2.3 网站恶搞标题

新建文件title.js

在主题配置文件中引入该文件

1
2
3
inject: 
  bottom: 
+    - <script async src="/js/title.js"></script>

5.2.4 昼夜切换特效

（1）在themes\butterfly\layout\includes\custom\文件夹中新建sun_moon.pug，填入代码：

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')

新建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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(to top, #f8cd71 0, #5bfde9 80%)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(to top, #30cfd0 0, #330867 100%)

.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
  #sun
    position absolute
    border-radius 100%
    left 44%
    top 30%
    height 6rem
    width 6rem
    background #ffee94
    box-shadow 0 0 40px #ffee94
    // opacity 0

  #moon
    position absolute
    border-radius 100%
    left 44%
    top 30%
    position absolute
    border-radius 100%
    height 6rem
    width 6rem
    box-shadow -1.8em 1.8em 0 0.2em #fff
    // opacity 1

  // &:after
  //   position absolute
  //   left 42%
  //   top 30%
  //   width 6rem
  //   height 6rem
  //   border-radius 50%
  //   content ''
  //   background #ffef9e
  //   box-shadow 0 0 30px #ffef9e

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
// .icon-V
//   padding 5px

新建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
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
function switchNightMode() {
    document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></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') {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "1";
        document.getElementById("moon").style.opacity = "0";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "0";
            document.getElementById("moon").style.opacity = "1";
        }, 1000);

        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')
        // 延时弹窗提醒
        setTimeout(() => {
            new Vue({
                data: function () {
                    this.$notify({
                        title: "关灯啦🌙",
                        message: "当前已成功切换至夜间模式！",
                        position: 'top-left',
                        offset: 50,
                        showClose: true,
                        type: "success",
                        duration: 5000
                    });
                }
            })
        }, 2000)
    } else {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "0";
        document.getElementById("moon").style.opacity = "1";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "1";
            document.getElementById("moon").style.opacity = "0";
        }, 1000);

        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
        setTimeout(() => {
            new Vue({
                data: function () {
                    this.$notify({
                        title: "开灯啦🌞",
                        message: "当前已成功切换至白天模式！",
                        position: 'top-left',
                        offset: 50,
                        showClose: true,
                        type: "success",
                        duration: 5000
                    });
                }
            })
        }, 2000)
    }
    // handle some cases
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}

修改themes\butterfly\layout\includes\head.pug，在文末增加一行

1
include ./custom/sun_moon.pug

修改themes\butterfly\layout\includes\rightside.pug中替换：

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
2
3
inject:
  bottom:
+    - <script src="/js/sun_moon.js" async></script>

5.2.5 Violet留言板

在根目录下运行

1
npm install hexo-butterfly-envelope --save

在网站配置文件_config.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

新建comments页面

1
hexo new page "comments"

在source的comments文件夹下的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
<link rel="stylesheet" href="/css/commentsbar.css"/>  
  <div id="computer">  
    <div id="maincontent"><br>  
      <div id="form-wrap"><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png" id="beforeimg">  
        <div id="envelope">  
          <form>  
            <div class="formmain">  
              <img class="headerimg" src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/>  
              <div style="padding: 5px 20px;">  
                <center>  
                  <h3 calss="title3">来自Akilar的留言:</h3>  
                </center>  
                <center class="comments">  
                  有什么想问的？<br>  
                  有什么想说的？<br>  
                  有什么想吐槽的？<br>  
                  哪怕是有什么想吃的，都可以告诉我哦~<br>  
                </center>  
                <div class="bottomcontent">  
                <img class="bottomimg" src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"/>  
                </div>  
                <p class="bottomhr">自动书记人偶竭诚为您服务！</p>  
              </div>  
            </div>  
          </form>  
        </div><img id="afterimg" src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png">  
      </div>  
    </div>  
  </div>  
  <div id="mobile">  
    <form>  
      <div class="formmain"><img class="headerimg" src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg" />  
        <div style="padding: 5px 20px;">  
          <center>  
            <h3 class="title3">来自Akilar的留言:</h3>  
          </center>  
          <center class="comments">  
            有什么想问的？<br>  
            有什么想说的？<br>  
            有什么想吐槽的？<br>  
            哪怕是有什么想吃的，都可以告诉我哦~<br>  
          </center>  
          <div class="bottomcontent"><img src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png" class="bottomhr"></div>  
          <p class="bottomhr"">自动书记人偶竭诚为您服务！</p>  
        </div>  
      </div>  
    </form>  
  </div>

在前面加上type，并将语言包添加此项。

1
2
3
title: 欢迎留言
date: 2024-02-10 11:11:24
type: "comments"

5.2.6 一图流教程

在source下新建一个css文件夹，存放自定义的css样式，新建一个custom.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;
}

在主题配置文件的inject中添加：

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

将主题配置文件中的index_img和footer_bg配置项取消头顶与页脚图，在background的配置项中设置背景图

1
background: url(/img/background.jpg)

5.2.7 分类磁贴

安装插件

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

在theme文件夹中添加配置信息

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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权，数值越小执行越早
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id # 填写id或class
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: Ubuntu指南
      cover: https://assets.akilar.top/image/cover1.webp
    - descr: 玩转Win10
      cover: https://assets.akilar.top/image/cover2.webp
    - descr: 长篇小说连载
      cover: https://assets.akilar.top/image/cover3.webp
    - descr: 个人日记
      cover: https://assets.akilar.top/image/cover4.webp
    - descr: 诗词歌赋
      cover: https://assets.akilar.top/image/cover5.webp
    - descr: 杂谈教程
      cover: https://assets.akilar.top/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

修改themes\butterfly\layout\index.pug

1
2
3
4
5
6
7
8
9
10
  extends includes/layout.pug

  block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
+     if theme.categoryBar.enable
+       .recent-post-item(style='height:auto;width:100%;padding:0px;')
+         #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
      +postUI
      include includes/pagination.pug

新建[Blogroot]\themes\butterfly\source\css\_layout\categoryBar.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
if hexo-config('categoryBar.enable')
  #categoryBar
    width 100%!important
  ul
    &.categoryBar-list
      margin 5px 5px 0 5px!important
      padding 0!important

  li
    &.categoryBar-list-item
      font-weight bold
      display inline-block
      height 180px!important
      margin 5px .5% 0 .5%!important
      background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
      border-radius 10px
      padding 25px 0 25px 25px!important
      box-shadow rgba(50, 50, 50, 0.3)  50px 50px 50px 50px inset
      overflow hidden
      background-size 100%!important
      background-position center!important
      &:hover
        background-size 110%!important
        box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
        span
          &.categoryBar-list-count
            &::after
              transition all .5s
              transform translate(-100%, 0)
  a
    &.categoryBar-list-link
      color white!important
      font-size 20px!important
      &::before
        content '|'!important
        color white!important
        font-size 20px!important
      &:after
        content ''
        position relative
        width 0
        bottom 0
        display block
        height 3px
        border-radius 3px
        background-color white
      &:hover
        &:after
          width 90%
          left 1%
          transition all 0.5s

  span
    &.categoryBar-list-count
      display block!important
      color white!important
      font-size 20px!important
      &::before
        content '\f02d'!important
        padding-right 15px!important
        @extend .fontawesomeIcon
      &::after
        padding 5px
        display block!important
        color white!important
        font-size 20px!important
        position relative
        right -100%
  covers = hexo-config('categoryBar.cover')
  for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
      background unquote(cover)
  descrs = hexo-config('categoryBar.descr')
  for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
      content descr!important
  if hexo-config('categoryBar.column') == 'odd'
    li
      &.categoryBar-list-item
        width 32.3%!important
  else if hexo-config('categoryBar.column') == 'even'
    li
      &.categoryBar-list-item
        width 24%!important
  @media screen and (max-width: 650px)
    li
      &.categoryBar-list-item
        width 48%!important
        height 150px!important
        margin 5px 1% 0 1%!important

  $caterow =  hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
  .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
      width 0!important
  @media screen and (max-width: 650px)
    .categoryBar-list
      max-height 160px * $caterow

5.2.8 文章栏置顶

安装插件

1
npm install hexo-butterfly-swiper --save

添加配置信息

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初始化方法

在文章页添加swiper_index配置项

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

5.2.9 文章双栏

安装插件

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

新增网站根目录配置项

1
2
butterfly_article_double_row:
  enable: true

如果末页是奇数，会显得不舒服，需要在custom.css文件添加代码：

1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

5.2.10 外挂标签

安装插件和渲染器

1
2
3
npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

在站根点文件添加配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

标签教程Tag Plugins Plus | Akilarの糖果屋

5.2.11 打赏按钮投币彩蛋

修改[Blogroot]\themes\butterfly\layout\includes\post\reward.pug,整体替换为以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
link(rel='stylesheet' href=url_for(theme.CDN.coin_css) media="defer" onload="this.media='all'")
.post-reward
  button.tip-button.reward-button
    span.tip-button__text= _p('donate')
    .coin-wrapper
      .coin
        .coin__middle
        .coin__back
        .coin__front
    .reward-main
      ul.reward-all
        each item in theme.reward.QR_code
          - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img
          li.reward-item
            a(href=clickTo target='_blank')
              img.post-qr-code-img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
            .post-qr-code-desc=(item.itemlist||item).text
if theme.reward.coinAudio
  - var coinAudio = theme.reward.coinAudio ? url_for(theme.reward.coinAudio) : 'https://npm.elemecdn.com/akilar-candyassets@1.0.16/audio/coin.mp3'
  audio#coinAudio(src=coinAudio)
script(defer src=url_for(theme.CDN.coin_js))

新建\themes\butterfly\source\css\coin.css

5.3 第二次魔改

5.3.1 首页的飞机

在MyWeb\themes\butterfly\layout\includes\header新建plane.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
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
#drone
  .container
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .trigger
    .monitor
      .opening
        .camera.o-x
          .camera.o-y
            .camera.o-z
              .awing
                .stars
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                  .star
                .fly.o-x
                  .fly.o-y
                    .fly.o-z
                      .free_bounce
                        .free_rotate
                          .body
                            .cockpit
                              .under
                              .back
                              .left
                              .right
                              .edge_left
                              .edge_right
                              .boosts
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                                .boost
                            .wing_left
                              .under
                              .back
                              .left
                              .right
                            .wing_right
                              .under
                              .back
                              .left
                              .right

F:\MyWeb\themes\butterfly\layout\includes\header\index.pug中插入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      !=partial('includes/header/plane', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

最后在theme文件中增加head引用

1
- <link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css">

5.3.2 告示牌小人

在Butterfly/layout/includes/widget/card_announcement.pug下替换为以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.fa-shake
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  .xpand(style='height:200px;')
    canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
script(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
script#rendered-js(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
style.
  .card-widget.card-announcement {
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
    }
  canvas {
  display: block;
  margin: 0 auto;
  cursor: move;
  }

5.3.3 博客插入图片

安装插件

1
npm install hexo-asset-image --save

在hexo的配置文件_config.yml中修改：

1
post_asset_folder: true

打开/node_modules/hexo-asset-image/index.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
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];

      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

最后在生成博客时就可以把要插入的图片复制到博客文章文件夹中，按照markdown格式书写：

![图片说明](head.jpeg)