安装nvm及Git环境

很多情况下，为了适应工作、学习我们需要在一个电脑里使用不同版本的node，在切换使用频繁的情况下，就会陷入 卸载↔安装 的怪圈，这时候你需要一个趁手的版本管理工具（nvm）。

安装教程及设置请自定百度，此处给出我自己本机的全局安装配置：

c:\user\Administrator.npmrc中以下两项配置设置为nodejs安装路径，
以本机为例：nvm安装路径：E:\nvm\nvm
nodejs路径：E:\nvm\nodejs
prefix=E:\nvm\nodejs
cache=E:\nvm\nodejs\node_cache

切记：安装完成后先进行验证环境是否安装成功。

安装Hexo框架

首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 blogtest 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择 Git Bash Here，然后依次输入如下命令：

1
npm install -g hexo-cli

等上一个命令完成后，再输入下面命令：

1
2
3
4
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>

npm install  # 安装博客所需要的依赖文件

注意：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行。

等待运行完成，文件夹中多了许多文件。此时 Hexo 框架的本地搭建已经完成了，我们来运行一下看看。
命令继续输入以下命令进行本地验证:

1
hexo g && hexo s

浏览器中打开 http://localhost:4000 或 127.0.0.1:4000，可以看到一个网页，说明 Hexo 博客已经成功在本地运行。

更换主题

默认的 Hexo 主题为 landscape，我选择了 Butterfly 作为博客主题

Butterfly 主题使用

1) Butterfly 安装
在博客的根目录执行

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

安装完成后可在 根目录/themes/butterfly 查看主题文件夹

2) 应用主题
修改博客根目录的配置文件 _config.yml，把主题改为 butterfly，
备注：此部分可采用2.1.4主题升级方式，通过复制主题目录下的_config.yml到根目录进行配置。

1
theme: butterfly

3) 安装插件
如果你没有 pug 和 stylus 的渲染器，需要安装

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

4) 升级建议
把主题文件夹中的_config.yml 复制到 Hexo 根目录里，同时重新命名为 _config.butterfly.yml。以后只需要在_config.butterfly.yml进行配置就行。Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

添加看板娘

clipboard.png

1）下载 live2D
https://github.com/stevenjoezhang/live2d-widget
先在github 上将文件压缩包下载下来，然后解压，放置在博客根目录/themes/butterfly/source/中
（我这里是把文件夹名改为live2d-widget）
clipboard2.png

2）更改 autoload.js 文件
更改 live2d-widget 下的 autoload.js 文件，其实只需要将第二行注释掉，取消第三行的注释即可
clipboard3.png

3）添加资源文件
在博客根目录的主题配置文件 _config.butterfly.yml 中找到 inject 并修改，引入 css 文件和 js 文件即可
clipboard4.png

4）启用 live2d
可以在 博客根目录的主题配置文件 _config.butterfly.yml 最后新增以下内容

1
2
live2d:
  enable: true

最后，执行命令即可看到效果（同时要注意 public 文件夹中有没有生成 live2d-widget 文件夹）
clipboard5.png

1
2
3
hexo clean
hexo g
hexo s

Hexo博客搭建二(Butterfly主题样式设置)

设置导航栏

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  清单||fas fa-list:
     - 音乐 || /music/ || fas fa-music
     - 电影 || /movies/ || fas fa-video
     - 照片 || /Gallery/ || fas fa-images
  关于: /about/ || fas fa-heart

代码风格

修改_config.butterfly.yml对应的配置，mac比较好看，下述代码为比较原始文件改动的地方：

1
2
3
4
5
highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
code_word_wrap: false

社交图标

官方图标库：https://fontawesome.com/icons?from=io

1
2
3
4
5
6
7
8
#************* 个人栏目显示社交链接图标
social:
  fab fa-github: https://github.com/lynsite || Github
  fab fa-gitee: https://gitee.com/lynsite || Gitee
  fa fa-cuttlefish: https://blog.csdn.net/liu940204 || 我的CSDN
  fab fa-zhihu: https://www.zhihu.com/people/Mr.Liu.fighting || 知乎
  fab fa-weibo: https://weibo.com/5758452408/profile?topnav=1&wvr=6&is_all=1 || 新浪微博
  fas fa-envelope: mailto:lynsite@163.com || 网易邮箱

官方默认图标蜜汁尴尬，好多没有，所以此处可使用阿里巴巴提供的矢量图标库 传送门。

1、将你想要添加的图标点击 “添加入库” 按钮，也就是图中圈起来的图标。
1.png

2、点击右上角小购物车图标。这里会看到你刚刚添加的所有图标
2.png
3.png

3、接下来就是为你的图标创建一个项目，名称随意。创建完成后你将看到如下页面
4.png

4、生成在线链接 font class 方式）点击 Font class 按钮然后生成链接。
查看链接
点击链接会看到一些 css 代码。将鼠标下拉会看到刚才你添加的样式。
5.png

5、引入字体样式其实就是把刚才的链接引入到博客中，可以直接使用阿里的链接，也可以下载下来。为了方便方便修改，我建议下载下来放到本地。
下载后的目录结构：
6.png

其中 iconfont.css 文件为入口文件，里面是各图标的 class 样式。
1）iconfont.css 文件依赖于以下 5 个文件：

iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.woff2

在 Butterfly主题中的 source 目录下新建 iconfont2 目录，将上述 5 个文件拷贝到该目录下。

2）然后将 iconfont.css 文件的内容稍微修改一下，并拷贝到 css文件中
PS：记得一定要指定iconfont.css依赖文件的路径！

6、引入css样式文件
7.png

扩展：小图标如果你觉得小，可以自行修改。
这样修改会导致所有这个图标的大小都会变动。建议的方式是重新写一个 css，为其添加规则。设置时只需要多加一个 class 即可例如：

1
2
3
4
5
6
7
8
9
10
.icon-bilibili:before {
  content: "\e600";
}
/* 卡片处小图标 */
.card_icon {
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

最终示例：

1
2
3
4
5
6
7
8
9
#************* 个人栏目显示社交链接图标,此处采用阿里巴巴矢量图标库
social:
  iconfont iconlogo-black: https://gitee.com/lynsite || Gitee
  iconfont icongithub: https://github.com/lynsite || Github
  iconfont iconCN_csdnnet: https://blog.csdn.net/liu940204 || CSDN
  iconfont iconbilibili-fill: https://blog.csdn.net/liu940204 || bilibili
  iconfont iconzhihu1: https://www.zhihu.com/people/Mr.Liu.fighting || 知乎
  iconfont iconziyuan: https://weibo.com/5758452408/profile?topnav=1&wvr=6&is_all=1 || 新浪微博
  iconfont icondaoruwangyi: mailto:lynsite@163.com || 网易邮箱

1.png

网站个人头像

1
2
3
4
5
6
7
#************* 个人头像
favicon: /img/favicon.jpg
# Avatar (頭像)
avatar:
  img:
  #************* 头像是否一致旋转
  effect: false

主页背景大图片设置

1
2
3
4
#************* 主页背景大图
index_img: /img/indexbg.jpg
#可设置图片链接
index_img: https://pic.rmb.bdstatic.com/bjh/example.jpg

开启背景动态–彩带

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
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
#************** 开启彩带效果
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: true

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: true
  mobile: true

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,255,0' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

添加鼠标星星跟随样式

1
2
3
4
5
inject:
  head:
  bottom:
    #******** 鼠标星星跟随样式
    - <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script>

文章封面

1
2
3
4
5
6
7
8
9
10
11
12
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:
    - https://www.lynsite.cn/resource/site/gulimall/2021-01-17/1.jpg
    - https://www.lynsite.cn/resource/site/gulimall/2021-01-17/2.jpg

文章版权信息声明

为你的博客文章展示文章版权和许可协议。修改主題配置文件：

1
2
3
4
5
6
#************** 文章底部版权信息声明，可在文章Front-matter单独设置
post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置 decode: true 来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置

1
copyright:  false

从3.0.0开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置

1
2
3
4
copyright _author: xxxx 
copyright_ author _href: https://xxxxxx.com 
copyright_ url: https://xxxxxx.com 
copyright _info:此文章版权归xxxxx所有，如有转载，请注明来自原作者

版权显示截图
image.png

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。link可以不写，会默认为图片的链接。

修改主題配置文件

1
2
3
4
5
6
7
8
9
10
11
# Sponsor/reward
#************* 文章底部设置打赏功能
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay

image.png

开启本地搜索

网上有很多使用algolia第三方搜索功能的，后来发现有几个问题：一是js加载时间特别慢；二是每次增加文章都要重新提交一下，这个就是最不能忍的原因。于是打算使用local search（本地搜索服务）。
在主题配置文件中，关闭algolia服务：
image.png

卸载algolia插件：（如果安装的有）

1
npm uninstall hexo-algolia

增加Local Search本地搜索服务，安装插件：

1
npm install hexo-generator-searchdb --save

在站点配置文件 _config.yml 中添加:

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件 _config.yml 中启用：

1
2
3
4
5
6
7
8
9
10
11
# Local search
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
  preload: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "目前没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果（用时${time} ms）"

hexo clean
hexo g
hexo s
添加验证

文章字数统计功能

文章字数统计功能使用的是hexo-wordcount依赖。

1
npm install hexo-wordcount --save

在主题目录下的 _config.yml 文件进行配置，即打开相关配置项：

1
2
3
4
5
6
# wordcount (字数统计)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

网站开通时间以及访问统计

1
2
3
4
5
6
7
8
9
10
11
12
13
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  ##网页开通时间#格式:月/日/年时间#也可以写成年/月/日时间
  publish_date: 2 /10/2021 00 :00:00

最新评论（侧边栏）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 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
  # You can only choose one, or neither
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false

网站侧边栏添加每日一言

效果图:
image.png

主题配置文件中新增如下配置：
2.png

在Butterfly/layout/includes/widget/index.pug末尾添加代码（注意缩进）：

1
2
3
//- 侧边栏目
if theme.aside.card_hitokoto.enable
  !=partial('includes/widget/card_hitokoto', {}, {cache:theme.fragment_cache})

配置card_hitokoto
在Butterfly/layout/includes/widget目录下创建card_hitokoto.pug文件，写入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.card-widget.card-hitokoto
  .card-content
    .item-headline
      i.fas.fa-quote-left
      span= _p('每日一言')
      #hitokoto :D 获取中...
      i#hitofrom :D 获取中...
      script(src='https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js')
      script(src='https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js')
      script.
        fetch('https://v1.hitokoto.cn')
          .then(function (res){
          return res.json();
        })
        .then(function (data) {
          var hitokoto = document.getElementById('hitokoto');
          hitokoto.innerText = data.hitokoto;
          var hitofrom = document.getElementById('hitofrom');
          hitofrom.innerText = "　　　　　——" + data.from + '';
        })
        .catch(function (err) {
          console.error(err);
        })

成功！！！

访客地图

自定义widget，如果你想添加自己的内容到侧边栏去，你可以自定义。
在Hexo博客目录中的source/_data（如果没有_data文件夹，请自行创建），创建一个文件widget.yml，内容如下：

1
2
3
4
5
6
- class_name:  user-map
  id_name: user-map
  name: 访客地图
  icon: fas fa-heartbeat
  order: 
  html: '<script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8"></script>'

运行成功

文章统计图表

参考文章：https://blog.hclonely.com/posts/57bd67ce/

安装：

1
npm install hexo-charts -S

使用：

注意！下面的标签可以放到post和不含type的page的md文件中，含有type的page请自行修改相应的模板文件，这个就不要来问我了，因为每个人用的主题可能都不一样，建议去问主题的作者。

文章发布统计图

1
<div id="posts-chart"></div>

标签统计图

1
2
<!-- "data-length"为显示标签个数(从多到少)，默认为10 -->
<div id="tags-chart" data-length="10"></div>

文章分类统计图

1
<div id="categories-chart"></div>

4.png
5.png

效果图示：
3.png

地址栏添加 abbrlink

1
npm install hexo-abbrlink

编辑站点的 _config.yml文件，找到 permalink, 改成 permalink: posts/:abbrlink/
具体位置，可以参考下图：
6.png

具体文章中添加type，自定义路径：
image.png

【参考】
　Butterfly官网：https://butterfly.js.org/