文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

准备工作

  • 安装Hexo
  • 安装NPM
  • 安装node.js

重装开始

更换淘宝源

1
npm config set registry http://registry.npmmirror.com

换回默认源

1
npm config set registry https://registry.npmjs.org/

初始化Hexo

  1. 安装Hexo
1
hexo init Blog_v2
  1. 进入博客文件夹
1
cd Blog_v2
  1. 初始化git
1
git init

安装Buterfly主题

  1. 从Github安装稳定版
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 进入[Blog_v2]/themes/butterfly，删除[.git]文件夹
  2. 安装pug 以及 stylus 的渲染器
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 方便后续升级
1
cp -rf ./themes/butterfly/_config.yml ./_config.butterfly.yml
  1. 启用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
  1. Algolia账户设置
    在Algolia官网注册账户并配置项目
  2. 配置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. 安装插件
1
npm install hexo-abbrlink2 --save
  1. 配置config
    在[Blog_v2]中的_config.yml文件中，permalink栏填入posts/:abbrlink/

permalink-pinyin插件可以将链接中的中文转化为拼音

  1. 安装插件
1
npm install hexo-abbrlink2 --save
  1. 配置config
    在[Blog_v2]中的_config.yml文件中增加
1
2
3
permalink_pinyin:
  enable: true #是否开启
  separator: '-'   # default: '-'链接符

RSS订阅

Github仓库

  1. 安装插件
1
npm install hexo-generator-feed --save
  1. 配置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. 安装插件
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev
  1. 配置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. 安装插件
1
npm install hexo-butterfly-envelope --save
  1. 配置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. 安装插件
1
2
npm uninstall hexo-butterfly-fcircle --save
npm install hexo-filter-fcircle --save
  1. 配置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/anzhiyu-blog@1.1.6/css/friend.min.css #【可选】开发者接口，自定义css链接
  js: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/fcircle.min.js #【可选】开发者接口，自定义js链接
  path: #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false

外挂标签

Github仓库

  1. 安装插件
1
npm install hexo-butterfly-tag-plugins-plus --save
  1. 更换Markdown渲染插件
1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  1. 配置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. 安装插件
1
npm install hexo-butterfly-swiper --save
  1. 配置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初始化方法