此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
准备工作
重装开始
更换淘宝源
1
| npm config set registry http://registry.npmmirror.com
|
换回默认源
1
| npm config set registry https://registry.npmjs.org/
|
- 安装Hexo
- 进入博客文件夹
- 初始化git
安装Buterfly主题
- 从Github安装稳定版
1
| git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
|
- 进入[Blog_v2]/themes/butterfly，删除[.git]文件夹
- 安装pug 以及 stylus 的渲染器
1
| npm install hexo-renderer-pug hexo-renderer-stylus --save
|
- 方便后续升级
1
| cp -rf ./themes/butterfly/_config.yml ./_config.butterfly.yml
|
- 启用Butterfly主题
在[Blog_v2]中的_config.yml文件中，theme栏填入butterfly
更新NPM命令
方便后续使用
在[Blog_v2]中的package.json文件中，scripts新增
1
2
| "dev": "hexo clean && hexo deploy && hexo server"
"push": "hexo clean && hexo deploy && git push origin main"
|
使用方法
1
2
| npm run dev # 本地部署
npm run push # 将源码推送到远程
|
安装字数统计
1
| npm install hexo-wordcount --save
|
安装Algolia搜索
1.安装搜索插件
1
| npm install hexo-algoliasearch --save
|
- Algolia账户设置
在Algolia官网注册账户并配置项目
- 配置config文件
在[Blog_v2]中的_config.yml文件中增加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| algolia:
appId: "Z7A3XW4R2I" # 您的应用程序 ID
apiKey: "12db1ad54372045549ef465881c17e743" # 您的 API 密钥（只读）
adminApiKey: "40321c7c207e7f73b63a19aa24c4761b" # 您的管理员 API 密钥
chunkSize: 5000
indexName: "my-hexo-blog" # 存储帖子的索引的名称
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
|
配置abbrlink插件
abbrlink可以修改文章路径，使得文章链接更易访问/被收录
- 安装插件
1
| npm install hexo-abbrlink2 --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中，permalink栏填入posts/:abbrlink/
配置permalink-pinyin插件
permalink-pinyin插件可以将链接中的中文转化为拼音
- 安装插件
1
| npm install hexo-abbrlink2 --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
1
2
3
| permalink_pinyin:
enable: true #是否开启
separator: '-' # default: '-'链接符
|
Github仓库
- 安装插件
1
| npm install hexo-generator-feed --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
1
2
3
4
5
6
7
8
9
10
11
12
13
| feed:
enable: true
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:
|
站点地图Sitemap
sitemap-Github仓库
baidu-sitemap-Github仓库
- 安装插件
1
2
| npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
1
2
3
4
5
6
7
8
9
10
11
12
| sitemap:
path:
- sitemap.xml
- sitemap.txt
template: ./sitemap_template.xml
template_txt: ./sitemap_template.txt
rel: false
tags: true
categories: true
baidusitemap:
path: baidusitemap.xml
|
留言板
Github仓库
- 安装插件
1
| npm install hexo-butterfly-envelope --save
|
- 配置config
在[Blog_v2]中的_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://unpkg.zhimg.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
line: https://unpkg.zhimg.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
beforeimg: https://unpkg.zhimg.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
afterimg: https://unpkg.zhimg.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
|
友链朋友圈
Github仓库
- 安装插件
1
2
| npm uninstall hexo-butterfly-fcircle --save
npm install hexo-filter-fcircle --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
1
2
3
4
5
6
7
8
9
10
11
12
13
| # fcircle
# see https://akilar.top/posts/62f13a97/
fcircle:
enable: true #控制开关
apiurl: https://hexo-friendcircle-api-ai9d4hwad-anzhiyu-c.vercel.app/api #api地址
initnumber: 20 #【可选】页面初始化展示文章数量
stepnumber: 10 #【可选】每次加载增加的篇数
css: https://npm.elemecdn.com/[email protected]/css/friend.min.css #【可选】开发者接口，自定义css链接
js: https://npm.elemecdn.com/[email protected]/js/fcircle.min.js #【可选】开发者接口，自定义js链接
path: #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
front_matter: #【可选】fcircle页面的 front_matter 配置
title: 朋友圈
comments: false
|
外挂标签
Github仓库
- 安装插件
1
| npm install hexo-butterfly-tag-plugins-plus --save
|
- 更换Markdown渲染插件
1
2
| npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
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://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://unpkg.zhimg.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://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://unpkg.zhimg.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
|
配置首页轮播图
Github仓库
- 安装插件
1
| npm install hexo-butterfly-swiper --save
|
- 配置config
在[Blog_v2]中的_config.yml文件中增加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| # hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
|
