Hexo 博客搭建:个性篇
通过上一篇文章,我们已经搭建好了一个博客的基本功能,已经可以开始编写博客了。 下面我们简单写一点Hexo的美化配置
# 文章页个性配置
主题目录下的 themes\next_config.yml 文件负责与主题相关的配置,用户可以通过修改该文件来自定义与主题相关的内容或功能,修改后刷新浏览器即可即时生效。
# 目录导航设置
# 基础配置
themes\next\_config.yml
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 展开/隐藏目录层级
默认情况下,next 的目录是多级折叠的,阅读时只会展开当前目录分支。我们希望目录完全展开,同时为了避免长目录结构,约定只展开到三级目录。三级以下的目录会被隐藏,只有当文章阅读到的时候才会展开。
themes\next\source\css_custom\custom.styl
//TOC目录默认展开三级,这里是指Markdown标签的h3
.post-toc .nav .nav-level-2>.nav-child {
display: block;
}
1
2
3
4
2
3
4
若是希望三级以下的目录完全被隐藏
//TOC目录默认只显示两级目录
.nav-level-2 > .nav-child {
display: none !important;
}
1
2
3
4
2
3
4
# 文章置顶
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
1
2
2
然后在置顶的文章 Front-matter
加上 top: true
,如
---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---
1
2
3
4
5
6
2
3
4
5
6
# 美化
# 字体美化
在 Google Fonts (opens new window) 上找到心仪的字体,然后在主题配置文件中为不同的应用场景配置字体,我们这里直接使用别人配置好的字体:别人的字体 (opens new window)
# themes\next\_config.yml
font:
enable: true
# 外链字体库地址,例如 //fonts.googleapis.com (默认值)
host:
# 全局字体,应用在 body 元素上
global:
external: true
family: Monda
# 标题字体 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab
# 文章字体
posts:
external: true
family:
# Logo 字体
logo:
external: true
family:
# 代码字体,应用于 code 以及代码块
codes:
external: true
family:
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
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
# 标签图标美化
默认情况下标签前缀是 #
字符,用户可以通过修改主题源码将标签的字符前缀改为图标前缀
在文章布局模板中找到文末标签相关代码段,将 #
换成 <i class="fa fa-tags"></i>
即可:
# themes\next\layout\_macro\post.swig <footer class="post-footer">
{% 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"># {{ tag.name }}</a>
+ <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tags"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
...
</footer>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2020/11/04, 12:55:33