技术文章和学习笔记

互联网 & 技术 & 产品 & 阅读 & 生活

0%

搭建 HEXO 博客（三）：个性化定制

发表于 更新于 分类于
本文字数： 9.4k 阅读时长 ≈ 9 分钟
本文介绍的是基于 Hexo 的个人博客搭建的环境配置过程。主要讲解个性化主题的使用，Next 主题的使用，RSS、置顶、使用动态背景、文章提示语以及自定义侧边栏等操作。

搭建 HEXO 博客（三）：个性化定制

13、推荐内容

安装插件：

1
npm install hexo-related-popular-posts --save

我们只需要在主题配置文件_config.yml 中修改：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 推荐文章 # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    PPMixingRate: 0.25
    isDate: false
    isImage: false
    isExcerpt: false

14、RSS

安装配置

安装插件：

1
npm install hexo-generator-feed --save

在站点配置文件 _config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

然后到 hexo 主题配置下面修改

1
2
3
4
5
follow_me:
  Twitter: https://twitter.com/username || fab fa-twitter
  Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  RSS: /atom.xml || fa fa-rss

打开 rss 即可。RSS 图标出现在文章的末尾。

15、置顶操作

安装插件：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: TMDb电影数据分析
declare: true
toc: true
tags:
  - Python
  - 数据分析
categories:
  - 数据分析
  - 实战
abbrlink: 7e380af2
date: 2018-11-23 13:20:03
top: 100
---

注意：top 中数字越大，文章越靠前。

打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件，在 <div class="post-meta"> 的第一个 <span> 标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=FF0000>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

16、Hexo 页面静态资源压缩插件

我们自己添加的 css 和 js 文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说是没有用的，甚至还会降低渲染页面的速度。同时，由于 Markdown 转成 html 的 bug，会导致页面存在大量的空白，我们可以通过查看页面源代码发现这些大量的空白符，这也会造成页面渲染的性能问题。

因此，我们需要对页面的静态资源进行压缩，包括 css、js 和 html 等文件。

我们可以使用 hexo-neat 插件进行压缩。hexo-neat 配置简单，无需额外命令，我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

地址

安装 hexo-neat 插件

1
npm install hexo-neat --save

然后我们需要在站点配置文件_config.yml 中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/fireworks.js'

17、修改头部背景

找到如下位置：

1
hexo\themes\next\source\css\_schemes\Mist\_header.styl

打开 _header.styl，将第一行 background: 后的内容改为如下形式：

1
.header { background: url('../image/background.jpg'); }

保存，重新生成网页即可。

以图床上的图片作为背景

url() 内的链接可以是绝对地址的形式。因为我的静态博客在 github 上面，打开比较慢，所以将背景图片放到图床上以提高打开速度。设置形式如下：

1
.header { background: url('http://xx.xx.xx.com/hexo/image/header-backgroud.jpg'); }

居中自动裁剪效果：

1
2
3
4
5
6
background: url('https://images.unsplash.com/photo-1633120059477-a05c57ed01d0?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-size: 100% auto;  // 可以使用cover
background-position: center; //背景图片居中显示，让多余部分相对容器对此展示
background-repeat: no-repeat;
background-origin: border-box; //从border开始填充
background-clip: border-box;  //border外的多余背景图片不展示，截取掉，

18、添加动态背景

1.打开 next/layout/_layout.swig
在 body 标签里面添加代码

1
2
3
{% if theme.canvas_nest %}
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

复制

2.打开 /next/_config.yml，在里面修改如下代码：

1
2
3
4
# background settings
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

添加动态背景的另一种方式，使用 Next 自带背景，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.3 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

参考上述注释，到指定的 github 地址进行 clone，将克隆的代码添加到 lib 里面，然后这里更改配置即可。

19、添加文章结束提示语

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
6
7
<div>     
    {% if not is_index %}         
    <div style="text-align:center;color: #ccc;font-size:14px;">
        -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
    </div>     
    {% endif %} 
</div>

接着打开 \themes\next\layout_macro\post.swig 文件，在 post-body 之后，post-footer 之前添加如下代码：

1
2
3
4
5
<div>   
    {% if not is_index %}     
        {% include 'passage-end-tag.swig' %}   
    {% endif %} 
</div>

复制

然后打开主题配置文件_config.yml，在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记 
passage_end_tag:  
    enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

20、新建 404 界面

在站点根目录下,输入 hexo new page 404 ,默认在 Hexo 站点下/source/404/index.md 打开新建的404界面，在顶部插入一行，写上 permalink: /404 ，这表示指定该页固定链接为 http://"主页"/404.html。

1
2
3
4
5
6
---
title: #404 Not Found：该页无法显示
date: 2017-09-06 15:37:18
comments: false
permalink: /404
---

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

21、自定义 Slidebar

打开注释，

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

按照注释说明那样，在站点的 source 目录下创建 _data 目录和 styles.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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
//全文字体
body {
    font-family: 'Noto Serif SC',"PingFang SC","Microsoft YaHei",sans-serif;
}
code, pre {
    font-family: 'Roboto Mono',consolas,Menlo,monospace,"PingFang SC","Microsoft YaHei";
}

// 菜单栏样式
.header {
    background: #ffffff;
}

//去除菜单项左边icon
.menu-item .fa {
    display: none;
}

//更改菜单项字体大小
.menu-item a, .menu-item span.exturl {
    font-size: 1.025em;
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
    background: #ffffff;
    color: #000;
    font-size: 1.125em;
}

//去掉网站名上下的横线
.logo-line-before i, .logo-line-after i {
    display: none;
}

//更改网站名字体大小
.site-title {
    font-size: 2em;
}
// 菜单栏样式结束

//侧边栏样式
.sidebar {
    background: #bbbbbb1a;
    bottom: 0;
    position: fixed;
    box-shadow: inset 0 0px 0px #0000;
    top: 0;
    z-index: 200;
}

//目录与站点概览链接样式
.sidebar-nav li{
    color: #555;
    font-size: 1em;
}
.sidebar-nav li:hover{
    color: #222;
}
.sidebar-nav li.sidebar-nav-overview {
    margin-left: 10px;
}
.sidebar-nav .sidebar-nav-active {
    border-bottom-color: #222;
    color: #222;
}
.sidebar-nav .sidebar-nav-active:hover {
    border-bottom-color: #222;
    color: #222;
}

//目录样式
.post-toc ol a {
    border-bottom-color: #5550;
}
.post-toc .nav .active-current > a {
    color: #222;
}
.post-toc .nav .active > a {
    border-bottom-color: #222;
    color: #222;
}
.post-toc .nav .active-current > a:hover {
    color: #222;
}

//头像样式
.site-author-image {
    border: 0px solid #333;
}

//name字体颜色
.site-author-name {
    color: #222;
}
//description颜色
.site-description {
    color: #222;
}

//sidebar-item颜色
.sidebar a, .sidebar span.exturl {
    border-bottom-color: #2220;
    color: #222;
}
.sidebar a:hover, .sidebar span.exturl:hover {
    border-bottom-color: #2220;
    color: #22222282;
}

//RSS样式
.feed-link a, .chat a {
    border: 0px solid #fc6423;
}
.feed-link a:hover, .chat a:hover {
    background: #bbbbbb1a;
    border: 0px solid #fc6423;
    color: #222;
}
.fa-feed:before, .fa-rss:before {
    color: #222;
}

//社交链接样式
.links-of-author a::before, .links-of-author span.exturl::before {
    display: none;
}

//展开按钮
.toggle .toggle-line {
    background: #222;
    height: 3px;
}
.sidebar-toggle {
    background: #bbb0;
    height: 20px;
    width: 25px;
}

//返回顶部按钮
.back-to-top {
    background: #2220;
        color: #222;
}
//侧边栏样式结束

//文章块添加阴影
.post-block{
   margin-top: 60px;
   margin-bottom: 60px;
   border-radius: 20px; //文章背景设置圆角
   padding: 30px 60px 30px 60px;
   background:rgba(255,255,255,0.5) none repeat scroll !important; //添加透明效果
//    -webkit-box-shadow: 0 0 15px rgba(202, 203, 203, .8); //文章块阴影
//    -moz-box-shadow: 0 0 15px rgba(202, 203, 204, .8);
}

//调节文章宽度
// .main-inner {
//     width: 800px;
// }

//调整子标题文本大小
.site-subtitle {
    font-size: 1em;
}

//加入背景图片
//body { 
//	background: url(/images/background.jpg)
//	background-repeat: no-repeat;
//    background-attachment:fixed;
//    background-position:50% 50%;
//}
	
//调整文章块底部空白大小
.post-eof {
    margin: 20px auto 20px;
}

//调整按钮透明度
.btn {
    background: rgba(255,255,255,0);
}

委婉待续

推荐文章

-----本文结束 感谢阅读---------

欢迎关注我的其它发布渠道