Hexo博客之主题美化

据说 NexT 是使用最多的Hexo主题,原因当然是比较漂亮啦!这个项目托管于github上,你可以fork一下,贡献代码。NexT官网上面给出了详细的主题配置过程,这里只是我的博客使用的一些配置以及NexT网站上配置中需要补充的部分。如果你是从头开始配置,请参考NexT官网。这篇文章介绍NexT主题的主题配置、第三方服务、内建标签、个性化设置等,通过这篇文章你就可以让你的博客个性十足奥!

  • 站点配置文件:.config.yml 位置:站点根目录下(主要用于Hexo相关 配置的选项)
  • 主题配置文件:.config.yml 位置:主题目录下 (主要用于配置主题相关的选项)

主题配置

显示RSS

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改主题配置文件,设定 rss 字段的值:

  • false:禁用 RSS,不在页面上显示RSS连接。
  • 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed插件。
  • 具体的链接地址:适用于已经烧制过 Feed 的情形。

我们这里选择使用 Hexo 生成的 Feed 链接,进入博客所在文件夹,执行以下命令安装该插件:

1
npm install hexo-generator-feed --save

可能别的博客与我写的不一样,需要配置一些文件。但是我做过实验,只要安装好该插件,重新生成和部署,就可以显示RSS。

侧边栏社交图标设置

NexT网站已经告诉我们如何为博客添加社交链接并设定链接图标,但是我们国内一些常用的社交网站如知乎、豆瓣等在 Font Awesome 图标库中没有对应的图标,结果就是我们添加的这些社交链接图标都是默认的。在主题配置文件中,设定链接图标对应的字段是 social_icons, 其键值格式是 匹配键名: 图标名称图标名称 就是对应的 Font Awesome 图标的名字(不必带 fa- 前缀)。实现方法:到 Font Awesome 图标库中找寻找喜爱的图标,复制图标的名字替换下面代码箭头处的默认图标名字即可。如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/username
知乎: https://www.zhihu.com/people/feng-di-54-18/activities

social_icons:
enable: true
icons_only: false
transition: false
# Icon Mappings.
# KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
GitHub: github <---
知乎: heart-o <---
更改内容区域宽度

浏览文章时发现页面两侧的空白太多,导致文章的宽度比较窄,一行代码如果显示不完整的话,就需要左右拖动才能查看整行代码,对于代码比较多的文章看起来就会比较累。因此可以改变内容区域的宽度,NexT 对于内容的宽度的设定如下:

  • 700px,当屏幕宽度 < 1600px
  • 900px,当屏幕宽度 >= 1600px
  • 移动设备下,宽度自适应

如果你需要修改内容的宽度,需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件,新增变量:

1
2
3
4
5
// 修改成你期望的宽度
$content-desktop = 700px // 我的为800px,自己调整测试即可

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

注意:此方法不适用于 Pisces Scheme,关于如何修改 Pisces Scheme 的宽度请参看 Issue

第三方服务

评论系统

NexT支持多款评论系统,其网站给了五个评论系统,除此之外还支持多说、畅言等评论系统。就网站给出的五个评论系统来说,推荐使用DISQUS或者来必力,设置都比较简单。网易云跟帖相当好用,而且在国内,加载速度较快,但是八月一日被官方关闭。

DISQUS

支持DISQUSGoogletwitterFacebook等账户登录评论,也可设置匿名评论,只需要输入名字和邮箱即可。

  • 登录 DISQUS ,网站会引导你添加一个站点进行配置,在其Settings中的General选项中,找到shortname

    shortname

  • 编辑主题配置文件, 将 disqus 下的 enable 设定为 true,同时提供您的 shortnamecount 用于指定是否显示评论数量。

    1
    2
    3
    4
    disqus:
    enable: false
    shortname:
    count: true

来比力

韩国产品,支持QQ、微信、百度、微博、Github、Google、Facebook、twitter等多个国内外账户登录,无导入评论功能。

  • 登陆 来比力 ,选择安装 LiveRe City 版,添加站点,在其管理页面代码管理中获取你的 LiveRe UID 。

    来比力

  • 编辑主题配置文件, 编辑 livere_uid 字段,设置如下:

    1
    livere_uid: #your livere_uid
数据统计分析

NexT提供多种数据统计与分析系统,可以实现对网站的访客、流量、文章评论数及浏览量进行统计,推荐使用百度统计与LeanCloud。

百度统计

百度统计是百度推出的一款免费的专业网站流量分析工具,可以帮助用户改善访客在用户的网站上的使用体验,不断提升网站的投资回报率。目前百度统计提供的功能包括:趋势分析、来源分析、页面分析、访客分析、定制分析等多种统计分析服务。实现方法:

  • 登录 百度统计,定位到站点的代码获取页面
  • 复制 hm.js? 后面那串统计脚本 id
  • 编辑主题配置文件,修改字段 baidu_analytics,值设置成百度统计脚本 id

LeanCloud

通过 LeanCloud提供的JavaScript SDK 功能实现文章阅读量统计。

实现方法:请查看 为NexT主题添加文章阅读量统计功能

内容分享服务

推荐JiaThis,可以将文章分享到很多平台。

JiaThis

编辑主题配置文件,添加/修改字段 jiathis,值为 true

1
2
# JiaThis 分享服务
jiathis: true
搜索服务

Local Search

添加百度/谷歌/本地 自定义站点内容搜索,PC段表现正常,在手机端搜索框显示正常,点击无反应。

  • 安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

    1
    npm install hexo-generator-searchdb --save
  • 编辑站点配置文件,新增以下内容到任意位置:

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  • 编辑主题配置文件,启用本地搜索功能:

    1
    2
    3
    # Local search
    local_search:
    enable: true

内建标签

文本居中的引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。

使用方式:

  • HTML方式:使用这种方式时,给 img 添加属性 class="blockquote-center" 即可。
  • 标签方式:使用 centerquote 或者 简写 cq
1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

效果实例:

千里之行,始于足下。
Bootstrap Callout

这些样式出现在 Bootstrap 的官方文档中,效果很好看。使用方式:

1
{% note class_name %} Content (md partial supported) {% endnote %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

效果实例:

敏而好学,不耻下问。

尽信书,不如无书。

设置阅读全文

在文章中使用 <!-- more --> 手动进行截断,实现设置阅读全文功能。还有其他方法可以实现设置阅读全文功能,详情参考 NexT

注意:建议使用 <!-- more -->,除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

个性化设置

上面关于NexT主题有关的配置,都是NexT网站上有的配置,我只是总结了几个常用的而已,下面我们给大家几个NexT网站上没有的个性化配置,而且效果相当好。

添加热度

NexT主题集成leanCloud,打开/themes/next/layout/_macro/post.swig, 搜索leancloud-visitors-count, 添加以下内容:

1
2
<span class="leancloud-visitors-count"></span>  // 在此处后面添加
<span></span>

打开/themes/next/languages/zh-Hans.yml, 将visitors的内容改为热度即可。

文章加密访问

打开/themes/next/layout/_partials/head.swig, 在meta标签后面插入这样一段代码:

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

然后文章中添加:password: 00000 如下图:

password

如果password后面为空,则表示不用密码。

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,搜索maximum-scale=1, 在该行下面添加如下内容:

1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

默认的是粉色的,要改变颜色可以接着上面添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
修改文章底部标签图标

NexT主题中所有图标来源于Font Awesome图标,因此和更改侧边栏社交链接图标同样,不再赘述。

修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成<i class="fa fa-tag"></i> 即可。

修改文章内链接样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。

打开文件/themes/next/source/css/_custom/custom.styl,添加如下 css 样式:

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
实现点击出现桃心效果

这个是我最喜欢的功能,不信你配置完成看一下。

打开/themes/next/source/js/src , 新建love.js文件,复制此处的代码到love.js里面。

打开/themes/next/layout/_layout.swig文件, 在head标签内最后位置添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
文章底部添加版权信息

版权声明

打开next\layout/_macro/, 删除post-copyright.swig,新建my-copyright.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% 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 type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 HH:MM:ss") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
<p><span>版权声明:</span>本博客所有文章除特别声明外,均采用 <i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank" title="Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)"> BY-NC-SA 3.0 许可协议</a>,转载请注明出处!</p>
</div>
{% endif %}

打开/next/source/css/_common/components/post/, 删除post-copyright.styl, 添加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: 96%;
max-width: 65em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border-left: 3px solid #FF0000;
font-size: 0.85rem;
line-height: 1.6em;
word-break: break-all;
background: rgb(246,246,246);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #000000;
font-weight: normal;
}
.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;
}

修改next/layout/_macro/post.swig,在代码

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

之前添加增加如下代码:

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

修改 next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

1
@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示,需要在文章头部中增加copyright: true的设置,类似:

1
2
3
4
5
6
7
---
title:
date:
tags:
categories:
copyright: true
---

如果你感觉每次新建文章都要添加比较麻烦,可以直接更改文章的模板文件,这样新建文章时就会自动添加copyright: true。 打开根目录/scaffolds/post.md, 做类似设置:

1
2
3
4
5
6
7
title: {{ title }}
date: {{ date }}
tags:
categories:
comments:
password:
copyright: true

注意:上面内容对v5.1.1版本NexT主题适用,其他版本未测试过。因为主题版本的原因,参考文章中的部分配置与我的不同,请仔细阅读。

参考文章:

Hexo搭建博客教程

hexo的next主题个性化教程: 打造炫酷网站

文章作者:枫頔

最后更新:2019年03月27日 19:03:45

原始链接:http://fengdi.org/2017/08/06/Hexo博客之主题美化.html

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 3.0 许可协议,转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!