Hexo-配置NexT主题

一.导语

1.本文的主要内容

Windows平台基于Hexo搭建的个人博客，安装NexT主题，并配置相关的炫酷样式。样式设置结果可以直接查看本站。

2.准备：

NexT是什么？
个人为Hexo书写的一个主题，目前Github上Star最高的Hexo主题，支持几种不同的风格。官方使用文档
文章中的站点配置文件是什么？主题配置文件是什么？
在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在文章中，将前者称为站点配置文件，后者称为主题配置文件。

二.下载主题，启用主题

1.安装主题

直接下载：将主题文件下载好后，拷贝至站点目录的 themes 目录下。
git克隆：建议你使用克隆最新版本的方式，之后的更新可以通过 git pull 来快速更新，而不用再次下载压缩包替换。
1
2
cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

2.启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开 站点配置文件。找到 theme 字段，并将其值更改为 next。

3.验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 –debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：

1	INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000 ，检查站点是否正确运行。当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

三.设置主题样式

1.设定主题

选择 Scheme—Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持四种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 双栏 Scheme Pisces 的紧凑版本

打开 主题配置文件，Ctrl+F 搜素 Scheme Settings，将你需用启用的 scheme 前面注释 # 即可

2.设定语言

打开 站点配置文件，搜索 language 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1	language: zh-Hans

3.设定个人描述

打开 站点配置文件，搜索 Site，设置 title，subtitle，description。

4.设定圆形头像并旋转

打开 主题配置文件 ，搜索 avatar ，设置 avatar。你需要提前将你的头像图片放在themes\next\source\images中。

打开自己的主题文件夹下的themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件，将里面的CSS样式内容修改为为下面的代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  border-radius: 60%;
  transition: 2.5s all;  
}

.site-author-image:hover {
    transform: rotate(360deg);
}


.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

5.设定侧边栏的关于，标签，分类

① 创建三个页面，进入站点根目录，右击 Git Bash Here，输入下面的命令：

1
2
3

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

② 打开各页面对应的index.md文件，编辑如下内容，title和date是默认生成的，增加type即可。

---
title: about
date: 2019-06-25 19:16:17
type: "about"
---
 
---
title: about
date: 2019-06-25 19:16:17
type: "tags"
---
 
---
title: about
date: 2019-06-25 19:16:17
type: "categories"
---

③ 打开 站点配置文件 ，搜索 menu 找到如下配置项，将about、tags、categories前的#号去掉，开启关于、标签和分类。

④ 错误：hexo换next主题点击层边栏菜单的选项的时候，点进去为cannot GET /20%/，解决方法如图去掉空格。

⑤ 使用方式：一篇文章只能写一个分类，但是可以写多个标签。可以在post模板中写好模板。

6.设定侧边栏的文章当前浏览进度以及回到顶部

打开 主题配置文件 ，修改 b2t，scrollpercent，onmobile 为true。

7.设定侧边栏的 RSS

① 需要安装侧边栏插件，以管理员身份打开终端，cd进入自己的博客根目录输入以下安装命令：

1	npm install hexo-generator-feed --save

② 打开 站点配置文件 ，添加下面的代码：

plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20

③ 报错：npm安装插件时Error: EPERM: operation not permitted，权限问题，必须使用管理员身份打开终端。

8.设定侧边栏的联系方式

打开 主题配置文件 ，搜索 Social Links ，设置对应链接。（可以在图标库找自己喜欢的小图标，并将名字复制在如下位置）

9.设定侧边栏的推荐

① 打开 主题配置文件 ，搜索 links，设置对应链接。

② 解决推荐的内容显示在一行，打开自己的主题文件夹下的/themes/next/layout/_macro/sidebar.swig文件，和下面的修改方式相同。

10.设定侧边栏的搜索

① 安装hexo-generator-searchdb插件，和上一个插件的安装方式相同除了命令，输入以下命令：

1	npm install hexo-generator-searchdb --save

② 打开 站点配置文件 ，新增以下内容到任意界面：

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

③ 打开 主题配置文件 ，搜索 Local search 修改 enable 为 true。

④ 解决点击总是会弹出新的空白界面（about:blank）的问题，打开 站点配置文件 ，搜索 external_link 修改 enable 为 false。

11.设定侧边栏的 sitemap

① 安装针对百度和谷歌对应的插件，以管理员身份打开终端，cd进入自己的博客根目录输入以下安装命令：

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

② 打开 站点配置文件，添加下面的代码：

Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
    path: baidusitemap.xml
sitemap:
    path: sitemap.xml

③ 打开 主题配置文件，打开sitemap注释，添加baidusitemap代码。

12.设定侧边栏的 fork me on github

① 点击这里选择你喜欢的样式，然后复制相应的代码。

② 粘贴刚才复制的代码到自己的主题文件夹下的 themes/next/layout/_layout.swig 文件中,放在 <div class="headband"></div> 的下面，并把href改为你的github地址。

13.设定网站动态背景

① 打开自己的主题文件夹下的themes/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 %}

② 配置项说明：

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

③ 打开 主题配置文件，修改 canvas_nest 为 true。

14.设定网站点击出现桃心效果

① 新建一个js文件，取名为 love.js。里面的内容如下：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: 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);

② 将love.js文件放在个人主题文件夹下面的 themes/next/source/js/src里面。打开个人主题文件夹中 themes/next/layout/_layout.swig 文件，在末尾（在前面引用会出现找不到的bug）添加下面的代码：

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

15.设定首页文章不显示全文

① 打开 主题配置文件，将 auto_excerpt 下面的 enable 的值，改成 true。

② 直接在编辑的文章中添加  标记。这样只会显示  标记之前的那部份。

16.设定文章字数统计，阅读时长，网站总字数统计

① 安装插件，以管理员身份打开终端，cd进入自己的博客根目录输入以下安装命令：

1	npm i --save hexo-wordcount

② 打开 主题配置文件，搜索 post_wordcount，打开对应计数的统计功能。

③ 打开自己的主题文件下的 themes/next/layout/_macro/post.swig文件，按照下图添加 字 和 分钟。

17.设定文章链接样式

打开个人主题文件夹下面的themes/next/source/css/_common/components/post/post.styl文件，在末尾添加如下css样式：

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

18.设定文章行内代码块样式

打开个人主题文件夹下面的 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;
}

19.设定文章打赏功能

打开站点配置文件，找到# Reward把wechatpay:和alipay:前面的#号删除。然后将自己的二维码文件wechatpay.jpg、alipay.jpg图片放入个人主题文件夹下的themes/next/source/images文件夹中即可。

20.设定文章版权信息

① 在个人主题文件夹下的 themes/next/layout/_macro/ 文件夹下建立 my-copyright.swig文件，填入下面的代码：

{% 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 %}

② 在个人主题文件夹下的 themes/next/source/css/_common/components/post/ 文件夹下建立 my-post-copyright.styl文件。

.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;
}

③ 打开个人主题文件夹下的 themes/next/layout/_macro/post.swig文件，在如下图的位置添加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

④ 打开个人主题文件夹下的 themes/next/source/css/_common/components/post/post.styl文件，在最后一行增加如下代码：

1	@import "my-post-copyright"

⑤ 在需要添加版权的文章中，添加copyright: true。

21.设定文章结束标志

① 打开个人主题文件夹下的 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之前添加如下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

③ 打开主题配置文件，在末尾添加如下代码：

1
2
3

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

22.设定文章结尾#标签

打开个人主题文件夹下的 themes/next/layout/_macro/post.swig文件，搜索rel="tag"，将后面的#换成：

1	<i class="fa fa-tag"></i>

23.设定文章隐藏网页底部 powered By Hexo / 强力驱动

打开个人主题文件夹下的 themes/next/layout/_partials/footer.swig文件，使用隐藏符号之间的代码即可，或者直接将这段代码删除。

24设定文章分页显示

① 打开 站点配置文件，搜索index_generator，设置如下：

index_generator:
  path: ''
  per_page: 6
  order_by: -date

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

② 各项意义：

1
2
3

index_generator:是设置主页显示多少篇文章开始分页
archive_generator:是设置归档主页显示多少篇文章开始分页
tag_generator:是指底分页条显示多少个分页的链接

③ 我这里遇到一个问题，我上一页，下一个页的图标没有显示，显示的是<i>标签里面的东西。所以我找到对应的位置，修改其为我想要的文字。

25.设定文章评论功能

① 首先要去leanCloud注册一下，然后实名认证。创建一个应用，复制应用的AppID和AppKey。

② 拿到AppId和AppKey之后，打开主题配置文件，搜索valine，修改enable，填入AppId和AppKey。

③ 在Leancloud -> 设置 -> 安全中心 -> Web 安全域名把你的域名加进去。

④ 配置某个页面是否显示评论，通过在对应页面设置 comments的值。

26.设定文章显示热度

① 打开个人主题文件夹下的 themes/next/layout/_macro/post.swig，在如图所示位置添加<span>℃</span>。

② 打开个人主题文件夹下的 themes/next/languages/zh-Hans.yml文件，在如图所示位置改为热度。

③ 打开 主题配置文件 ，搜索 leancloud_visitors，将 enable 改成 true，再填上之前在leanCloud创建的应用的的app_id和app_key。

*④ 在此之前，还创建一个名为 Counter 的Class，一定要设置ACL权限，所有人可读，只有数据创建者可写。这样子才会显示热度。 *

27.设定站点 favicon图标

① 利用在线制作ico网站快速制作一个32×32的favicon.ico文件，并放入个人主题文件夹下面的themes/next/source/images文件夹中。

② 打开 主题配置文件，搜索favicon，设置medium为下图对应的内容。

① 通用的方式，

28.设定站点访客数

① 打开个人主题文件夹下的 \themes\next\layout\_partials\footer.swig 文件，加入下面两段代码

1	<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>