Hexo建站日志 (4) - NexT 主题及初步设置

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml 。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置,将其称为 站点配置文件 ;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项,将其称为 主题配置文件

更换主题

如若不喜欢 Hexo 默认的主题,可以更换不同的主题,主题传送门:Themes

我使用的是以“精致简约”著称的 NexT 主题。

指定文件夹 路径下,用命令行输入:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

这会将 NexT 主题下载到 指定文件夹 下的 themes 文件夹里。

启用主题

打开 站点配置文件(_config.yml),找到 theme 字段,并将其值更改为 next,如下图所示。

再在命令行依次输入:

1
2
3
4
hexo clean
hexo generate
hexo server
hexo deploy

即可部署成功。

NexT 主题初步设置

基本信息设置

站点配置文件 中,修改以下信息:

1
2
3
4
5
6
7
# Site
title: #网站标题
subtitle: #网站副标题
description: #网站描述
author: #您的名字
language: zh-Hans #网站使用的语言
timezone: #网站时区。Hexo 默认使用您电脑的时区。

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持以下几种 Scheme:

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

Scheme 的切换通过更改 主题配置文件 ,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

1
2
3
4
5
6
# Schemes
# https://github.com/iissnan/hexo-theme-next#live-preview
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

设置语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

1
language: zh-Hans

设置菜单

菜单配置包括四个部分:

  • 菜单项(名称和链接)
  • 菜单项的显示文本
  • 菜单项对应的图标 Icon
  • 手动创建新的菜单目录

NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下图标模糊的问题。

编辑 主题配置文件,修改以下内容:

1. 设定菜单内容,对应的字段是 menu

菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。

1
2
3
4
5
6
7
menu:
home: /
archives: /archives
about: /about
categories: /categories
tags: /tags
#commonweal: /404.html

若你的站点运行在子目录中,请将链接前缀的 / 去掉

NexT 默认的菜单项有(标注 的项表示需要手动创建这个页面):

键值 设定值 显示文本(简体中文)
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页
tags tags: /tags 标签页
about about: /about 关于页面
commonweal commonweal: /404.html 公益 404

2. 设置菜单项的显示文本

在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。

以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu 字段下添加一项:

1
2
3
4
5
6
7
8
9
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
something: 有料

3. 设定菜单项的图标,对应的字段是 menu_icons

此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。

菜单图标配置示例:

1
2
3
4
5
6
7
8
9
menu_icons:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
  • 在菜单图标开启的情况下,如果菜单项与菜单未匹配(没有设置或者无效的 Font Awesome 图标名字) 的情况下,NexT 将会使用 作为图标。

  • 请注意键值(如 home)的大小写要严格匹配

4. 手动创建新的菜单目录,以 categories 为例,tags 等其他菜单同理。

  • 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 categories
1
hexo new page categories
  • 执行上述命令后,在 Hexo 站点目录下的 source 文件夹里,会生成一个 categories 的文件夹,编辑里面的 index.md 文件:
1
2
3
4
title: categories
date: 2017-12-12 12:39:04
type: "categories"
---

设置侧栏

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

1. 设置侧栏的位置,修改 sidebar.position 的值,支持的选项有:

  • left - 靠左放置
  • right - 靠右放置

目前仅 Pisces Scheme 支持 position 配置。

1
2
sidebar:
position: left

2. 设置侧栏显示的时机,修改 sidebar.display 的值,支持的选项有:

  • post - 默认行为,在文章页面(拥有目录列表)时显示
  • always - 在所有页面中都显示
  • hide - 在所有页面中都隐藏(可以手动展开)
  • remove - 完全移除
1
2
sidebar:
display: post

已知侧栏在 use motion: false 的情况下不会展示。

设置头像

添加头像

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:

地址
完整的互联网 URL: http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在)
配置为:avatar: /uploads/avatar.png

或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png

设置头像边框为圆形

打开 themes/next/source/css/_common/components/sidebar/ 文件夹下的 sidebar-author.styl 文件,添加代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.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: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
// 修改头像边框
}

特效:鼠标放置头像上旋转

依然在上述的 sidebar-author.styl 文件中,添加代码:

1
2
3
4
5
6
7
8
9
10
// 设置旋转
transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}

设置侧边栏社交链接及图标

设置链接

主题配置文件 中,搜索关键字 social ,添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
Weibo: https://weibo.com/your-user-name
douban: https://douban.com/people/your-user-name
zhihu: https://www.zhihu.com/people/your-user-name
# 等等

设置图标

主题配置文件 中,搜索关键字 social_icons ,添加社交站点名称(注意大小写)图标,可在 Font Awesome 查找。

1
2
3
4
5
6
7
8
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
Linkedin: linkedin

设置 RSS

  • 在你 Hexo 站点 目录下,执行:
1
npm install hexo-generator-feed --save
  • 站点配置文件 中,添加以下配置:
1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:

设置友情链接

主题配置文件 中,搜索关键字 Blog rolls,修改如下:

1
2
3
4
5
6
7
# Blog rolls
links_title: 友情链接 #标题
#links_layout: block #布局,一行一个连接
links_layout: inline
links: #连接
baidu: http://example.com/
google: http://example.com/

显示当前浏览进度

  • 主题配置文件 中,搜索关键字 scrollpercent,把 false 改为 true ,如下所示:
1
2
# Scroll percent label in b2t button
scrollpercent: true
  • 如果想把 top 按钮放在侧边栏,在 主题配置文件 中,搜索关键字 b2t ,把 false 改为 true ,如下所示:
1
2
# Back to top in sidebar
b2t: true

版权声明

开启版权声明

主题配置文件 中,搜索关键字 post_copyright,将 enable 改为 true

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

自定义文章底部版权声明

  • 在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig,内容如下:
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
{% 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>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</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>
<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');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}
  • 在目录 themes/next/source/css/_common/components/post/ 下添加 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: 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: #333333;
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: #0593d3;
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,在代码
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>
  • 修改 themes/next/source/css/_common/components/post/post.styl 文件,在最后一行增加代码:
1
@import "my-post-copyright"
  • 设置新建文章自动开启 copyright,即新建文章自动显示自定义的版权声明,设置 your site/scaffolds/post.md 文件:
1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
copyright: true # 新增,开启
---

添加顶部加载条

主题配置文件 中,搜索关键字 pace,设置为 true,可以更换加载样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: true
# 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-flash #替换更换样式

本地搜索

  • 在你站点的根目录下,安装插件
1
npm install hexo-generator-searchdb --save
  • 主题配置文件 中,添加配置:
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
  • 主题配置文件 中,搜索关键字 local_search,设置为 true
1
2
3
4
5
6
7
8
9
  # Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

修改网页底部

修改 author 前面的图标

Foot Awesome 中找到你自己喜欢的图标,修改为 桃心,在 主题配置文件 中,搜索关键字 authoricon,替换图标名:

1
2
# icon between year and author @Footer
authoricon: id-card

隐藏网页底部 Hexo 强力驱动

主题配置文件 中,搜索关键字 copyright,如下:

1
2
# Footer `powered-by` and `theme-info` copyright
copyright: false

参考阅读:

NexT 官方文档