next6、7博客主题美化 2020-04-10

目录：
1、Hexo 启用next主题模板
2、更改Next主题为中文
3、增加标签页和分类页
4、使用标签页和分类页
5、next主题样式的更改
6、更换头像-可旋转
7、更改博客标题和作者名称
8、启用侧边栏社交链接
9、启用侧边栏友情链接
10、新增一片文章
11、开启订阅公众号
12、开启打赏功能
13、首页文章设置阅读全文
14、添加动态背景
15、给博客添加fork Github
16、修改文章内部链接样式
17、修改文章底部带#的标签
18、增加评论功能
18.1添加-来必力评论：-待完善
18.2添加-Valine评论：-已成功
18.3添加-Gitment评论：-待完善
19、增加搜索功能
20、增加不蒜子统计功能
21、增加内容分享服务-未成功
22、增加加载效果
23、增加点击爆炸效果
24、底部布局-隐藏底部的强力驱动
25、实现字数统计和阅读时长的功能
26、文章的置顶功能
27、修改字体大小
28、博客文章中插入图片
28.1 插入本地图片
28.2 插入网络图片
29、添加博客自定义图标
30、文章结束语
31、侧边栏设置
32、文章阴影设置
33、增强文章底部版权信息
34、添加页面宠物
35、设置代码块样式
36、代码块增加复制按钮功能
37、设置博客摘要-全文显示
38、文章内链接样式
39、加入网易云音乐播放器
40、设置RSS订阅
41、设置文章头信息post.md
42、设置菜单信息page.md
43、主页、归档、标签及分类分别控制
44、文章标签显示和文章字数显示设置-未测
45、分页显示问题-未测
46、修改Pisces主题宽度-未测
47、设置主题透明度-未测
48、配置全局，标题、文章、代码块等字体
49 、显示最近博客
50、添加主题动态背景图片
51、hexo博客部署到远端的Github

next主题为例：

├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

我们需要改的文件其实也就那么几个，大部分是不需要更改，next都已经帮我们配置好了~
hexo博客默认目录结构：

.
├── .deploy # 执行hexo deploy命令部署到GitHub上的内容目录
├── public#  执行hexo generate命令，输出的静态网页内容目录
├── scaffolds # layout模板文件目录，其中的md文件可以添加编辑（新写了一片文章）
├── scripts # 扩展脚本目录，这里可以自定义一些javascript脚本
├── source # 文章源码目录，该目录下的markdown和html文件均会被hexo处理
|   ├── _drafts # 草稿文章
|   └── _posts # 发布文章
├── themes # 主题文件目录
├── _config.yml # 全局配置文件，大多数的设置都在这里
└── package.json # 应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

1、Hexo 启用next主题模板

官网主题 地址：https://hexo.io/themes/

next主题：

测试使用next主题，也是大多数人比较喜欢的主题之一。

next主题官网参考：next主题官网
next主题github地址: next5 旧版本。

next主题github地址：next7 建议用这个新的版本.

下载next主题：

命令：

#cmd 进入博客根目录

#下载next主题 版本5 ,不推荐(已经不维护)
git clone https://github.com/iissnan/hexo-theme-next.git themes/next5
#下载next主题 最新版本7,推荐
git clone https://github.com/theme-next/hexo-theme-next themes/next7

_config.yml 配置文件有两个：

注意:站点配置文件是博客根目录下的_config.yml，主题配置文件是下载的主题下的_config.yml.

站点配置文件: D:\blog\zhengjiaao\_config.yml

主题配置文件: D:\blog\zhengjiaao\themes\next\_config.yml

站点配置文件: 修改主题

#将默认主题landscape,修改为next主题
#theme: landscape
theme: next7

启动博客：

#cmd 进入博客根目录

#清除博客缓存
hexo clean
#生成静态文件
hexo g
#启动博客 默认端口4000 ,也可指定端口启动: hexo s -p -5555
hexo s

#浏览器访问：http://localhost:4000/
#可看到next主题页面

2、更改Next主题为中文

站点配置文件

language: zh-CN # 主题语言-简单中文

3、增加标签页和分类页

主题配置文件

#找到menu，打开标签页和分类页
menu:
  home: /|| home
  #about: /about/ || user
  tags: /tags/|| tags #标签页 + 图标tags
  categories: /categories/|| th #分类页 + 图标th
  #archives: /archives/|| archive
  #schedule: /schedule/|| calendar #日历
  #sitemap: /sitemap.xml|| sitemap #站点地图，供搜索引擎爬取
  #commonweal: /404/|| heartbeat # 腾讯公益404
  resources: /resources/|| download #资源 + 图标download
# Enable/Disable menu icons.
menu_icons:
  enable: true #是否启用menu图标
  

创建标签页和分类页

#打开cmd，进入博客根目录

#创建标签页
hexo n page tags
#创建分类页
hexo n page categories

修改标签页 D:\blog\zhengjiaao\source\tags\index.md

#修改前
---
title: tags
date: 2019-12-26 09:58:14
---

#修改后,一定要添加type: "tags"
---
title: 标签
date: 2019-12-26 09:58:14
type: "tags"
---

修改分类页 D:\blog\zhengjiaao\source\categories\index.md

#修改前
---
title: categories
date: 2019-12-26 10:05:28
---

#修改后,一定要添加type: "categories"
---
title: 分类
date: 2019-12-26 09:58:14
type: "categories"
---

以上是已经存在的默认菜单，只需要这样配置接好了。

现在要添加一个新的resources资源

主题配置文件

#找到menu，新增 resources 资源
menu:
  home: /|| home
  tags: /tags/|| tags #标签页
  categories: /categories/|| th #分类页
  resources: /resources/|| download #资源

创建资源页

#打开cmd，进入博客根目录

#创建标签页
hexo n page resources

修改资源页 D:\blog\zhengjiaao\source\resources\index.md

#修改前
---
title: resources
date: 2019-12-26 10:10:56
---


#修改后,一定要添加type: "tags"
---
title: 资源
date: 2019-12-26 09:58:14
type: "resources"
---

修改 D:\blog\zhengjiaao\themes\next\languages\zh-Hans.yml

#新增 resources 翻译成中文 资源
menu:
  resources: 资源

4、使用标签页和分类页

打开文章 D:\blog\zhengjiaao\source_posts\hello-world.md

在md文章头部添加：

---
title: Hello World
date: 2017-03-11 23:54:11
tags: [Hello,测试] 
categories: 测试
---

5、next主题样式的更改

主题配置文件

# ---------------------------------------------------------------
# 主题的样式设置
# ---------------------------------------------------------------
# 只能选择一套。
# Schemes
# scheme: Muse
#scheme: Mist
# scheme: Pisces
scheme: Gemini

6、更换头像-可旋转

在/themes/next/source/下新建文件夹uploads，将头像图片放在/themes/next/source/uploads/下。

主题配置文件

#将作者头像图片放置在blog/themes/next/source/images目录下，修改名称为avatar.gif
# 用户头像-成功,也可以 http:图片链接形式
avatar: /uploads/avatar.gif

头像圆形并鼠标放上旋转

找到 D:\blog\zhengjiaao\themes\next\source\css_common\components\sidebar\sidebar-author.styl 文件

方式一：简单配置-头像圆形旋转

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
   
  /* 头像圆形 */
  border-radius: 50%;
  transition: 2s all;
}
/*旋转*/
.site-author-image:hover{
  transform: rotate(360deg);
}

方式二：复杂点配置-头像圆形旋转

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
   
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

7、更改博客标题和作者名称

站点配置文件

# Site
title: Zheng # 博客的标题(名称)
subtitle: '' # 根据主题的不同，有的会显示有的不会显示
description: '站点描述，可以是你喜欢的一句签名' # 站点描述，可以是你喜欢的一句签名
keywords:
author: 宇宙小神特别萌 # 作者名称
language: zh-Hans # 主题语言-简单中文
timezone: Asia/Shanghai #中国的时区，不要乱改城市(可选)

8、启用侧边栏社交链接

主题配置文件

#侧边栏添加-社交账号： 格式为 链接名:链接地址 || 链接图标 ，链接图标必须是http://fontawesome.dashgame.com/网站中存在的图标名
social: 
  GitHub: https://github.com/zhengjiaao || github
  简书: https://www.jianshu.com/u/70d69269bd09 || book
social_icons:
  enable: true #是否显示social社交图标
  icons_only: false #是否仅显示社交图标
  transition: false

9、启用侧边栏友情链接

主题配置文件

# 侧边栏添加-友情链接
# Blog rolls 推荐阅读
links_icon: link
links_title: Links
#links_layout: block #友情链接居中排列
links_layout: inline #友情链接并行排列
links:
  Web前端导航: http://www.alloyteam.com/nav/
  创造狮导航: http://www.chuangzaoshi.com/code
  前端书籍资料: http://www.36zhen.com/t?id=3448
  掘金酱: http://e.xitu.io/
  V2EX: https://www.v2ex.com/
  印记中文: https://www.v2ex.com/
  # Title: http://example.com/

10、新增一片文章

命令

#打开cmd，进入博客根目录

#新建一片文章 名称为 第一篇文章
hexo n 第一篇文章

命令演示：

#新建一片文章 名称为 第一篇文章
D:\blog\zhengjiaao>hexo n 第一篇文章
INFO  Created: D:\blog\zhengjiaao\source\_posts\第一篇文章.md

打开 D:\blog\zhengjiaao\source_posts\第一篇文章.md

---
title: 第一篇文章
date: 2019-12-26 11:01:58
tags:
    - 分享
    - 导航
categories: 后台
---

# 从这里才可以写文章内容
## 第一篇文章哦

11、开启订阅公众号

在/themes/next/source/下新建文件夹uploads，将微信公众号二维码wechat-qcode.jpg图片放在/themes/next/source/uploads/下。

主题配置文件

# 微信公众号订阅
wechat_subscriber:
  enabled: true #是否启用
  #公众号 二维码，可以是 http://二维码图片链接
  qcode: /uploads/wechat-qcode.jpg 
  description: 扫一扫上面的二维码可以关注我哦 #公众号描述,会放二维码上方
  

12、开启打赏功能

在/themes/next/source/下新建文件夹uploads，将收款的二维码wechatpay.jpg和 alipay.png图片放在/themes/next/source/uploads/下。

主题配置文件：

# 微信支付宝打赏功能 微信收款 码\支付宝收款码
# Reward
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /uploads/wechatpay.jpg
alipay: /uploads/alipay.png
#bitcoin: /images/bitcoin.png

13、首页文章设置阅读全文

方式一：主题配置文件

# 显示 阅读全文
auto_excerpt:
  enable: true # fales/true 自动截取一定程度的摘要
  length: 150 # 截取多少字显示

方式二：md文章中配置-比较灵活

在需要截取的地方，添加：

<!-- more -->

当然两种可以同时使用，有 more，就以more显示。

14、添加动态背景

主题配置文件

# 共有四种动态背景：canvas_nest、three_waves、canvas_lines、canvas_sphere
# Canvas-nest
# canvas_nest: false
# 使用网络背景特效 Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true # false/true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

# 3D背景特效
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false # false/true

# canvas_lines
canvas_lines: false # false/true

# canvas_sphere
canvas_sphere: false # false/true

另外需要在blog中下载相应资源包，具体见上面的链接，下面我给出canvas_nest的下载方式：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

15、给博客添加fork Github

找到自己喜欢的样式：http://tholman.com/github-corners/

打开： D:\blog\zhengjiaao\themes\next\layout\_layout.swig

<div class="headband"></div>
<!--找到大概23行代码，在上方这个代码下的位置添加下面代码-->
<!--修改 a标签 github换成自己的地址：href="https://github.com/zhengjiaao"-->
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

16、修改文章内部链接样式

打开 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

17、修改文章底部带#的标签

打开 D:\blog\zhengjiaao\themes\next\layout_macro\post.swig

搜索：tag.name

<!--修改前-->
<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
<!--修改后：将 # 替换成 google图标-->
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

图标必须是FontAwesome网站中存在的图标名。

18、增加评论功能

18.1添加-来必力评论：-待完善

来必力官网注册：https://livere.com/ 暂时无法注册，好像挂了。

主题配置文件

18.2添加-Valine评论：-已成功

Valine官网：https://valine.js.org/

leancloud参考：https://blog.csdn.net/weixin_39345384/article/details/80787998

注册：leancloud

1.创建一个应用 新应用名称 "hexo-next",选择 "开发版" 创建，在应用上点击存储。

数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对NexT主题的修改兼容，新建Class名字必须为Counter。为了避免权限问题导致 次数统计显示不正常，选择无限制，创建Class。

2.获取App ID和App Key

Class创建完成后，选择界面最左侧的设置 → 应用Key，复制App ID和App Key

3.打开博客根目录/themes/next/下的_config.yml，查找leancloud，填写复制来的App ID和App Key，重新生成、部署博客即可正常统计文章阅读量。

主题配置文件

# 添加-leancloud存储库-只能统计文章阅读量，没有评论功能
leancloud_visitors:
  enable: true # false/true 是否启用
  app_id: OuyHeA0XGL8hK4vgbqqweERx-gzGzoHsz
  app_key: L58VglKmWULcGK2W2qwekWzM

leancloud附赠说明：

• 记录文章访问量的唯一标识符是文章的发布日期和文章的标题，因此请确保这两个数值组合的唯一性，如果更改了这两个数值，会造成文章阅读数值的清零重计。

• 初始的文章统计量显示为0。在配置好阅读量统计服务之后，第一次打开博文时，会自动向服务器发送数据，该数据会被记录在对应的应用的Counter表中。

• 修改Counter表中的time字段的数值，可以修改文章的访问量。双击具体的数值，修改之后回车即可保存。

• 因为AppID以及AppKey是暴露在外的，为了确保只用于我们自己的博客，建议设置Web安全域名，填入自己的博客域名

  • 找到设置-->安全中心-->Web 安全域名 填写自己的博客域名：如 https://zhengjiaao.github.io/ 保存，这样就只有自己的博客域名能存储使用

Valine评论功能：

主题配置文件

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
# Valine 评论功能
valine:
  enable: true # false/true 是否启用valine评论功能
  appid: OuyHeA0XGL8hK4vgbqqweERx-gzGzoHsz # your leancloud application appid #LeanClound获得的appid
  appkey: L58VglKmWULcGK2W2qwekWzM # your leancloud application appkey #LeanClound获得的appkey
  notify: true # false/true  mail notifier , https://github.com/xCss/Valine/wiki # 邮件提醒
  verify: false # false/true Verification code
  placeholder: Just go go # comment box placeholder 欢迎畅所欲言
  avatar: monsterid # gravatar style  # mm 默认头像设置、wavatar、monsterid、robohash
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  

指定文章（页面）评论功能是否开启
在 Hexo 博客中，评论的功能是在所有页面都默认开启的，但是有的时候我们在页面上不需要显示评论功能，例如分类，标记页面我们并不需要评论功能。

我们可以在 Front-matter 中通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开，如我设置标签页面的评论功能关闭：

title: 标签
date: 2019-07-18 15:16:50
type: "tags"
comments: false

设置评论头像：https://valine.js.org/avatar.html

# Valine 评论功能
valine:
  avatar: monsterid # gravatar style  # mm 默认头像设置、wavatar、monsterid、robohash

18.3添加-Gitment评论：-待完善

需要github登录才能评论，有局限性，适合评论少的、不推荐。

主题配置文件

19、增加搜索功能

#打开cmd，进入博客根目录

#安装本地搜索插件
npm install hexo-generator-searchdb --save

安装之后，会在站点目录的 public 文件夹下创建一个 search.xml 文件

站点配置文件

# Search  添加搜索功能
search:
  path: ./public/search.xml #索引文件的路径，相对于站点根目录
  field: post #搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  format: html # 
  limit: 10000 # 限制搜索的条目数

主题配置文件

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
# 添加搜索功能
local_search:
  enable: true # false/true 是否启动
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1 #字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。

20、增加不蒜子统计功能

主题配置文件

# 统计访客量以及文章阅读量
# NexT主题集成了不蒜子统计功能
busuanzi_count:
  # count values only if the other configs are false
  enable: true # false/true 是否开启不蒜子统计功能
  # custom uv span for the whole site
  # 效果：本站访客数12345人次
  site_uv: true
  #本站访客数
  site_uv_header: 本站访客数 <i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  # 效果：本站总访问量12345次（一般不开启这个）
  site_pv: true
  #本站总访问量
  site_pv_header: 本站总访问量 <i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  ## 效果：本文总阅读量12345次
  page_pv: true
  #本文总阅读量
  page_pv_header: 本文总阅读量 <i class="fa fa-file-o"></i>
  page_pv_footer: 次
  

hexo博客解决不蒜子统计无法显示问题：

首先需要先找到NexT下引用不蒜子统计的方法。文件路径为/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件：

<!--修改前-->
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!--修改后-->
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

21、增加内容分享服务-未成功

主题配置文件：

# 开启分享
jiathis: ture
  ##uid: Get this uid from http://www.jiathis.com/
#add_this_id:

# 开启百度分享
baidushare: true
#   type: button

22、增加加载效果

不推荐使用，影响加载速度

主题配置文件：

# Progress bar in the top during page loading.
# 文章内容加载效果 false/true
pace: true
# Themes list: 效果列表
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
#修改加载效果-效果不明显，不推荐使用，影响加载速度
pace_theme: pace-theme-center-atom

23、增加点击爆炸效果

不推荐使用，影响加载速度

1.创建爆炸js文件
在/themes/next/source/js/src下新建文件fireworks.js，并复制粘贴如下代码

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

2.在\themes\next\layout\_layout.swig文件的<body>标签最后添加：

  <!--页面点击爆炸效果-->
    {% if theme.fireworks %}
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script type="text/javascript" src="/js/src/fireworks.js"></script>
    {% endif %}

主题配置文件： 新增

# Fireworks 页面点击爆炸效果
fireworks: true

24、底部布局-隐藏底部的强力驱动

主题配置文件：

#底部显示建站时间和图标修改
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2019 # 建站年份

  # Icon between year and copyright info.
  icon: user #作者图标（默认是author人像)

  # If not defined, will be used `author` from Hexo main config.
  # 别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者
  copyright: 宇宙小神特别萌 # (可不写)
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false # true/false 是否显示Hexo信息-隐藏底部的强力驱动

  #主题信息
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false # true/false 是否显示主题信息
    # Version info of NexT after scheme info (vX.X.X).
    version: false # true/false 是否显示主题版本
    

25、实现字数统计和阅读时长的功能

方式一:post_wordcount (不推荐)

#打开cmd，进入博客根目录

# 安装统计插件
npm install hexo-wordcount --save

主题配置文件： 开启统计功能

# 实现字数统计和阅读时长的功能
post_wordcount:
  item_text: true
  wordcount: true # false/true
  min2read: true # false/true
  totalcount: false
  separated_meta: true

方式二:symbols_count_time (推荐)

#打开cmd，进入博客根目录

# 安装统计插件
npm install hexo-symbols-count-time

#下载
git clone https://github.com/theme-next/hexo-symbols-count-time.git /node_modules/hexo-symbols-count-time
#进入目录
cd node_modules/hexo-symbols-count-time
#Test 测试
npm install mocha chai --save-dev
npm test
#Tests with coverage 覆盖率测试
npm install -g nyc
nyc --print both node_modules/.bin/_mocha -- test/index.js

主题配置文件： 开启统计功能

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 实现字数统计和阅读时长的功能 （参考 https://github.com/theme-next/hexo-symbols-count-time）
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false # false/true # 总字数
  awl: 4
  wpm: 275

方式三：不蒜子统计功能

主题配置文件

# 统计访客量以及文章阅读量
# NexT主题集成了不蒜子统计功能
busuanzi_count:
  # count values only if the other configs are false
  enable: true # false/true 是否开启不蒜子统计功能
  # custom uv span for the whole site
  # 效果：本站访客数12345人次
  site_uv: true
  #本站访客数
  site_uv_header: 本站访客数 <i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  # 效果：本站总访问量12345次（一般不开启这个）
  site_pv: true
  #本站总访问量
  site_pv_header: 本站总访问量 <i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  ## 效果：本文总阅读量12345次
  page_pv: true
  #本文总阅读量
  page_pv_header: 本文总阅读量 <i class="fa fa-file-o"></i>
  page_pv_footer: 次
  

hexo博客解决不蒜子统计无法显示问题：

首先需要先找到NexT下引用不蒜子统计的方法。文件路径为/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件：

<!--修改前-->
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!--修改后-->
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

26、文章的置顶功能

#cmd 进入博客根目录

#卸载 hexo-generator-index
npm uninstall hexo-generator-index --save
#安装 hexo-generator-index-pin-top
npm install hexo-generator-index-pin-top --save

在需要置顶的文章的Front-matter中加上top: true 或者top: 任意数字，比如：

---
title: 文章置顶测试
top: 2
tags:
---

top中数字越大，文章越靠前。top: 2文章在top: 1文章的上方.

设置文章置顶图标：

打开/themes/next/layout/_macro/ 目录下的post.swig文件，在的第一个标签下，插入如下代码：

搜索"post-meta"

    <div class="post-meta">
            <!--新增代码，此注释不要添加-->
            {% if post.top %}
                <i class="fa fa-thumb-tack"></i>
                <font color=7D26CD>置顶</font>
                <span class="post-meta-divider">|</span>
            {% endif %}
    </dev>

27、修改字体大小

打开 \themes\next\source\css_\variables\base.styl , 将$font-size-base改为16px

// Font size
$font-size-base           = 16px

28、博客文章中插入图片

28.1 插入本地图片

#cmd 进入博客根目录

#方式一： hexo-asset-image  有时会失效
npm install hexo-asset-image --save

#方式二：比较稳定
npm install https://github.com/CodeFalling/hexo-asset-image --save

站点配置文件： 修改

post_asset_folder: true # false/true 是否启动资源文件夹

新建一片文章：

#cmd 进入博客根目录

#创建一片新文章
hexo new post ceshi

方式一：执行hexo new post ceshi 会创建一个同名的文件夹，将你博文中插入的照片放置到这个同名文件夹中即可，图片的命名随意，在文章中直接使用

# 添加图片:在想添加的位置写入![](图片名字.图片格式),例如:
<img src="ceshi/alipay.png" alt="测试1" style="zoom:25%;" /> #推荐
![测试2](ceshi/alipay.png)
![测试2](alipay.png)

方式二：hexo/source目录下新建一个img文件夹

使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称.

在此路径下放一张图片 D:\blog\zhengjiaao\source\img\test.png

给ceshi.md文章插入图片

---
title: ceshi
date: 2019-12-26 16:29:35
tags:
---

![测试4](/img/alipay.png)

28.2 插入网络图片

河床存储图片：

![qwe](https://i.loli.net/2018/02/09/5a7d6a402e15e.jpg)

![jrebel插件安装.png](https://img.haomeiwen.com/i15645795/22ac925b9c130d7b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](https://img.haomeiwen.com/i15645795/22ac925b9c130d7b.png)

但是有可能插入网络图片不显示，或者只显示某些网络图片.

执行命令：

#cmd 进入博客根目录

npm uninstall -g hexo-renderer-marked-lazy

然后在博客文章中加入：<meta name="referrer" content="no-referrer"/>

---
title: Docker安装常用软件2
tags:
  - Docker
categories: ''
resources: ''
copyright: false
comments: true
date: 2019-12-31 12:56:42
top:
---
<meta name="referrer" content="no-referrer"/>

![qwe](https://i.loli.net/2018/02/09/5a7d6a402e15e.jpg)

![jrebel插件安装.png](https://img.haomeiwen.com/i15645795/22ac925b9c130d7b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](https://img.haomeiwen.com/i15645795/22ac925b9c130d7b.png)

29、添加博客自定义图标

#cmd 进入博客根目录

#安装 hexo-asset-image
npm install hexo-asset-image --save

站点配置文件： 修改

post_asset_folder: true # false/true 是否启动资源文件夹

使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。

Next支持修改图标，博客网站的图标可以在easyicon、bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/img目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

# 添加博客自定义图标
favicon: 
  small: /img/blog_favicon/favicon-16x16-next.png
  medium: /img/blog_favicon/favicon-32x32-next.png
  # apple_touch_icon: /images/apple-touch-icon-next.png
  # safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
  

30、文章结束语

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
              -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
        </div>
    {% endif %}
</div>

修改 post.swig 文件
在 \themes\next\layout\_macro\post.swig中， post-body之后， post-footer之前添加如下代码（post-footer之前两个DIV），在 wechat-subscriber.swig 代码块下方添加：

    <div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>

主题配置文件：

# 文章末尾添加“本文结束”标记
passage_end_tag: 
  enabled: true

31、侧边栏设置

设置主题配置文件，其中social表示社交信息，我们可以填入我们相关的链接，格式为链接名:链接地址 || 链接图标，其中链接图标必须是FontAwesome网站中存在的图标名。

# ***侧边栏设置***
# Posts / Categories / Tags in sidebar.
# site_state: true #默认true 是否在侧边栏加入日志、分类、标签等跳转链接

#侧边栏添加-社交账号： 格式为 链接名:链接地址 || 链接图标 ，链接图标必须是http://fontawesome.dashgame.com/网站中存在的图标名
social: 
  GitHub: https://github.com/zhengjiaao || github
  简书: https://www.jianshu.com/u/70d69269bd09 || book
social_icons:
  enable: true #是否显示社交图标
  icons_only: false #是否仅显示社交图标
  transition: false

# 侧边栏添加-友情链接
# Blog rolls 推荐阅读
links_icon: link
links_title: Links
# links_layout: block
links_layout: inline
links:
  Web前端导航: http://www.alloyteam.com/nav/
  创造狮导航: http://www.chuangzaoshi.com/code
  前端书籍资料: http://www.36zhen.com/t?id=3448
  掘金酱: http://e.xitu.io/
  V2EX: https://www.v2ex.com/
  印记中文: https://www.v2ex.com/
  # Title: http://example.com/

#将作者头像图片放置在blog/themes/next/source/images目录下，修改名称为avatar.gif
# 用户头像-成功
avatar: /images/avatar.gif
# avatar: #添加用户头像-失败
#   url: /images/avatar.gif
#   rounded: true #鼠标放在头像上时是否旋转
#   opacity: 1 #头像放缩指数
#   rotated: true # false/true ,头像是否设为圆形,否则为矩形

# Table Of Contents in the Sidebar
toc:
  enable: true #是否自动生成目录
  # Automatically add list number to toc.
  number: false #false/true 目录是否自动产生编号
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false #标题过长是否换行
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  # max_depth: 6 #最大标题深度

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left #侧边栏位置
  # position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
  display: post
  #display: always
  #display: hide
  #display: remove

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12 # 默认12 侧边栏相对主菜单像素距离

  # Back to top in sidebar (only for Pisces | Gemini).
  b2t: true # false/true 是否提供一键置顶

  # Scroll percent label in b2t button.
  scrollpercent: true # false/true 是否显示当前阅读进度

  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false #手机上是否显示侧边栏

32、文章阴影设置

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

// 主页文章添加阴影效果
.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px; 
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

33、增强文章底部版权信息

1.在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文标题:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

2.在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

3.修改 themes/next/layout/_macro/post.swig ，如下：

在 wechat-subscriber.swig 代码块前添加：

<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

4.打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码：

@import "my-post-copyright"

5.设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：

---
title: {{ title }}
date: {{ date }}
copyright: true # 是否开启版权底部版权信息
---

新建一片文章

#cmd 进入博客根目录

hexo new post ceshi

查看文章是否看起版权信息。

34、添加页面宠物

首先在博客目录下执行:

#cmd 进入博客根目录

#安装 hexo-helper-live2d
npm install -save hexo-helper-live2d

站点配置文件： 新增

#添加页面宠物
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  model:
    use: live2d-widget-model-wanko  #选择哪种模型
  display: #放置位置和大小
    position: right
    width: 150
    height: 300
  mobile:
    show: false #是否在手机端显示

上面模型的选择可在lived2d中选择，并下载相应的模型：

npm install live2d-widget-model-wanko

35、设置代码块样式

站点配置文件：

# 代码块的设置，Hexo自带的代码高亮插件
highlight:
  enable: true #是否开启代码高亮
  line_number: true #是否增加代码行号,代码块的行号显示
  auto_detect: false #自动判断代码语言
  tab_replace: ''
  wrap: true
  hljs: false

主题配置文件：

#代码块主题
highlight_theme: normal # normal/night 白色/黑色

36、代码块增加复制按钮功能

为了提高博客代码块的用户体验，仅仅代码高亮还不行，最好还能一键复制代码。

下载 clipboard.js
clipboard.js
clipboard.min.js 推荐

将clipboard.js或clipboard.min.js 放到\themes\next\source\js\src下

也是在.\themes\next\source\js\src目录下，创建clipboard-use.js，文件内容如下：

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在.\themes\next\source\css\_custom\custom.styl样式文件中添加下面代码：

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

在.\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签之前添加）：

  <!-- 代码块复制功能 -->
  <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
  <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

37、设置博客摘要-全文显示

对于摘要显示，首先我们需要开启摘要功能，修改主题配置文件：

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true #选取博客正文<!--more-->前的内容

# Automatically saving scroll position on each post/page in cookies.
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true #自动截取摘要

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false #自动截取一定程度的摘要
  length: 150

38、文章内链接样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

39、加入网易云音乐播放器

首先在网页搜索网易云音乐，选择音乐，并生成外链：

例如生成的连接：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=411214279&auto=1&height=66"></iframe>

将代码粘贴到一个合适的位置，建议放在侧边栏，在Blog/themes/next/layout/_macro/sidebar.swig文件下，选择位置复制进去，不同位置效果不同,建议放到最后，不然会遮挡下方内容。

我的加入网易云音乐播放器配置方式：

第一步：在Blog/themes/next/layout/_macro/sidebar.swig文件添加代码：

      {% if theme.background_music %}
       <div>
          <iframe class="cc-license motion-element" frameborder="no" border="0" marginwidth="0" marginheight="0" width="280" height="86" src="{{ theme.background_music }}"></iframe>
       </div>
      {% endif %}

第二步：在 themes/next/_config.yml 配置文件中添加歌单地址配置

#添加歌单地址配置
background_music: //music.163.com/outchain/player?type=2&id=411214279&auto=1&height=66

40、设置RSS订阅

在博客主目录下执行：

#cmd 进入博客根目录

#安装 hexo-generator-feed
npm install --save hexo-generator-feed

在站点配置文件中修改：

#RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

# 配置 RSS订阅 插件
plugins: hexo-generate-feed

然后设置主题配置文件：

# Set rss to false to disable feed link.
rss: /atom.xml

41、设置文章头信息post.md

新建文章自动显示自定义头信息。

设置 找到博客根目录下/scaffolds/post.md 文件，添加如下：

---
title: {{ title }}
date: {{ date }}
top:   # 文章是否置顶
tags:  # 标签  配置 1.单个"" 2.多个 [] 按","号分割 3.多个- 按行
    - 
categories: ""  # 分类 配置 1.单个"" 2.多个 [] 按","号分割 3.多个- 按行
resources: ""   # 资源 一般是可下载资源
copyright: false # false/true 自动显示自定义的文章底部版权声明
comments: true  # false/true 关闭文章底部Valine评论功能
---

新建一片文章

#cmd 进入博客根目录

hexo new post ceshi

查看文章是否看起版权信息。

42、设置菜单信息page.md

设置 找到博客根目录下/scaffolds/page.md 文件，添加如下：

#修改前
---
title: {{ title }}
date: {{ date }}
---

#修改后
---
title: {{ title }} # 中文博客 需要手动改为中文简体
date: {{ date }}
comments: false  # false/true 关闭文章底部Valine评论功能
type: {{ title }}
---

创建菜单

#cmd 进入博客根目录下

#创建资源页
hexo n page resources
#创建标签页
hexo n page tags
#创建分类页
hexo n page categories

打开 D:\blog\zhengjiaao\source\resources\index.md 修改

#修改前
---
title: resources
comments: false
type: resources
date: 2019-12-27 09:52:20
---

#修改后
---
title: 资源
comments: false
type: resources
date: 2019-12-27 09:52:20
---

打开 \themes\next\languages\zh-Hans.yml 新增资源翻译中文

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  resources: 资源  #新增资源翻译中文

主题配置文件： 新增菜单

menu:
  home: /|| home
  #about: /about/ || user
  tags: /tags/|| tags #标签页
  categories: /categories/|| th #分类页
  #archives: /archives/|| archive
  #schedule: /schedule/|| calendar #日历
  #sitemap: /sitemap.xml|| sitemap #站点地图，供搜索引擎爬取
  #commonweal: /404/|| heartbeat # 腾讯公益404
  resources: /resources/|| download #资源

43、主页、归档、标签及分类分别控制

#cmd 进入博客根目录

#安装 
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-tag --save
npm install hexo-generator-category --save

站点配置文件：

#博客首页分页设置
index_generator:
  path: '' #博客的默认路径
  per_page: 10 #主页中每页显示的贴子，0表示禁止分页
  order_by: -date #博客排序，按时间倒序排列

#归档页的分页设置
archive_generator: #归档页的配置
  per_page: 5 #归档页每页博客数
  yearly: true #按年归档
  monthly: true # false/true 按月归档，为了加快生成速度，按月归档可不要

#标签页的分页设置
tag_generator:
  per_page: 5 #标签页每页博客数

#分类页的分页设置
category_generator:
  per_page: 5  #值为0表示不分页，按需填写
 

44、文章标签显示和文章字数显示设置-未测

#cmd 进入项目根目录

#安装
npm install hexo-wordcount --save

主题配置文件：

# Post meta display settings
## 文章标签显示设置
post_meta:
  item_text: true
  created_at: true # 发表时间
  updated_at: false # 更新时间
  categories: true # 分类

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 实现字数统计和阅读时长的功能 （下载 npm install hexo-wordcount --save）
post_wordcount:
  item_text: true
  wordcount: true # false/true  # 显示字数
  min2read: true # false/true   # 所需时间
  totalcount: false # false/true # 总字数
  separated_meta: true # 分割符

45、分页显示问题-未测

打开 themes/next/layout/_partials/pagination.swig

//修改前
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

//修改后
{%- if page.prev or page.next %}
 <nav class="pagination">
   {{
     paginator({
       prev_text: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
       next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
       mid_size: 1
     })
   }}
 </nav>
{%- endif %}

46、修改Pisces主题宽度-未测

打开编辑themes\next\source\css\_schemes\Pisces\_layout.styl，在底部添加如下代码

// 以下为新增代码！！
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

47、设置主题透明度-未测

打开 /themes/next/source/css/_schemes/Pisces/_layout.styl

# 透明度参数 
opacity: 1;

48、配置全局，标题、文章、代码块等字体

主题配置文件：

# 配置站点文字：修改全局字体，标题字体、文章字体、logo字体、代码块字体
font:
  enable: true # false/true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used on <body> element.
  global:
    external: true
    family: Lato
    size:

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6).
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:
    size:

49 显示最近博客

参考:https://github.com/tea3/hexo-related-popular-posts

#cmd 进入博客根目录

#安装
npm install hexo-related-popular-posts --save

主题配置文件：

# 显示最近博客 :一个hexo插件，它生成到相关帖子或热门帖子的链接列表
related_posts:
  enable: true # false/true
  title: # Custom header, leave empty to use the default one ,自定义页眉，保留为空以使用默认页眉
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

文章中使用:

---
title: Hello World
tags:
  - program
  - diary
  - web
---
Welcome to [Hexo](https://hexo.io/)! This is a sample article. Let's add some tags as above.
...

50、添加主题动态背景图片

主题配置文件： 找到custom_file_path，将如图所示的代码取消注释

custom_file_path:
  style: source/_data/styles.styl #添加主题背景

站点根目录:新建文件 source/_data/styles.styl

// 添加背景图片
body {
      background: url(https://source.unsplash.com/random/1600x900?wallpapers);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

// 修改主体透明度
.main-inner {
      background: #fff;
      opacity: 0.8;
}

// 修改菜单栏透明度
.header-inner {
      opacity: 0.8;
}

51、hexo博客部署到远端的Github

cmd进入博客根目录

# cmd 进入本地博客根目录

#清除缓存
hexo clean
#先生成静态资源
hexo g
#本地启动博客测试-没有问题就发布到github上
hexo s
#发布到github，可能-提示 ERROR Deployer not found: git，安装hexo-deployer-git
hexo d

# 安装hexo-deployer-git
npm install hexo-deployer-git --save

# 需要重新执行前面的所有命令
#清除缓存
hexo clean
#先生成静态资源
hexo g
#本地启动博客测试-没有问题就发布到github上
hexo s
#发布到github，可能-提示 ERROR Deployer not found: git，安装hexo-deployer-git
hexo d

发布完成可以在浏览器中访问 github上的博客域名:

https://zhengjiaao.github.io/