本文转载自
CSDN:Hexo+icarus主题配置
Hexo Icarus配置和美化升级
美化等进阶功能
攻略位置：https://blog.csdn.net/marvine/article/details/89816846
攻略位置：https://blog.csdn.net/qq_36759224/article/details/85420403#font_colorFF0000___font_289
目录
添加网站访问量
因为目前搭的博客是静态网页，所以添加网站访问量需要用到第三方工具
具体见:不蒜子:搞定你的网站计数
主题文件结构
1
2
3
4
5
6
7
8
9
10
11
| /includes
/languages #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。
/layout #以ejs文件来定义各种含有配置信息调用的布局（绝大多数修改点的位置）
/scripts #一些JS脚本
/source
/css #用来修改自定义样式，需要掌握一定的css语法。
/fonts #定义字体文件，可以修改博客字体
/images #本地调用的图片放这里
/js #一些js脚本（特效.js存放处）
/404.html #自定义的公益404页面
/_config.yml #YML数据串行化格式语言书写的配置文件（首先修改）
|
主题配置
_config.yml是主题的配置文件
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
| version: 2.3.0
# 你的网站图标，可以搜索在线图标制作，并将其放在images文件夹中
favicon: /images/favicons.ico
# Path or URL to RSS atom.xml
rss: /atom.xml
# 显示在导航栏左侧的网站logo，同样可以自己制作
logo: /images/gen.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:
# 导航栏
navbar:
#菜单（显示名称：对应文件夹）
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
关于: /about
# 导航栏右侧图标链接
links:
My GitHub:
icon: fab fa-github
url: '你的gityhub地址'
# Footer section link settings
footer:
# 页脚图标链接
links:
Creative Commons:
icon: fab fa-creative-commons
url: 'https://creativecommons.org/'
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: 'https://creativecommons.org/licenses/by/4.0/'
Download on GitHub:
icon: fab fa-github
url: 'http://github.com/ppoffice/hexo-theme-icarus'
# 文章显示设置
article:
# Code highlight theme
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
#代码主题atom-one-light亮色，atom-one-dark暗色
highlight: atom-one-dark
# 是否显示文章主图
thumbnail: true
# 是否显示估算阅读时间
readtime: true
# 搜索插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Search-Plugins
search:
# Name of the search plugin
type: insight
# 评论插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Comment-Plugins
comment:
#可选valine，disqus（科学上网）等
# Name of the comment plugin
#type: valine
#app_id: 不为空
#app_key: 不为空
#notify: true
#verify: true
#placeholder:
type: disqus
shortname: 不能为空
# 打赏功能
# http://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
-
# 阿里巴巴支付宝
type: alipay
# 二维码图片
qrcode: '/images/honbao.PNG'
-
# 微信
type: wechat
# 二维码图片
qrcode: '/images/yjtp.png'
-
# 分享插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Share-Plugins
share:
# 插件类型，有多种，可选，自行百度
type: sharejs
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# 左侧边栏设置
left:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 右侧边栏设置
right:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 边栏小部件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
-
# 个人信息
type: profile
# 部件位置（左）
position: left
# 作者名（字符串）
author: 飞鱼
# 作者身份描述（字符串）
author_title: Student
# 作者当前居住地
location: China,Fujian
# 头像（可用本地图片或网络图片链接）
avatar: '/images/ava.png'
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# 关注我的链接，可设为你的GitHub主页
follow_link: 'https://github.com/yourname'
# 个人介绍部件底部图标社交链接
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/yourname'
Facebook:
icon: fab fa-facebook
url: 'https://facebook.com'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/yourname'
RSS:
icon: fas fa-rss
url: /
-
# Widget name
type: toc
# Where should the widget be placed, left or right
position: left
-
# 分类
type: category
# 位置指定
position: left
-
# 标签云
type: tagcloud
# 位置
position: right
-
# 近期文章
type: recent_posts
# 位置
position: left
-
# 归档
type: archive
# Where should the widget be placed, left or right
position: right
-
# 标签
type: tag
# Where should the widget be placed, left or right
position: right
-
# 外部链接
type: links
# Where should the widget be placed, left or right
position: left
# Links to be shown in the links widget
links:
Google: 'https://google.com'
Baidu: 'https://baidu.com'
|
修改内容详细页
Hexo-icarus主题的文章详情页默认与主页布局一致，皆为三栏布局，想将其改为两栏布局。
打开/themes/icarus/layout/layout.ejs文件，添加col()函数到文件中：
1
2
3
4
5
6
7
8
| <% function col(){
if(!is_post()){
return main_column_class();
}
else{
return 'is-6-tablet is-6-desktop is-9-widescreen';
}
} %>
|
再section标签中做如下改动：
1
2
3
4
5
6
7
8
9
10
| <section class="section">
<div class="container">
<div class="columns">
<!-- 将main_column_class() 改为 col() -->
<div class="column <%= col() %> has-order-2 column-main"><%- body %></div>
<%- partial('common/widget', { position: 'left' }) %>
<%- partial('common/widget', { position: 'right' }) %>
</div>
</div>
</section>
|
不难看出，上述改动的目的是将显示逻辑改为：若当前页面不是文章页面则直接采用原始设置，否则将文章栏放大。
通过上面的修改，hexo server查看效果，发现文章详情页的文章栏确实放大了，但是右侧的部件栏并未消失，而是被挤出了屏幕外一部分，极不美观。
为了解决上述问题，还需修改/themes/icarus/layout/common/widget.ejs文件。
将代码全选复制，再粘贴于末尾，做如下修改3处代码：
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
| <% if (get_widgets(position).length && !is_post()) { %> <!-- 修改 -->
<% function side_column_class() {
switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-4-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
<% function visibility_class() {
if (column_count() === 3 && position === 'right') {
return 'is-hidden-touch is-hidden-desktop-only';
}
return '';
} %>
<% function order_class() {
return position === 'left' ? 'has-order-1' : 'has-order-3';
} %>
<% function sticky_class(position) {
return get_config('sidebar.' + position + '.sticky', false) ? 'is-sticky' : '';
} %>
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>">
<% get_widgets(position).forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
<% if (position === 'left') { %>
<div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
<% get_widgets('right').forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
</div>
<% } %>
</div>
<% } %>
<!-- 粘贴的部分 -->
<% if (position === 'left' && is_post()) { %> <!-- 修改，可选保留的栏 -->
<% function side_column_class() {
switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-4-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
<% function visibility_class() {
if (column_count() === 3 && position === 'right') {
return 'is-hidden-touch is-hidden-desktop-only';
}
return '';
} %>
<% function order_class() {
return position === 'left' ? 'has-order-3' : 'has-order-1'; <!-- 修改 -->
} %>
<% function sticky_class(position) {
return get_config('sidebar.' + position + '.sticky', false) ? 'is-sticky' : '';
} %>
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>">
<% get_widgets(position).forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
<% if (position === 'left') { %>
<div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
<% get_widgets('right').forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
</div>
<% } %>
</div>
<% } %>
|
