女朋友看了我的博客，说太LOW了，于是我搞了一天~

持续原创输出，点击上方蓝字关注我

原创博客+1，点击左下角 阅读原文进入

目录

• 前言
• 如何下载？
• 配置文件的分类
• 基本信息配置
• 修改主题
• Next主题样式设置
• 添加动态背景
• 修改链接的样式
• 添加文章搜索功能
• 修改文章底部标签的 # 的样式
• 修改作者头像并旋转
• 修改的样式
• 添加全文阅读的按钮
• 添加站点访问人数计数
• 去掉文章目录标题的自动编号
• 主页文章添加阴影卡片效果
• 网站底部字数统计
• 设置网站的图标Favicon
• 添加文章字数统计功能
• 添加顶部动态加载条
• 文章设置置顶
• 文章加密访问
• 总结

前言

陈某的独立博客搭建已经有三年多时间了，使用 Hexo+ Git，一直使用的主题是 jacman，前几天女票看到说太LOW了，这哪能忍，必须换一个逼格高点的。

其实的三年前看到 jacman这个主题还是挺喜欢的，但是现在的看看确实不怎地，哎，老了….

今天这篇文章来介绍下一款简洁的主题 NEXT以及配置方式。先来上一张个人的博客的截图，如下：

如何下载？

NEXT这款主题源码都直接托管在GitHub上，可以直接搜索，下载地址： https://github.com/theme-next/hexo-theme-next.git。

下载源码之后，直接解压到博客的 themes的目录下，比如我的主题目录就是 G:\hexo\themes\next。

配置文件的分类

hexo搭建的博客有两个 yml配置文件，一个称之为 站点配置文件，是根目录下的 _config.yml，另一个是 主题配置文件，是主题目录下的 _config.yml文件。

基本信息配置

基本信息包括：博客标题、作者、描述、语言等等。这些基本信息的配置都在站点配置文件中。如下：

<span class="hljs-attr">title:</span> <span class="hljs-string">&#x6807;&#x9898;</span>
<span><span class="hljs-attr">subtitle:</span> <span class="hljs-string">&#x526F;&#x6807;&#x9898;</span>
<span><span class="hljs-attr">description:</span> <span class="hljs-string">&#x63CF;&#x8FF0;</span>
<span><span class="hljs-attr">author:</span> <span class="hljs-string">&#x4F5C;&#x8005;</span>
<span><span class="hljs-attr">language:</span> <span class="hljs-string">&#x8BED;&#x8A00;&#xFF08;&#x7B80;&#x4F53;&#x4E2D;&#x6587;&#x662F;zh-Hans&#xFF09;</span>
<span><span class="hljs-attr">timezone:</span> <span class="hljs-string">&#x7F51;&#x7AD9;&#x65F6;&#x533A;&#xFF08;Hexo</span> <span class="hljs-string">&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;&#x60A8;&#x7535;&#x8111;&#x7684;&#x65F6;&#x533A;&#xFF0C;&#x4E0D;&#x7528;&#x5199;&#xFF09;</span>
</span></span></span></span></span>

比如我的站点配置文件以上的配置如下：

<span><span class="hljs-attr">title:</span> <span class="hljs-string">&#x4E0D;&#x624D;&#x9648;&#x67D0;&#x6280;&#x672F;&#x535A;&#x5BA2;</span>
<span><span class="hljs-attr">subtitle:</span> <span class="hljs-string">&#x5FAE;&#x4FE1;&#x516C;&#x4F17;&#x53F7;&#xFF1A;&#x7801;&#x733F;&#x6280;&#x672F;&#x4E13;&#x680F;</span>
<span><span class="hljs-attr">description:</span> <span class="hljs-string">&#x672C;&#x7AD9;&#x662F;&#x4E0D;&#x624D;&#x9648;&#x67D0;&#x7684;&#x6280;&#x672F;&#x5206;&#x4EAB;&#x535A;&#x5BA2;&#x3002;&#x5185;&#x5BB9;&#x6DB5;&#x76D6;Java&#x540E;&#x7AEF;&#x6280;&#x672F;&#x3001;Spring</span> <span class="hljs-string">Boot&#x3001;&#x5FAE;&#x670D;&#x52A1;&#x67B6;&#x6784;&#x3001;&#x7CFB;&#x7EDF;&#x5B89;&#x5168;&#x3001;&#x524D;&#x7AEF;&#x3001;&#x7CFB;&#x7EDF;&#x76D1;&#x63A7;&#x7B49;&#x76F8;&#x5173;&#x7684;&#x7814;&#x7A76;&#x4E0E;&#x77E5;&#x8BC6;&#x5206;&#x4EAB;&#x3002;</span>
<span><span class="hljs-attr">author:</span> <span class="hljs-string">&#x4E0D;&#x624D;&#x9648;&#x67D0;</span>
<span><span class="hljs-attr">language:</span> <span class="hljs-string">zh-Hans</span>
<span><span class="hljs-attr">timezone:</span>
</span></span></span></span></span></span>

修改主题

hexo博客的主题很多，想要切换也是很简单，直接在 站点配置文件中设置即可，如下：

<span><span class="hljs-attr">theme:</span> <span class="hljs-string">next</span>
</span>

Next主题样式设置

Next主题提供了4种风格供我们选择，分别为 Muse、 Mist、 Pisces、 Gemini。

以上4种风格大同小异，作者博客的风格是 Gemini，大家可以根据自己的喜好任意切换，在 主题配置文件中找到 Scheme Settings，如下：

<span><span class="hljs-attr">scheme:</span> <span class="hljs-string">Gemini</span>
</span>

添加动态背景

动态背景能瞬间提升博客的逼格，实现的效果如下：

配置起来也是很简单，在 主题配置文件中，修改如下：

<span><span class="hljs-attr">canvas_nest:</span> <span class="hljs-literal">true</span>
</span>

修改链接的样式

默认的超链接的样式是灰色的，可以修改成如下效果：

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

// 文章内链接文本样式
<span><span class="hljs-selector-class">.post-body</span> <span class="hljs-selector-tag">p</span> <span class="hljs-selector-tag">a</span>{
<span>  <span class="hljs-attribute">color</span>: <span class="hljs-number">#0593d3</span>;
<span>  <span class="hljs-attribute">border-bottom</span>: none;
<span>  <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#0593d3</span>;
<span>  &:hover {
<span>    <span class="hljs-attribute">color</span>: <span class="hljs-number">#fc6423</span>;
<span>    <span class="hljs-attribute">border-bottom</span>: none;
<span>    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#fc6423</span>;
<span>  }
<span>}
</span></span></span></span></span></span></span></span></span></span>

其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页 阅读全文的显示样式,颜色可以自己定义。

添加文章搜索功能

搜索这个功能是很非常重要的，文章很多的情况下怎样才能快速筛选想要的文章呢？搜索的功能是少不了的。实现的效果如下：

Next主题添加搜索的功能很简单，首先安装搜索插件：

npm install hexo-generator-searchdb --save

插件安装完成之后在 站点配置文件中找到 Extensions，在其下面添加如下内容：

<span><span class="hljs-attr">search:</span>
<span>  <span class="hljs-attr">path:</span> <span class="hljs-string">search.xml</span>
<span>  <span class="hljs-attr">field:</span> <span class="hljs-string">post</span>
<span>  <span class="hljs-attr">format:</span> <span class="hljs-string">html</span>
<span>  <span class="hljs-attr">limit:</span> <span class="hljs-number">10000</span>
</span></span></span></span></span>

搜索功能很强大，但是第一次加载可能有点慢，大概十几秒的时间才能出来搜索框，没办法，毕竟是静态的。

修改文章底部标签的 #的样式

默认的文章标签的样式是带有 #这个符号的，比如 #Spring Boot，但是可以将 #修改成标签的 icon，效果如下：

实现方法很简单，修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 #换成 。

修改作者头像并旋转

修改头像很简单，找一张尺寸合适、自己喜欢的图片，放在 themes\next\source\images下，随后修改 主题配置文件，将头像重新设置即可，配置如下：

<span><span class="hljs-attr">avatar:</span> <span class="hljs-string">/images/header.jpg</span>
</span>

头像默认是不带旋转的，想要实现鼠标放在头像上方会自动旋转，只需要在 \themes\next\source\css\_common\components\sidebar\sidebar-author.styl文件下添加如下一段代码：

.site-author-image {
<span>  <span class="hljs-attr">display</span>: block;
<span>  margin: <span class="hljs-number">0</span> auto;
<span>  padding: $site-author-image-padding;
<span>  max-width: $site-author-image-width;
<span>  height: $site-author-image-height;
<span>  border: $site-author-image-border-width solid $site-author-image-border-color;
<span>
<span>
<span>  border-radius: <span class="hljs-number">80</span>px;
<span>  -webkit-border-radius: <span class="hljs-number">80</span>px;
<span>  -moz-border-radius: <span class="hljs-number">80</span>px;
<span>  box-shadow: inset <span class="hljs-number">0</span> <span class="hljs-number">-1</span>px <span class="hljs-number">0</span> #<span class="hljs-number">333</span>sf;
</span></span></span></span></span></span></span></span></span></span></span></span>

以上配置完成之后，将鼠标悬停在头像上方将会自动旋转起来。

修改的样式

Next默认的主题样式是灰色的，不太显眼，颜色也不太好看，可以将其设置成自己喜欢的颜色，效果如下：

配置起来也是很简单，只需要在 \themes\next\source\css\_custom\custom.styl文件中添加如下代码：

// <span class="hljs-selector-tag">Custom</span> <span class="hljs-selector-tag">styles</span>.

<span><span class="hljs-selector-tag">code</span> {
<span>    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ff7600</span>;
<span>    <span class="hljs-attribute">background</span>: <span class="hljs-number">#fbf7f8</span>;
<span>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">2px</span>;
<span>}
<span>// &#x5927;&#x4EE3;&#x7801;&#x5757;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x6837;&#x5F0F;
<span><span class="hljs-selector-class">.highlight</span>, <span class="hljs-selector-tag">pre</span> {
<span>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span> <span class="hljs-number">0</span>;
<span>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>;
<span>    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span>;
<span>}
<span><span class="hljs-selector-class">.highlight</span>, <span class="hljs-selector-tag">code</span>, <span class="hljs-selector-tag">pre</span> {
<span>    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#d6d6d6</span>;
<span>}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以上的颜色可以配置自己喜欢的，比如效果图中的颜色是我个人比较喜欢的。

添加全文阅读的按钮

Next主题默认是没有全文阅读按钮的，文章是全部展开形式的，但是可以设置成如下效果：

共有两种配置方法，分别如下：

1. 在 md 文件中需要折叠的地方添加 <!--more--> ，则在其下方的内容都将会折叠起来，只有点击 阅读全文 按钮才会显示出来。
2. 在 主题配置文件 中找到 auto_excerpt ，这个属性可以设置为自动折叠，比如设置成只显示 300 个字，这样的后面的内容就会折叠起来，配置如下：

<span class="hljs-attr">auto_excerpt:</span>
<span>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
<span>  <span class="hljs-attr">length:</span> <span class="hljs-number">300</span>
</span></span>

添加站点访问人数计数

站点访问计数有名的就是 不蒜子，使用起来非常方便，安装步骤也是很简单。

将如下的代码添加到 themes/next/layout/_partial/footer.swig文件中：

<div>
<span><span class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"</span>></span><span class="hljs-tag">script</span>></span></span>
<span><span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"busuanzi_container_site_pv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'display:none'</span>></span>
<span>    &#x672C;&#x7AD9;&#x603B;&#x8BBF;&#x95EE;&#x91CF; <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"busuanzi_value_site_pv"</span>></span><span class="hljs-tag">span</span>></span> &#x6B21;
<span>    <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"post-meta-divider"</span>></span>|<span class="hljs-tag">span</span>></span>
<span><span class="hljs-tag">span</span>></span></span>
<span><span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"busuanzi_container_site_uv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'display:none'</span>></span>
<span>    &#x6709;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"busuanzi_value_site_uv"</span>></span><span class="hljs-tag">span</span>></span>&#x4EBA;&#x770B;&#x8FC7;&#x6211;&#x7684;&#x535A;&#x5BA2;&#x5566;
<span><span class="hljs-tag">span</span>></span></span>
<span><<span class="hljs-regexp">/div>
</span></span></span></span></div>

添加的位置如下图，可自行根据个人喜好更换位置：

以上设置完毕后只是显示整个站点的次数，并没有显示每篇文章的访问次数，效果如下图：

如果想要显示每篇文章的访问次数，在 themes/next/layout/_macro/post.swig文件第一行增加 is_pv字段，如下：

{% macro render(post, is_index, is_pv, post_extra_class) %}

然后将这段代码插入到其中：

{% <span class="hljs-keyword">if</span> is_pv %}
<span>  <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"post-meta-divider"</span>>|<<span class="hljs-regexp">/span>
<span>  <span id="busuanzi_value_page_pv">span>&#x6B21;&#x9605;&#x8BFB;
<span>{% endif %}
</span></span></span></span></span>

插入的位置如下图：

然后再打开 themes/next/layout/post.swig，这个文件是文章的模板，给 render方法传入参数（对应刚才添加的 is_pv字段），如下图：

最后再打开 themes/next/layout/index.swig，这个文件是首页的模板，给 render方法传入参数（对应刚才添加的 is_pv字段），如下图：

至此即可配置成功，效果如下图：

去掉文章目录标题的自动编号

我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？

在 主题配置文件中找到 toc属性，将其中的 number属性设置成 false，如下：

<span class="hljs-attr">toc:</span>
<span>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
<span>  <span class="hljs-attr">number:</span> <span class="hljs-literal">false</span>
<span>  <span class="hljs-attr">wrap:</span> <span class="hljs-literal">false</span>
</span></span></span>

最终实现的效果如下图：

主页文章添加阴影卡片效果

添加阴影卡片效果的效果图如下：

实现方法只需要在 \themes\next\source\css\_custom\custom.styl文件中添加如下内容即可：

<span> .post {
<span>   margin-top: <span class="hljs-number">60</span>px;
<span>   margin-bottom: <span class="hljs-number">60</span>px;
<span>   padding: <span class="hljs-number">25</span>px;
<span>   -webkit-box-shadow: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">5</span>px rgba(<span class="hljs-number">202</span>, <span class="hljs-number">203</span>, <span class="hljs-number">203</span>, <span class="hljs-number">.5</span>);
<span>   -moz-box-shadow: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">5</span>px rgba(<span class="hljs-number">202</span>, <span class="hljs-number">203</span>, <span class="hljs-number">204</span>, <span class="hljs-number">.5</span>);
<span>  }
</span></span></span></span></span></span></span>

网站底部字数统计

实现的效果如下图：

首先切换到根目录，安装插件，命令如下：

npm install hexo-wordcount --save

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

<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"theme-info"</span>></span>
<span>  <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"powered-by"</span>></span><span class="hljs-tag">div</span>></span>
<span>  <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"post-count"</span>></span>&#x535A;&#x5BA2;&#x5168;&#x7AD9;&#x5171;{{ totalcount(site) }}&#x5B57;<span class="hljs-tag">span</span>></span>
<span><span class="hljs-tag">div</span>></span>

设置网站的图标Favicon

Next会有一个默认的网站图标，但是的我们可以替换成自己喜欢的，效果如下图：

实现方法很简单，自己设计一张喜欢的logo，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images里，并且修改 主题配置文件：

<span><span class="hljs-attr">favicon:</span> <span class="hljs-string">/favicon.ico</span>
</span>

添加文章字数统计功能

该功能能够为每篇文章计算字数以及阅读大致需要的时间，效果如下：

在根目录下安装 hexo-wordcount,执行命令如下：

npm install hexo-wordcount --save

安装完成后在 主题配置文件中的配置参数如下：

<span>
<span><span class="hljs-attr">post_wordcount:</span>
<span>  <span class="hljs-attr">item_text:</span> <span class="hljs-literal">true</span>
<span>  <span class="hljs-attr">wordcount:</span> <span class="hljs-literal">true</span>
<span>  <span class="hljs-attr">min2read:</span> <span class="hljs-literal">true</span>
</span></span></span></span></span>

添加顶部动态加载条

实现的效果如下图：

配置很简单，只需要在 主题配置文件中修改 pace属性为 true，如下：

<span class="hljs-attr">pace:</span> <span class="hljs-literal">true</span>

文章设置置顶

修改 hero-generator-index 插件，把文件： node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

;
<span><span class="hljs-keyword">var</span> pagination = <span class="hljs-built_in">require</span>(<span class="hljs-string">'hexo-pagination'</span>);
<span><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">locals</span>)</span>{
<span>  <span class="hljs-keyword">var</span> config = <span class="hljs-keyword">this</span>.config;
<span>  <span class="hljs-keyword">var</span> posts = locals.posts;
<span>    posts.data = posts.data.sort(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">a, b</span>) </span>{
<span>        <span class="hljs-keyword">if</span>(a.top && b.top) {
<span>            <span class="hljs-keyword">if</span>(a.top == b.top) <span class="hljs-keyword">return</span> b.date - a.date;
<span>            <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> b.top - a.top;
<span>        }
<span>        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(a.top && !b.top) {
<span>            <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
<span>        }
<span>        <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(!a.top && b.top) {
<span>            <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
<span>        }
<span>        <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> b.date - a.date;
<span>    });
<span>  <span class="hljs-keyword">var</span> paginationDir = config.pagination_dir || <span class="hljs-string">'page'</span>;
<span>  <span class="hljs-keyword">return</span> pagination(<span class="hljs-string">''</span>, posts, {
<span>    <span class="hljs-attr">perPage</span>: config.index_generator.per_page,
<span>    <span class="hljs-attr">layout</span>: [<span class="hljs-string">'index'</span>, <span class="hljs-string">'archive'</span>],
<span>    <span class="hljs-attr">format</span>: paginationDir + <span class="hljs-string">'/%d/'</span>,
<span>    <span class="hljs-attr">data</span>: {
<span>      <span class="hljs-attr">__index</span>: <span class="hljs-literal">true</span>
<span>    }
<span>  });
<span>};
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

在文章中添加 top 值，数值越大文章越靠前，如：

`

Original: https://www.cnblogs.com/Chenjiabing/p/13878059.html
Author: 爱撒谎的男孩
Title: 女朋友看了我的博客，说太LOW了，于是我搞了一天~