【教程】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 /theme-next/theme-next-three source/lib/three

然后还是在主题配置文件next/_config.yml中找到

# JavaScript 3D library.# Dependencies: /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: /Fitz1318 || copyrightGitHub: /Fitz1318 || githubZhihu: /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: /Fitz1318 || Follow me on GitHub# Blog rolls #这里时设置一些相关链接 我这里设置了一些推荐阅读的网站#links_icon: linklinks_title: 实用网站#links_layout: blocklinks_layout: inlinelinks:W3Cschool: /改图宝: /程序员的工具箱: 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: truetime: true# 网页底部是否显示total_symbols: truetotal_time: true

10 设置网站的图标Favicon

favicon: #这里配置站点的站标small: /images/plane.pngmedium: /images/plane.pngrss:footer: #网站的页脚设置since: #网站的开始运行时间# 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 # 是否邮件推送 详情看 /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="///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

参考文章：

/marvinboy/article/details/83350437

/hexo的next主题个性化配置教程.html

https://www.simon96.online//10/12/hexo-tutorial/