Hexo博客之NexT主题美化与配置详解

发表于 | 分类于 | | 阅读次数：
字数统计: 46k | 阅读时长 ≈ 42 mins.

目的

使博客界面更加美观，功能更加丰富以及更多个性化设置。

参考

Hexo官网

Theme选择

步骤

在右上角或左上角实现Fork me on github

效果图如下图所示

00002

具体实现方法

在GitHub Corners选择一款自己喜欢的挂饰，拷贝方框内的代码

00003

将刚刚复制的挂饰代码，添加到Blog/Hexo/themes/next/layout/_layout.swig文件中，添加位置如下图所示(放在<div class="headband"></div>下方)：

00004

添加RSS

实现效果图

00005

具体实现方法

切换到Blog文件夹(hexo init)下，并安装插件

1
2
cd [Blog]
npm install --save hexo-generator-feed

安装成功后，编辑Blog/_config.yml文件，在文件末尾添加

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

配置主题_config.yml文件，command+f搜索rss，在后面加上/atom.xml

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml //注意：有一个空格

00007

修改文章内链接文本样式

实现效果图

00008

具体实现方法

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

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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; //底部分割线颜色
  }
}

修改底部标签样式

实现效果图

00010

具体实现方法

修改Blog/Hexo/themes/next/layout/_macro/post.swig中文件，command+f搜索

rel="tag">#，将#替换成<i class="fa fa-tag"></i>。输入以下命令，查看效果：

1
2
hexo clean
hexo s

在文章末尾添加“文章结束”标记

实现效果图

00011

具体实现方法

在路径Blog/Hexo/themes/next/layout/_macro文件夹中新建passage-end-tag.swig文件，并填写如下代码：

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

打开Blog/themes/next/layout/_macro/post.swig，在post-body之后，post-footer之前(post-footer之前两个DIV)，添加以下代码：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置_config.yml文件，在末尾添加：

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

修改代码块自定义样式

具体实现方法

打开Blog/Hexo/themes/next/source/css/_custom/custom.styl，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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;
}

侧边栏社交小图标设置

实现效果图

图标可以去Font Awesome Icon网站，找到后复制名字到相应的位置即可

0012

具体实现方法

打开主题配置_config.yml文件，command+f搜索Social，将你的社交账号前面的#号去掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#social:
  GitHub: https://github.com/masslover || github
  E-mail: mailto:masslover009@163.com || envelope
  CSDN: https://blog.csdn.net/weixin_46110808 || envira
  微博: https://weibo.com/u/6440432628/home?topnav=1&wvr=6 || weibo
  #Gitee: https://gitee.com/ || heartbeat
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

主页文章添加阴影效果

实现效果图

0013

具体实现方法

打开Blog/Hexo/themes/next/source/css/_custom/custom.styl，向里面添加：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .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);
  }

在网站底部添加访问量

实现效果图

0014

具体实现方法

6.X后继承了busuanzi模块统计，只需要打开主题配置_config.yml文件编辑如下即可：

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

网站底部数字统计

具体实现方法

切换到根目录下，然后运行

1
$ npm install hexo-wordcount --save

运行完后在Blog/Hexo/themes/next/layout/_partials/footer.swig文件尾部添加：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

设置网站图标Favion

实现效果图

0015

具体实现方法

在图标网站找一张图标(大：32x32 小：16x16)大小可自定义，图标网站：easyicon或阿里巴巴矢量图标库。将下载下来的大图和小图放在Blog/Hexo/themes/next/source/images中，将默认的两张图片替换掉。修改主题配置_config.yml文件，如果自定义了图片名字，需要做如下修改：

1
2
3
4
favicon:
  small: /images/favicon-16x16-next.png  //16X16小图
  medium: /images/favicon-32x32-next.png  //32X32大图
  apple_touch_icon: /images/apple-touch-icon-next.png

实现文章统计功能

具体实现方法

在根目录下安装hexo-wordcount，运行：

1
$ npm install hexo-wordcount --save

然后在主题配置_config.yml文件中，配置如下：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

在文章底部增加版权信息

实现效果图

0016

具体实现方法

在目录Blog/Hexo/themes/next/layout/_macro下，添加文件my-copyright.swig，然后添加如下代码：

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
26
27
28
29
30
{% 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 src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</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');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
                    });
    });
    });  
</script>
{% endif %}

在目录Blog/Hexo/themes/next/source/css/_common/components/post下添加文件my-post-copyright.styl，然后添加如下代码：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.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: #b5b5b5;
  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: #a3d2a3;
  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;
}

修改Blog/Hexo/thems/next/layout/_macro/post.swig，在代码

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加如下代码：

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

修改Blog/Hexo/thems/next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

配置Blog/_config.yml文件为：

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://masslover.github.io/  //你的网站地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

保存即可。

点击爆炸效果

实现效果图

0017

具体实现方法

在Blog/Hexo/themes/next/source/js/src里面，新建一个fireworks.js文件，添加如下代码：

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)}"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)};

打开Blog/Hexo/themes/next/layout/_layout.swig，在</body>上面添加如下代码：

1
2
3
4
5
{% 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 %}

打开主题配置_config.yml文件，在里面最后添加：

1
2
# Fireworks
fireworks: true

添加侧栏友情链接

实现效果图

0018

具体实现方法

编辑主题配置_config.yml文件为：

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 友情链接
#links_layout: block
links_layout: inline
links:
  菜鸟教程: https://xxxxx
  自强学堂: https://xxxxx

添加站内搜索

实现效果图

0019

具体实现方法

安装hexo-generator-search

1
npm install hexo-generator-search --save

安装hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

编辑主题配置_config.yml文件，设置local_search的enable参数为ture

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # 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

修改文章链接

实现效果图

0020

具体实现方法

Hexo默认的文章链接形式为domain/year/month/day/postname，当我们把文章源文件名更改之后，链接也会更改，很不友好，并且四级目录，不利于SEO。

因此，使用hexo-abbrlink插件，生成文章永久链接，后期无论怎么修改源文件名，都不会更改该链接。

1
npm install hexo-abbrlink --save

配置Blog/_config.yml文件为：

1
2
3
4
permalink: post/:abbrlink.html
abbrlink: 
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex   # 进制：dec(default) and hex

结语

以上配置仅供参考，如有更好的主题美化方法，欢迎大家相互交流。

-------------本文结束感谢您的阅读-------------

本文标题:Hexo博客之NexT主题美化与配置详解

文章作者:Mass Lover

发布时间:2020年07月29日 - 11:07

最后更新:2020年09月09日 - 23:09

原始链接:https://masslover.github.io/post/6cd17aa5.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%