[HEXO] NexT 主题提高博客颜值

今天是把博客好好地美化了一把,今天就来讲一下 hexo 博客美化过程中的心得,因为自己使用的是 NexT 主题,所以这里的有些过程仅供别的主题的用户做参考。

文章的模板文件

为了每次更新方便,我直接改了 blog/scaffolds/ 下的 post.md,每次生成的时候模板就都有了,不需要自己再去弄。这个是我的模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: {{ title }}
date: {{ date }}
tags:
categories:
mathjax: true
copyright: true
comment: true
photo:
---

{% note default %}
{% endnote %}

<!-- more -->

---

说明一下,这个 note 要在 next\_config.yml 中开启才可以写。下面会讲到。photo 是文章开头的图片,就像这篇文章开头那样,注意一定要加绝对路径,比如我这张图片存在文章的文件夹下,那么路径就是 /2018/08/30/HEXO-NexT-主题提高博客颜值/photo1.jpgcopyright 这一项也是要开启之后才行,我的博客的 copyright 是自己重新写的,后面会讲到。最后这个 --- 是结束符,和最后的结束语一起用。

Markdown 技巧与内置样式

基础的语法就不提了,点进来的应该都会了。这里就讲讲一些技巧。

编辑器

我用的 Markdown 编辑器是 Typora,有些行内公式的显示可以在设置里打开。这是我用过的最好的 Markdown编辑器

分隔线和空行

1
2
3
4
5
这是文字
<hr />
上面是分隔线
<br />
上面是空行

效果如下:

这是文字



上面是分隔线


上面是空行

引用

1
2
3
<blockquote>引用内容</blockquote>
<!-- 如果前后间隙很小,可以像下面这样写 -->
<p><blockquote>引用内容</blockquote></p>

效果如下:

引用内容

引用内容

居中和右对齐

1
2
3
4
<!-- 居中 -->
<center>内容</center>
<!-- 右对齐 -->
<div style="text-align:right">内容</div>

效果如下:

内容

内容

字体大小和颜色

1
2
<font color="#187892" size="number">内容</font>
<!-- 详细请查看 http://www.w3school.com.cn/tags/tag_font.asp -->

效果如下:

内容

Todo list

1
2
3
4
<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

效果如下:


  • 已完成

  • 未完成

Note 嵌套 Todo list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 一共有两种写法,效果看下面 -->
<div class="note primary">
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
</div>
<div class="note primary">
<p>
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
</p>
</div>

效果如下:


已完成
已完成
已完成
已完成
已完成
未完成
未完成
未完成



已完成
已完成
已完成
已完成
已完成
未完成
未完成
未完成


这两个写法熟悉 HTML 的同学应该是明白的,这里因为我太菜了就不讲了。主要说一下 <i class="fa fa-square"></i> 是从 Font Awesome 上获取图标的方法,不过有些图标似乎是不能加载的,我也不知道为什么。

Font Awesome

Font Awesome 更多的使用可以看官网示例,这里讲一个放大图标的方法

1
2
3
<i class="fa fa-download"></i> 普通
<i class="fa fa-download fa-lg"></i> 变大 33%
<i class="fa fa-download fa-2x"></i> 两倍大

效果如下:
普通
变大 33%
两倍大

代码高亮

主题自带样式 代码块高亮

1
2
```[language] [title] [url] [link-text]
`代码`

[language] 是代码语言的名称,用来设置代码块颜色高亮,非必须;
[title] 是顶部左边的说明,非必须;
[url] 是顶部右边的超链接地址,非必须;
[link text] 如它的字面意思,超链接的名称,非必须。
亲测这 4 项应该是根据空格来分隔,而不是[],故请不要加[]。除非如果你想写后面两个,但不想写前面两个,那么就必须加 [] 了,要这样写:[] [] [url] [link text]

首先关于代码块颜色高亮,高亮的模式可以在主题配置文件中设置:

1
2
3
4
5
6
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme

highlight_theme: night eighties

要颜色正确高亮,代码语言的名称肯定要写对,各种支持语言的名称可以查看这篇文章。当然,如果你和我一样懒,可以在站点配置文件 _config.yml 中设置自动高亮(不过这个自动高亮似乎有问题,不建议打开):

1
2
3
4
5
6
highlight:
enable: true
line_number: true
# 代码自动高亮
- auto_detect: false
+ auto_detect: true

从网上找到的一个文本效果如下(别跟我说你不知道 diff 是什么):

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
Index: languages/ini.js
===================================================================
--- languages/ini.js (revision 199)
+++ languages/ini.js (revision 200)
@@ -1,8 +1,7 @@
hljs.LANGUAGES.ini =
{
- case_insensitive: true,
- defaultMode:
{
+ defaultMode: {
- contains: ['comment', 'title', 'setting'],
+ illegal: '[^\\s]'
+ },
*** /path/to/original timestamp
--- /path/to/new timestamp
***************
*** 1,3 ****
--- 1,9 ----
+ This is an important
+ notice! It should
+ therefore be located at
+ the beginning of this
+ document!
! compress the size of the
! changes.
It is important to spell

代码仅仅高亮肯定是不够地,代码块地功能也很重要,比如复制这个功能。只要在 _config.yml 里打开就行啦:

1
2
3
4
5
6
7
8
9
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius: 3
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true

Note 标签

在主题配置文件_config.yml里有一个关于这个的配置:

1
2
3
4
5
6
7
8
9
# Note tag (bs-callout).
note:
# 风格
style: flat
# 要不要图标
icons: true
# 圆角矩形
border_radius: 3
light_bg_offset: 0

用 HTML 写就是这个样子

1
2
3
4
5
6
7
<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note danger no-icon"><p>danger no-icon</p></div>

用 swig 语法写就是这样

1
2
3
4
5
{% note [class] %}
Any content (support inline tags too).
{% endnote %}
[class] : default | primary | success | info | warning | danger.
May be not defined.

里面的三种风格长啥样?开启图标长啥样?可以查看这个页面,更多的介绍也在这个页面,请自行查看

最后的几种效果:

default


primary


success


info


warning


danger


danger no-icon

Label 标签

label 标签不建议加在段首, 首先可以在主题配置文件中有配置:

1
2
# Label tag.
label: true

然后效果如下(@前面的是label的名字,后面的是要显示的文字)

default
1
{% label default@default %}
primary
1
{% label primary@primary %}
success
1
{% label success@success %}
info
1
{% label info@info %}
warning
1
{% label warning@warning %}
danger
1
{% label danger@danger %}

Tab 选项卡

当然也是要先配置一下:

1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 3

代码如下:

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 额。。。
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇,你找到我了!
<!-- endtab -->
{% endtabs %}

效果如下:

这是选项卡 1 呵呵哈哈哈哈哈哈

这是选项卡 2 额。。。

这是选项卡 3 哇,你找到我了!

上面源码中,2 表示一开始在第二个选项卡,非必须,若数值为 -1 则隐藏选项卡内容。

按钮样式

代码如下:

1
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}

效果如下:

更多关于按钮的使用点这里

更多的主题配置

返回顶部按钮与阅读进度

next/_config.yml 里找到 b2t 这个地方进行如下配置:

1
2
3
4
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true
# Scroll percent label in b2t button.
scrollpercent: true

添加 RSS 订阅

首先安装一个模块

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

然后在根目录下的 _config.yml 里添加:

1
plugins: hexo-generate-feed

最后在 next\_config.yml 里配置:

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

重新生成就可以使用 RSS 了。

评论系统重配置

以前用的是 Disqus,然而需要翻墙,所以决定换成 Valine。这个 Valine 要先在 LeanCloud 里注册并创建一个应用,这里就不再赘述.然后在 next\_config.yml 里配置。注意:得在 LeanCloud -> 应用 -> 设置 -> 应用 Key 中把 AppID 和 AppKey 给复制到 next\_config.yml 里面去,并且在 LeanCloud -> 应用 -> 设置 -> 安全中心 里将自己的域名添加到 Web 安全域名 中。

1
2
3
4
5
6
7
8
9
10
11
valine:
enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 😎看了这么多,不想说点什么嘛😉 # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

这个 LeanCloud 也是比较良心的啊,可以免费使用,当然我用的是开发版,所以大家不要太着急🤣。


本文结束啦感谢您的阅读

文章作者:Wales Mei

最后更新:2019年02月03日 10:02:17

原始链接:http://walesexcitedmei.github.io/2018/08/30/HEXO-NexT-主题提高博客颜值/

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

明人不说暗话,如果你觉得我写得还可以的话,你懂的!