废话

mellow主题自带了一个字体,确实好看,但是有一个对于我这种强迫症患者来说无法忍受的缺点:英文小写字体特别小。但是像我这种选恐患者又不想自己去选字体,那就只好手动把页面的大部分信息换成中文。

大部分修改还是容易的,more标签的改动我倒是费了一番心思(主要是因为我菜)。

正题

下面进入正题。

修改标签内容

主题配置文件(路径\blog\themes\mellow下的config.yml)中,有一段配置

1
2
3
4
5
6
7
# 自动生成文章摘要
## 显示在主页中
## excerpt_length只在excerpt_render为true时生效。
## excerpt_render为false时可进行手动截断。方法为在文章的markdown文件中加入<!--more-->,其之前的内容视为摘要部分。
excerpt_render: false #自动截断
excerpt_length: 200 #截断长度
excerpt_link: more #更多按钮内容

把最后一行excerpt_link的“more”改成想要的内容,比如大写的“MORE”,我改成了“阅读更多”。

1
2
3
4
5
6
7
# 自动生成文章摘要
## 显示在主页中
## excerpt_length只在excerpt_render为true时生效。
## excerpt_render为false时可进行手动截断。方法为在文章的markdown文件中加入<!--more-->,其之前的内容视为摘要部分。
excerpt_render: false #自动截断
excerpt_length: 200 #截断长度
excerpt_link: 阅读更多 #更多按钮内容

如果就此结束了,我干啥要写这篇文章

试着hexo s一下,受到惊吓:文字溢出标签

修改标签大小

文件路径:\blog\themes\mellow\source\css\_partial

打开postlist.less,找到以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.post-more {
width: 原来是多少我忘了px;
margin: 10px auto 0;
display: block;
padding: 0 6px;
font-weight: normal;
color: @primaryColor_2 @imp;
border: 1px solid @primaryColor_2 @imp;
border-radius: 5px;
line-height: 1.5;

&:hover,
&:active {
color: @textPrimaryColorWhite @imp;
background: @primaryColor_2;
}
}

第二行width不够就是罪魁祸首。原来是多少不要紧,反正要改得大一点。粗粗一算,因为我的基础字体大小改成了16px,四个字就是64px,再考虑一下边界,我改成了80px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.post-more {
width: 80px;
margin: 10px auto 0;
display: block;
padding: 0 6px;
font-weight: normal;
color: @primaryColor_2 @imp;
border: 1px solid @primaryColor_2 @imp;
border-radius: 5px;
line-height: 1.5;

&:hover,
&:active {
color: @textPrimaryColorWhite @imp;
background: @primaryColor_2;
}
}

hexo s一下,就非常舒服了。

效果见网站首页。