前言

最近升级Ubuntu，本来想从18.04直接升级到19.10。可惜升级过程中把系统搞坏了。同时之前搭建的Hexo博客也没有了。

去年搭建博客的时候，做了听多修改。结果恢复的时候各种报错。所以这次我就少装插件，选用简洁的主题Chic。这个文章就是尽量把修改过的记录下来，方便以后查看。

TODO

  1. [] 文章置顶
  2. [] 添加Google Ad

支持Font Awesome 图标

具体的做法可以参考作者给出的思路 Issue #59。

  • 方法1：在线引入
    使用font-awesome提供的cdn服务，官网是发送邮件方式，会给你一个<script>链接，你复制到Chic\layout\_partial\head.ejs中即可使用。

  • 方法2：本地引入

  1. 下载zip文件
  2. 新建文件夹 Chic/source/font-awesome
  3. 把下载好的font-awesome中的2个文件夹css, fonts拷贝到刚刚创新的文件夹
  4. 在Chic/_config.yml中style字段添加
1
2
3
stylesheets:
  - /css/style.css
  - /font-awesome/css/font-awesome.css # 引入font-awesome

其中这行代码 - /font-awesome/css/font-awesome.css # 引入font-awesome是新加的

  1. 在文章中使用<i>标签引入图标
    <i class="fa fa-thermometer-full" aria-hidden="true"></i> 会显示一个温度计

Hexo-Markdown-支持-Emoji

这个就很有趣啦！添加emoji支持后可以让你的博客更好玩，更生动！🐮 📢

Hexo Markdown 支持 Emoji

Add Image To Hexo Blog Post 为博客添加图片

Add Image To Hexo Blog Post

修改博客底部版权信息

  • 添加博客建立日期
  • 减少2行信息的间距
  1. 在站点配置文件_config.yml中添加
1
2
# 版权起始年份
since_year: 2018
  1. 修改文件blog-folder/themes/Chic/layout/_partial/footer.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<footer id="footer" class="footer">

   <div class="copyright">
        <span><%= config.author %> © <%if (theme.since_year && theme.since_year < date(new Date(), "YYYY")) {%><%- theme.since_year %> - <%}%><%- date(new Date(), "YYYY") %> | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>

<!-- 引入不蒜子-->
		<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- 开始添加本站访客数-->
		<span id="busuanzi_container_site_pv">
		    本站总访问量: <span id="busuanzi_value_site_pv"></span>
		</span>
		<span id="busuanzi_container_site_uv">
		    本站总访客: <span id="busuanzi_value_site_uv"></span>
		</span>
<!-- 添加完成 -->

</footer>

标签插件（Tag Plugins）

Hexo博客原生插件，Chic也适用

一句话Tips

  • Hexo博客的文章中，每个章节需要用二级菜单##，不能用一级菜单#。不然右边导航会失效。

Gitalk配置教程

参考这个 link

添加类似NexT注意的自定义tag

参考资料：Hexo-NexT Tag 插件的使用

/themes/Chic/source/css/custom.style 添加下面的代码。

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
// Code标签
.post-content .note {
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 15px;
  position: relative;
  background: #f9f9f9;
  border: initial;
  border-left: 3px solid #eee;
}
.post-content .note h2,
.post-content .note h3,
.post-content .note h4,
.post-content .note h5,
.post-content .note h6 {
  margin-top: 3px;
  border-bottom: initial;
  margin-bottom: 0;
  padding-top: 0;
}
.post-content .note p:first-child,
.post-content .note ul:first-child,
.post-content .note ol:first-child,
.post-content .note table:first-child,
.post-content .note pre:first-child,
.post-content .note blockquote:first-child,
.post-content .note img:first-child {
  margin-top: 0;
}
.post-content .note p:last-child,
.post-content .note ul:last-child,
.post-content .note ol:last-child,
.post-content .note table:last-child,
.post-content .note pre:last-child,
.post-content .note blockquote:last-child,
.post-content .note img:last-child {
  margin-bottom: 0;
}
.post-content .note:not(.no-icon) {
  padding-left: 45px;
}
.post-content .note:not(.no-icon)::before {
  font-family: 'FontAwesome';
  font-size: larger;
  left: 15px;
  position: absolute;
  top: 13px;
}
.post-content .note.default {
  background: #f7f7f7;
  border-left-color: #777;
}
.post-content .note.default h2,
.post-content .note.default h3,
.post-content .note.default h4,
.post-content .note.default h5,
.post-content .note.default h6 {
  color: #777;
}
.post-content .note.default:not(.no-icon)::before {
  content: "\f0a9";
  color: #777;
}
.post-content .note.primary {
  background: #f5f0fa;
  border-left-color: #6f42c1;
}
.post-content .note.primary h2,
.post-content .note.primary h3,
.post-content .note.primary h4,
.post-content .note.primary h5,
.post-content .note.primary h6 {
  color: #6f42c1;
}
.post-content .note.primary:not(.no-icon)::before {
  content: "\f055";
  color: #6f42c1;
}
.post-content .note.info {
  background: #eef7fa;
  border-left-color: #428bca;
}
.post-content .note.info h2,
.post-content .note.info h3,
.post-content .note.info h4,
.post-content .note.info h5,
.post-content .note.info h6 {
  color: #428bca;
}
.post-content .note.info:not(.no-icon)::before {
  content: "\f05a";
  color: #428bca;
}
.post-content .note.success {
  background: #eff8f0;
  border-left-color: #5cb85c;
}
.post-content .note.success h2,
.post-content .note.success h3,
.post-content .note.success h4,
.post-content .note.success h5,
.post-content .note.success h6 {
  color: #5cb85c;
}
.post-content .note.success:not(.no-icon)::before {
  content: "\f058";
  color: #5cb85c;
}
.post-content .note.warning {
  background: #fdf8ea;
  border-left-color: #f0ad4e;
}
.post-content .note.warning h2,
.post-content .note.warning h3,
.post-content .note.warning h4,
.post-content .note.warning h5,
.post-content .note.warning h6 {
  color: #f0ad4e;
}
.post-content .note.warning:not(.no-icon)::before {
  content: "\f06a";
  color: #f0ad4e;
}
.post-content .note.danger {
  background: #fcf1f2;
  border-left-color: #d9534f;
}
.post-content .note.danger h2,
.post-content .note.danger h3,
.post-content .note.danger h4,
.post-content .note.danger h5,
.post-content .note.danger h6 {
  color: #d9534f;
}
.post-content .note.danger:not(.no-icon)::before {
  content: "\f056";
  color: #d9534f;
}

// class = .my-blockquote-center p 居中
.my-blockquote-center p{
  text-align: center;
}


// label
.post-content .label {
  display: inline;
  padding: 0 2px;
}
.post-content .label.default {
  background: #f0f0f0;
}
.post-content .label.primary {
  background: #efe6f7;
}
.post-content .label.info {
  background: #e5f2f8;
}
.post-content .label.success {
  background: #e7f4e9;
}
.post-content .label.warning {
  background: #fcf6e1;
}
.post-content .label.danger {
  background: #fae8eb;
}

下面的代码就能够显示自定义tag了。

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
<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 warning">
            <p>warning 提示块标签</p>
</div>

<div class="note danger">
            <p>danger 提示块标签</p>
</div>

<div class="my-blockquote-center"><p>世间所有的相遇，都是久别重逢</p></div>

<p markdown="1" style="
    text-align: center;
    font-weight: bold; ">
PS: （2017-05-15更新）更新的内容如下......
</p>

<p>显示效果：</p>
<span class="label default">默认</span> <span class="label primary">主要</span> <span class="label success">成功</span> <span class="label info">信息</span> <span class="label warning">警告</span> <span class="label danger">危险</span>

default 提示块标签

primary 提示块标签

success 提示块标签

warning 提示块标签

danger 提示块标签

世间所有的相遇，都是久别重逢

PS: （2017-05-15更新）更新的内容如下......

显示效果：

默认 主要 成功 信息 警告 危险