Hexo Next 主题启用及相关设置

用于备份个人所用设置，有些方案收集自互联网。

主题下载并启用

进入命令行，下载 NexT 主题，输入：

git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站点配置文件 _config.yml，找到如下代码：

## Themes: https://hexo.io/themes/
theme: landscape

将 landscape 修改为 next 即可。

修改语言

打开站点配置文件，搜索 language，找到如下代码：

author:
language:
timezone:

在 language 后面输入 zh-CN。

注意：冒号后面必须有一个空格。

新建标签及分类界面

打开 主题配置文件，搜索 menu，找到如下代码：

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

把 tags 和 categories 前面的 # 删除，进入命令行，输入：

hexo n page tags
hexo n page categories

进入博客主目录 Hexo/source，找到 tags 和 categories 文件夹，分别进入并修改文件夹内的文件。例如，先进入 tags 文件夹，打开 index.md 文件，在 date 下一行输入：

type: "tags"

修改 categories 文件夹下的文件时，只需把上面的 tags 代码改成 categories 即可。

切换主题

next 主题自带四种样式。

在主题配置文件 /next/_config.yml 中查找：scheme，找到如下代码：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

选择你喜欢的一种样式，去掉前面的 #，其他主题前加上 # 即可。

隐藏网页底部 powered By Hexo / 强力驱动

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

找到：

{% if theme.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} – {#
  #}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

把这段代码首尾分别加上：<!-- 和 -->，或者直接删除。

文章添加阴影

打开 /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);
  }

浏览页面显示当前浏览进度

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false 改为 true。

Local Search本地搜索

在站点的根目录下执行以下命令：

npm install hexo-generator-searchdb --save

编辑站点配置文件，新增以下内容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索功能：

# Local search
local_search:
  enable: true

设置个人头像

打开 主题配置文件，找到 Sidebar Avatar 字段：

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: #/images/avatar.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

将 url 后面的 # 删掉，然后把你的头像命名为 avatar.jpg 放入 themes/next/source/images 中

rounded ：设置头像为圆形

opacity ：设置头像的不透明度

rotated ：设置头像可旋转

设置站点建立时间

在 主题配置文件 中，搜索：since，修改 since 后面的值即可，例如：

since: 2013

设置网站图标

在 EasyIcon 中找一张（32*32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

修改文章底部的 # 号的标签

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel="tag">#，将 # 换成 <i class="fa fa-tag"></i>

网站底部字数统计

切换到根目录下，运行如下代码：

npm install hexo-wordcount --save

然后在 /themes/next/layout/_partials/footer.swig 文件尾部加上：

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

添加点击爱心效果

在 /themes/next/source/js/src 下新建文件 clicklove.js，接着把如下代码复制粘贴到 clicklove.js 文件中，代码如下：

!function(e,t,a){function n(){c(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 hemes extlayout\_layout.swig 文件末尾添加：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

点击爆炸效果

方法和那个点击出现爱心效果是差不多的，首先在 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，在 </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

动态背景

next 主题在 5.1.1 以上

打开 next/layout/_layout.swig 文件

在 </body> 之前添加如下代码，不要放在 </head> 的后面：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开主题配置文件 /next/_config.yml

搜素 canvas_nest，将 false 改为 true 即可。

next 主题在 5.1.1 以下

打开 next/layout/_layout.swig 文件

在 </body> 之前添加如下代码，不要放在 </head> 的后面：

{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开主题配置文件 /next/_config.yml

在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

配置项说明

• color ：线条颜色, 默认: '0,0,0'；三个数字分别为 (R,G,B)
• opacity: 线条透明度（0~1）, 默认: 0.5
• count: 线条的总数量, 默认: 150
• zIndex: 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1

修改文章不透明度

设置了动态背景后，动态线条会干扰到文章的阅读，所以就需要调整文章背景的不透明度了。

修改 themes extsourcecss _customcustom.styl 文件，在后面添加如下代码：

.main-inner { 
    margin-top: 60px;
    padding: 60px 60px 60px 60px;
    background: #fff;
    opacity: 0.8;
    min-height: 500px;
}

配置项说明

background: #fff; 白色
opacity: 0.8; 不透明度

自动更换背景图片

和修改动态背景类似。

自动更换背景是修改添加背景的 css 样式来实现。图片来源是：

https://source.unsplash.com/

这个网站不仅免费提供了很多高清美图，而且还提供 api 接口调用，非常良心。这里实现的原理也是调用了这个网站的接口。

修改 themes extsourcecss _customcustom.styl 文件，添加以下代码：

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

如果不喜欢这个网址提供的图片做背景，可以修改url()里面的路径。repeat、attachment、position 就是调整图片的位置、不重复出现、不滚动等等。

静态背景

打开博客根目录 /themes/next/source/css/_custom/custom.styl 文件，编辑如下：

// Custom styles.
body { 
    background-image: url(/images/background.png);
    background-attachment: fixed; // 不随屏幕滚动而滚动
    background-repeat: repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
    background-size: contain; // 等比例铺满屏幕
}

然后将背景图命名为 background.png 并放入主题根目录 source/images 下。

修改主题颜色

找到 博客根目录 hemes extsourcecss\_customcustom.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; 
    } 
}

// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection { 
    background: #49b1f5;
    color: #fff; 
}
/* firefox */
::-moz-selection { 
    background: #49b1f5;
    color: #fff;    
}

// 修改网站头部颜色
.headband {
    height: 3px;
    background: #49b1f5;
}
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: #49b1f5;
}
.site-subtitle {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

// 修改按键（button）样式
.btn {
    color: #49b1f5;
    background: #fff;
    border: 2px solid #49b1f5;
}

// 按键（button）点击时样式
.btn:hover {
  border-color: #49b1f5;
  color: #fff;
  background: #49b1f5;
}

// 鼠标移动至文章标题时的效果
.posts-expand .post-title-link::before {
    content: "";
    position: absolute;
     100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #49b1f5;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}