【教程】Hexo+Coding搭建自己的博客网站系列5-Next6.7版本主题深度美化

在我进行主题优化的时候，参考了网上很多文章，但是随着Next版本的变迁，越来越多个性化设置已经被集成到Next中。所以我写了这篇关于Next6.7版本主题优化的方案。有时间和精力的话，这篇文章也会随着Next版本变迁持续更新.欢迎浏览我的博客https://fitz1318.top

主题优化

本文中介绍的主题优化主要是以下14种

• 添加动态背景
• 修改文章内链接文本样式
• 文章不展示全文显示摘要
• 修改文章底部的那个带#号的标签
• 在每篇文章末尾统一添加“本文结束”标记
• 修改作者头像并旋转
• 修改``代码块自定义样式
• 侧边栏社交设置和友情链接
• 增加页面阅读统计,字数统计,阅读时长
• 设置网站的图标Favicon
• 在文章底部增加版权信息
• 添加Valine评论系统
• 点击爆炸效果
• 内容页里的代码块新增复制按钮

1 添加动态背景

在主题配置文件中找到

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 90 # the number of lines

将enable改为true即可。
如果还想要实现波浪的等背景，首先需要在站点目录下打开Git bash，键入命令git clone https://github.com/theme-next/theme-next-three source/lib/three
然后还是在主题配置文件next/_config.yml中找到

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
# 点点波浪(像海面)cpu占用极高
three_waves: true
# canvas_lines
# 点线几何体,占用最低(还是高)
canvas_lines: false
# canvas_sphere
# 球上凸点(柱?)占用高
canvas_sphere: false

想用哪一个就将其设置为true即可。

2 修改文章内链接文本样式

具体方法是修改文件themes\next\source\css\_common\components\post\post.styl，在末尾添加

// 文章内链接文本样式
.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;
  }
}

其中选择.post-body是为了不影响标题，a是为了不影响”阅读全文“的显示样式。

3 文章不展示全文显示摘要

修改/themes/next/_config.yml中

scroll_to_more: true        #如果文章有摘要,会自动滚动到摘要下面
save_scroll: true           #通过cookies来缓存阅读进度
excerpt_description: true   #自动摘录描述作为序言
auto_excerpt:               #设置阅读全文
  enable: true
  length: 150               #摘要次数
read_more_btn: true         #阅读全文按钮

4 修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将 # 换成<i class="fa fa-tag"></i>,tag的更多设置在themes/next/source/css/_common/components/tag-cloud.styl中可以修改样式

.tag-cloud {   //设置标签
  text-align: center;     //展示位置，左、中、右

  a {
    display: inline-block;
    margin: 10px;         //字体大小
  }

  a:hover {
    color: $link-hover-color !important;
  }
}

5 在每篇文章末尾统一添加“本文结束”标记

在路径 \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>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

6 修改作者头像并旋转

位置在/themes/next/_config.yml

avatar:
  url: /images/avatar.png  #这里设置自己的头像
  rounded: false
  opacity: 1  #不透明度
  rotated: false  #true为开启旋转

7 修改``代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

8 侧边栏社交设置和友情链接

修改/themes/next/_config.yml

site_state: true

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  CSDN: https://blog.csdn.net/Fitz1318 || copyright
  GitHub: https://github.com/Fitz1318 || github
  Zhihu: https://www.zhihu.com/people/fitz-99/activities

social_icons:  #这里是上面社交链接的对应图标
  enable: true
  CSDN: copyright
  Github: github
  Zhihu: zhihu
  icons_only: false
  transition: true

# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
#github_banner: https://github.com/Fitz1318 || Follow me on GitHub

# Blog rolls  #这里时设置一些相关链接 我这里设置了一些推荐阅读的网站
#links_icon: link
links_title: 实用网站
#links_layout: block
links_layout: inline
links:
  W3Cschool: http://www.w3school.com.cn/
  改图宝: http://www.gaitubao.com/
  程序员的工具箱: https://tool.lu/

9 增加页面阅读统计,字数统计,阅读时长

在站点目录下键入命令npm install hexo-symbols-count-time --save,然后打开主题配置文件/themes/next/_config.yml搜索busuanzi_count并修改

busuanzi_count:
  enable: false                #设true 开启
  total_visitors: true         #总阅读人数 uv数
  total_visitors_icon: user    #阅读总人数的图标
  total_views: true            #总阅读次数 pv数
  total_views_icon: eye        #阅读总次数的图标
  post_views: true             #开启内容阅读次数
  post_views_icon: eye         #内容页阅读数的图标

同时搜索并修改symbols_count_time

symbols_count_time:        #字数与阅读时间统计设置
  separated_meta: true     # false 会显示一行
  item_text_post: true     # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
  item_text_total: true    #底部footer是否显示字数统计属性文字
  awl: 4                   #计算字数的一个设置,没设置过
  wpm: 275                 #一分钟阅读的字数

最后在站点配置文件_config.yml中新增如下代码

#显示阅读时间
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

10 设置网站的图标Favicon

favicon:       #这里配置站点的站标
small: /images/plane.png
medium: /images/plane.png
rss:
footer:        #网站的页脚设置
since: 2019    #网站的开始运行时间
# Icon between year and copyright info.
icon:
  name: heart  #年份和版权之间的图标
  # If you want to animate the icon, set it to true.
  animated: true
  # Change the color of icon, using Hex Code.
  color: "ff0000"
  ```
  ```

11 在文章底部增加版权信息

在/themes/next/_config.yml中搜索并修改

creative_commons:      #设置版权原创声明的地方
  license: by-nc
  sidebar: false
  post: true

12 添加Valine评论系统

点击官网leancloud注册账号,获取自己的appid,appkey,再看valine官网设置下自己的leancloud
在祖逖配置文件中/themes/next/_config.yml修改

valine:
  enable: true # 开启评论
  appid:  ~~~  # 你的 leancloud 的 appid
  appkey:  ~~~ # 你的 leancloud 的 appkey
  notify: false # 是否邮件推送 详情看 https://github.com/xCss/Valine/wiki
  verify: false # 
  placeholder: Just go go # 评论框里的placeholder信息
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # 一页显示的评论条数
  visitor: false # 

13 点击爆炸效果

首先在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)};

打开themes/next/layout/_layout.swig,在上面写下如下代码：

{% 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: true

14 内容页里的代码块新增复制按钮

打开主题配置文件，在里面搜索,并作适当修改

codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius:
  # Add copy button on codeblock
  copy_button:     #增加复制按钮开关
    enable: true
    # Show text copy result
    show_result: true

参考文章：
https://blog.csdn.net/marvinboy/article/details/83350437
http://shenzekun.cn/hexo的next主题个性化配置教程.html
https://www.simon96.online/2018/10/12/hexo-tutorial/