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

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

主题优化

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

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

1 添加动态背景

在主题配置文件中找到

canvas_nest:enable: trueonmobile: true # display on mobile or notcolor: '0,0,255' # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 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: truelength: 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: falseopacity: 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 || copyrightGitHub: https://github.com/Fitz1318 || githubZhihu: https://www.zhihu.com/people/fitz-99/activitiessocial_icons:  #这里是上面社交链接的对应图标enable: trueCSDN: copyrightGithub: githubZhihu: zhihuicons_only: falsetransition: 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-ncsidebar: falsepost: true

12 添加Valine评论系统

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

valine:enable: true # 开启评论appid:  ~~~  # 你的 leancloud 的 appidappkey:  ~~~ # 你的 leancloud 的 appkeynotify: false # 是否邮件推送 详情看 https://github.com/xCss/Valine/wikiverify: false # placeholder: Just go go # 评论框里的placeholder信息avatar: mm # gravatar styleguest_info: nick,mail,link # custom comment headerpageSize: 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 1border_radius:# Add copy button on codeblockcopy_button:     #增加复制按钮开关enable: true# Show text copy resultshow_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/