Next主题个性化设置

一晃半月,接着上次的搭建博客教程,写写 Hexo 的个性化设置,资料、方法来源于互联网,跟着各位大神学到了很多,不敢私藏。

先说说 阅读全文 这个小功能。官方给出了三种方法:

  1. 在文章中使用 <!--more--> 手动进行截断
    这种方法可以根据文章的内容,自己在合适的位置添加 <!--more--> 标签,使用灵活,也是Hexo推荐的方法。

    1
    2
    3
    先说说 阅读全文 这个小功能。官方给出了三种方法:
    <!-- more -->
    添加动态背景
  2. 在文章中的 front-matter 中添加 description ,并提供文章摘录。
    这种方式只会在首页列表中显示文章的摘要内容,进入文章详情后不会再显示。

    1
    2
    3
    4
    title: Next主题个性化设置
    date: 2017-06-1 12:20:21
    tags: "Hexo"
    description: "这是文章简介"
  3. 自动形成摘要,在 主题配置文件 中添加。默认截取的长度为 150 字符,可以根据需要自行设定

    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150
在左上角或者右上角添加 Fork me on Github

前人修路,后人铺桥,已经有大神做好了这方面的工作,我们要做的只是选择自己喜欢的样式。选择自己喜欢的样式,并复制代码,以下是我使用的样式代码:

1
<a href="https://github.com/cangxin"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>

将复制的代码粘贴到 themes/next/layout/_layout.swig 文件中,放在 <div class="headband"></div> 下面,然后把 a标签的 href 改为自己的 github 地址,OK!
添加动态背景

如果 Next 主题的版本是 5.1.1 以上(包括5.1.1),那就直接在 主题配置文件 中找到 Canvas_nest: false,把 false 改为 true 即可。查看主题版本:打开 themes/next/_config.yml,搜索 #Theme version 查看即可。

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
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

Hexo内置了很多种动画,选择一个自己喜欢的,设为 true即可。

如果主题不是5.1.1以上的呢,往下看:

修改 _layout.swig

打开next/layout/_layout.swig,在</body>之前添加(注意:不要放在</head>的后面)如下代码:

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改配置文件

打开next/_config.yml,添加如下代码:

1
2
3
4
5
6
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

到此,配置完成,重新编译之后就可以预览了。

如果感觉默认的线条太多(密集恐惧症):

在修改 _layout.swig时,可以把代码替换为:

1
2
3
{% 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:线条颜色。默认为RGB颜色: 0,0,0
  • opacity:线条透明度(0 ~ 1)。默认:0.5
  • count:线条的默认总量。默认:150
  • zIndex:背景的 z-index 属性,控制所在层的位置。默认:-1
文章添加阴影效果

打开 themes/next/source/css/_custom/custom.styl,添加如下(当然,也可以自定义)样式:

1
2
3
4
5
6
7
.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);
}

添加RSS

安装插件hexo-generator-feed。根目录运行如下代码:

1
npm install --save hexo-generator-feed

修改站点配置文件,也就是根目录的_config.yml,在末尾添加:

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

然后打开主题配置文件,也就是主题目录下的_config.yml,搜索rss,配置:

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

然后重新编译,你就会在 public 文件夹中看到 atom.xml 文件。启动本地服务器 >>验证,然后部署。

修改文章底部标签

默认每篇文章底部都显示一个带#号的标签(如果你给文章设置了标签)。不够美观,改!
打开 themes/next/layout/_macro/post.swig,搜索 rel="tag",将 # 替换为 <i class="fa fa-tag"></i>

在网站底部添加访问量

打开 themes/next/layout/_partials/footer.swig 文件,在 <div class="copyright"></div> 前面(也就是顶部)添加:

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后还是这个文件,在合适的地方添加显示统计量的代码:

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

在这里有两种不同计算方式的统计代码:

  1. pv 方式,单个用户点击多篇文章,记录多次访客量。

    1
    2
    3
    <span id="busuanzi_container_site_pv">
    本站访客数<span id="busuanzi_value_site_pv"></span>
    </span>
  2. uv 方式,单个用户点击多篇文章,只记录一次访客量。

    1
    2
    3
    <span id="busuanzi_container_site_uv">
    本站访客数<span id="busuanzi_value_site_uv"></span>
    </span>
在网站底部添加字数统计

根目录安装插件:

1
npm install hexo-wordcount --save

然后在这个文件尾部加上:

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

隐藏网页底部由 Hexo 强力驱动 | 主题 - NexT.Mist

不推荐这么做,毕竟是免费的,这样岂不是打击了开源积极性。当然,选择自由,给出方法。

还是这个文件,使用 HTML注释 隐藏如下代码即可,或者直接删除。

1
2
3
4
5
6
7
8
9
10
11
<!--
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>
-->

字数统计和阅读时长

安装插件hexo-wordcount。根目录运行如下代码:

1
npm install hexo-wordcount --save

然后在主题配置文件中搜索 post_wordcount ,配置如下:

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

添加热度

Next 集成了 leanCloud ,我们可以直接注册 leanCloud 并配置即可。打开 themes/next/layout/_macro/post.swig ,搜索 leancloud-visitors-count,在 这个标签下面添加一个 span 标签,并写入 符号。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{__('post.visitors')}}</span>
{% endif %}
<span class="leancloud-visitors-count"></span>
<span></span>
</span>
{% endif %}

然后打开 themes/next/languages/zh-Hans.yml 文件(前提是你将语言设置为了 zh-Hans ,在 站点配置文件 中搜索 language 进行查看。),将 visitors 对应的翻译改为 热度 即可。

修改文章内链接悬停样式

打开 themes/next/source/css/_common/components/post/post.styl 文件,在末尾添加如下样式:

1
2
3
4
5
6
7
8
9
10
.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 是为了不影响标题,选择 p 是为了不影响首页 阅读全文 的显示样式,当然,样式可以自定义。比如:颜色。

0%