hexo的next主题美化

前言

之前我介绍了hexo的搭建,这次来看看hexo的NexT主题的一些常用的优化。

开启版权

配置文件_config.yml中将post_copyright下的enable设为true,即可开启版权声明

1
2
3
4
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

注意:最新版本好像不支持了

修改文章标签样式

标签样式默认为#tag,我们可以将其改成带图标的
\themes\next\layout\_macro\post.swig,搜索 rel="tag">#,将 # 换成<i class="fa fa-tag"></i>

首页文章显示标签

\themes\next\layout\_macro\post.swig 搜索 post.tags and post.tags.length找到代码:

1
2
3
4
5
6
7
{% if post.tags and post.tags.length and not is_index %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}

and not is_index去掉
修改后:

1
2
3
4
5
6
7
{% if post.tags and post.tags.length %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}

博客网站图标

我们博客的默认图标是H,不过我们可以修改图标。
制作两张图片,一张16x16,一张32x32,放到\source\images中。然后看下面代码,对应设置small与medium就行了。

1
2
3
4
5
6
7
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

作者头像设置

我们设置的头像默认是方形,但可以设置头像为圆形
打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl文件
在site-author-image样式中加上border-radius: 100px如下代码:

1
2
3
4
5
6
7
8
9
.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: 100px;
}

好像新版本可以直接在配置文件中设置,我找了半天没有,就直接改样式了。现在贴出新版的代码出来。

1
2
3
4
5
avatar:
url: /images/author.jpg #头像图片
rounded: true #鼠标放在头像上时是否旋转
opacity: 1 #头像放缩指数
rotated: true #头像是否设为圆形,默认为矩形

开启首页文章显示摘要

1
2
3
4
5
6
7
8
9
10
11
12
13
#选取博客正文<!--more-->前的内容
scroll_to_more: true

# Automatically saving scroll position on each post/page in cookies.
save_scroll: false

#自动截取摘要
excerpt_description: true

#自动截取一定程度的摘要
auto_excerpt:
enable: true
length: 150

添加「分类」页面

创建页面:$ hexo new page categories
编辑刚新建的页面,将页面的 type 设置为 categories ,主题将自动为这个页面显示分类。页面内容如下:

1
2
3
4
5
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
如果页面标题出现乱码,把文件另存为utf-8格式

添加「标签」页面

创建页面:$ hexo new page tags
编辑刚新建的页面,将页面的 type 设置为 tags ,主题将自动为这个页面显示分类。页面内容如下:

1
2
3
4
5
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
如果页面标题出现乱码,把文件另存为utf-8格式

开启统计功能

编辑 主题配置文件 中的busuanzi_count的配置项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
# 是否开启
enable: true
# 站点访问人数统计
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# 站点访问量统计
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# 站点文章阅读量统计
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次

注意:由于不蒜子域名更换了,所以安装官网的这种配置是没有效果的。

解决方案:
打开themes\next\layout_third-party\analytics\busuanzi-counter.swig
找到如下代码:

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

修改为:

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

文章后添加结束标语

1.在themes\next\layout\_macro中创建post-end-tag.swig文件,并在其中添加代码

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:22px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

2.修改themes\next\layout\_macro\post.swig文件,在POST BODY块最后结束标签前添加内容,

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

3.打开 主题配置文件 ,添加代码如下:

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

开启评论功能

我使用的是valine评论系统,由于valine评论系统是基于leancloud开发的,所以我们还需要注册leancloud来支持

  1. 获取LeanCloud的APP ID和APP Key
    登录或注册 LeanCloud, 进入控制台后点击左下角创建应用:
    评论
    应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP ID和APP Key了:
    appid

  2. 配置valine
    编辑 主题配置文件,搜索valine,修改相关配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    valine:
    enable: true
    appid: APP ID # LeanCloud的APP ID
    appkey: APP Key # LeanCloud的APP Key
    notify: false # 邮件提醒 , https://github.com/xCss/Valine/wiki
    verify: false # 是否开启验证码
    placeholder: 期待你的高见 # 评论提示
    avatar: mm # 头像
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size

开启本地搜索功能

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

1
$ npm install hexo-generator-searchdb --save

2.编辑 站点配置文件,新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

3.编辑 主题配置文件,启用本地搜索功能:

1
2
local_search:
enable: true
-------------本文结束感谢您的阅读-------------