NexT主题如何提高文章颜值

发表于 更新于 分类于 阅读次数： 本文字数： 6.8k 阅读时长 ≈ 6 分钟
  • 博客搭建和主题配置教程: Hexo博客相关分类
  • 博客主题配置好了, 也算穿上了华丽的外衣, 但是真正高质量的文章不但要有好的内容更要有美丽的外表结构
  • 所以在提高外在美的同时, 我们也要提高文章的内在美
  • 这里我们就介绍一些在NexT主题下提高文章颜值的方法

文章的模版文件（必读）

  • Hexo博客新建文章的两种方式:
    • 直接在~/blog/source/_posts/下新建.md结尾的文件来写新的文章
    • 站点文件夹根目录, 终端输入hexo new post <title>新建的文章
  • 关于文件最上方的参数, Hexo变量
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/* ！！！！！！！！！！
** 每一项的 : 后面均有一个空格
** 且 : 为英文符号
** ！！！！！！！！！！
*/

title:
/* 文章标题，可以为中文 */

date:
/* 建立日期，如果自己手动添加，请按固定格式
** 就算不写，页面每篇文章顶部的发表于……也能显示
** 只要在主题配置文件中，配置了 created_at 就行
** 那为什么还要自己加上？
** 自定义文章发布的时间
*/

updated:
/* 更新日期，其它与上面的建立日期类似
** 不过在页面每篇文章顶部，是更新于……
** 在主题配置文件中，是 updated_at
*/

permalink:
/* 若站点配置文件下的 permalink 配置了 title
** 则可以替换文章 URL 里面的 title（文章标题）
*/

categories:
/* 分类，支持多级，比如：
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art
（不适用于 layout: page）
*/

tags:
/* 标签
** 多个可以这样写[标签1,标签2,标签3]
** （不适用于 layout: page）
*/

description:
/* 文章的描述，在每篇文章标题下方显示
** 并且作为网页的 description 元数据
** 如果不写，则自动取 <!-- more -->
** 之前的文字作为网页的 description 元数据
** 建议每篇文章都务必加上！
*/

keywords:
/* 关键字，并且作为网页的 keywords 元数据
** 如果不写，则自动取 tags 里的项
** 作为网页的 keywords 元数据
*/

comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/

layout:
/* 页面布局，默认值是 post，默认值可以在
** 站点配置文件中修改 default_layout
** 另：404 页面可能用到，将其值改为 false
*/

type:
/* categories，目录页面
** tags，标签页面
** picture，用来生成 group-pictures
** quote？
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

photos:
/* Gallery support，用来支持画廊 / 相册，用法如下：
- photo_url_1
- photo_url_2
- photo_url_3
https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

link:
/* 文章的外部链接
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

image:
/* 自定义的文章摘要图片，只在页面展示，文章内消失
** 此项只有参考本文 5.14 节配置好，否则请勿添加！
*/

sticky:
/* 文章置顶
** 此项只有参考本文 5.15 节配置好，否则请勿添加！
*/

password:
/* 文章密码，此项只有参考教程：
** http://shenzekun.cn/hexo的next主题个性化配置教程.html
** 第 24 节，配置好，否则请勿添加！
** 发现还是有 bug 的，就是右键在新标签中打开
** 然后无论是否输入密码，都能看到内容
*/

Markdown语法总结

分隔线和空行

1
2
3
4
5
6
7
/* 分隔线 */
<hr />
/* 注意事项 [6]：在XHTML 中，<hr> 必须被正确地关闭，比如 <hr /> */

/* 空行 */
<br />
/* 注意事项同上 */

引用

1
2
3
4
<blockquote>引用内容</blockquote>

/* 如果前后间隙很小，可以像下面这样写 */
<p><blockquote>引用内容</blockquote></p>

居中和右对齐

1
2
3
4
5
/* 居中 */
<center>内容</center>

/* 右对齐 */
<div style="text-align:right">内容</div>

字体大小和颜色

1
2
<font color="#xxxxxx" 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>

好玩写作样式

  • 添加一些特殊的样式，可以增加文章的可读性
  • 可以从样式中选几个自己觉得比较好的、经常会用的使用, 太多反而会适得其反

主题自带样式

先看一段效果图

  1. 支持 Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
  2. 一件部署
    只需一条指令即可部署到 Github Pages，或其他网站。
  3. 丰富的插件
    Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。

这是上述的源码:

1
2
3
4
5
6
1. <i class="fa fa-pencil"></i> 支持 Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
2. <i class="fa fa-cloud-upload"></i> 一件部署
<i>只需一条指令即可部署到 Github Pages，或其他网站。</i>
3. <i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。</i>

采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的 使用示例

效果:

  • 铅笔
  • 上传
  • 下载

源码:

1
2
3
- <i class="fa fa-pencil"></i> 铅笔
- <i class="fa fa-cloud-upload"></i> 上传
- <i class="fa fa-download"></i> 下载

放大图效果:

  • 下载
  • 下载变大 33%
  • 下载两倍大

源码:

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> 下载两倍大

代码块高亮

主题自带样式 代码块高亮

1
2
3
4
```[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: normal

要颜色正确高亮，代码语言的名称肯定要写对，各种支持语言的名称可以查看这篇文章。当然，如果你和我一样懒，可以在站点配置文件_config.yml中设置自动高亮：

1
2
3
4
5
6
highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true
  • 红色-和绿色+的样式也是一种语言，叫diff，所以你只需在 [language] 这写diff，然后在相应代码前面加上-和+就行了
  • 不过默认的-是绿色，+是红色，与 GitHub 上相反

文本居中引用

效果:

我还年轻，
我渴望上路。
带着最初的激情，
追寻着最初的梦想，
感受着最初的体验，
我们上路吧!

源码:

1
2
3
4
5
6
7
8
{% cq %}
我还年轻，
我渴望上路。
带着最初的激情，
追寻着最初的梦想，
感受着最初的体验，
我们上路吧!
{% endcq %}

更多 NexT 主题自带的标签样式，请点击：http://theme-next.iissnan.com/tag-plugins.html

主题自带样式 note 标签

在主题配置文件_config.yml里有一个关于这个的配置，但官方文档没有提供 HTML 的使用方式，个人认为这种方式更简单，也不会产生一些奇怪的显示 bugs

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

显示效果：

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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

主题自带样式 label 标签

label标签不建议加载段首, 首先可以在主题配置文件中有配置，需要配置下

1
2
# Label tag.
label: true

然后效果如下（@ 前面的是label的名字，后面的是要显示的文字）

default 
1
{% label default@default %}
primary 
1
2
{% label primary@primary %}

success 
1
2
{% label success@success %}

info 
1
{% label info@info %}
warning 
1
2
{% label warning@warning %}

danger 
1
2
{% label danger@danger %}

主题自带样式 tabs 标签

首先可以在主题配置文件中有配置，需要配置下

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

效果：

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

这是选项卡 2

这是选项卡 3 哇，你找到我了！φ(≧ω≦*)♪～

源码:

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……
<!-- endtab -->
<!-- tab -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～
<!-- endtab -->
{% endtabs %}

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

主题自带样式 按钮

效果: 点击下载百度

源码:

1
{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

关于按钮的更多使用可以前往 这个页面 查看。

自定义样式 引用

首先由于是自定义的样式，故要自己将 CSS 代码加到custom.styl中

需加入custom.styl的代码：

1
2
3
4
5
6
7
8
9
// 自定义的引用样式
blockquote.question {
    color: #555;
    border-left: 4px solid rgb(16, 152, 173);
    background-color: rgb(227, 242, 253);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 20px;
}
  • 文字颜色改color的值
  • 背景色改background-color的值
  • 边框颜色和粗细改border-left的值

使用:

1
<blockquote class="question">内容</blockquote>

总结: