最近用Hexo创建了了个人博客,倒腾了一天终于配置好了,主题选来选去觉得Hexo默认的主题LandScape就好挺好用,所以也就准备用默认主题,但是在用这个主题的时候也发现几点不好用的地方,比如文章引用,它默认的是居中显示的,特别不习惯,就在网上搜了一些改LandScape主题的一些方法,在这里做一总结。
1. 更改引文样式 Hexo 默认的引文样式为大字号居中显示,但是对我来说,blockquote 被更多地用来展示内容的层级关系。所以,我对 blockquote 的样式进行了简单的修改:
1
2
3
4
5
$ hexo generate
font-family: font-sans
border-left: 5px solid
margin: 15px 0 0 2px
padding-left: 20px
效果如图所示:
2. 更改标题样式 在一级标题下加上浅色背景,二级标题下加浅色下划线,能使文章层次更加清晰,便于阅读。可在youtheme/source/css/_partial/article.styl 的 .article-entry 合适位置添加如下内容:
1
2
3
4
5
h1
padding: 7px 6px 7px 0px;
background:
h2
border-bottom: 1px
显示效果如下:
3.优化字体 为了是网页在各个操作系统中都能显示出高质量的中英文字体,对默认的字体方案稍作修改
1
font-sans = "Helvetica Neue" , "Helvetica" , "Hiragino Sans GB" , "Microsoft YaHei" , "Source Han Sans CN" , "WenQuanYi Micro Hei" , Arial, sans-serif
通过上述代码,可以在 OS X 操作系统下默认显示 Hiragino Sans GB (冬青黑体简体中文),Windows 操作系统下默认显示微软雅黑,Linux 操作系统下默认显示思源黑体或文泉驿微米黑。但在 iOS 等系统里,默认只能以 黑体-简 显示中文,显示效果不太理想(尤其是显示粗体文本时)。
4.修改分享按钮 Landscape 主题提供了分享功能,可以将文章分享到 Facebook,Twitter 等网站。但在国内,这些网站用户不多,所以我将其替换成了新浪微博等国内社交网站。在 source/js/script.js 中,可以找到 '<div class="article-share-links">'
,下面的四个链接就是 Facebook 等社交网站的分享链接。将其替换成如下代码,即可实现分享到国内社交网站:
1
2
3
4
'<a href ="http://service.weibo.com/share/share.php?&title=' + encodedUrl + '" class ="article-share-sina" target ="_blank" title ="微博" > </a > ',
'<a href ="http://share.renren.com/share/buttonshare.do?link=' + encodedUrl + '" class ="article-share-renren" target ="_blank" title ="人人" > </a > ',
'<a href ="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodedUrl + '" class ="article-share-qq" target ="_blank" title ="QQ 空间" > </a > ',
'<a href ="http://v.t.qq.com/share/share.php?url=' + encodedUrl + '" class ="article-share-tencent" target ="_blank" title ="腾讯微博" > </a > ',
同时,还需要替换四个网站的图标。本主题使用 Font Awesome 来显示图标,但内置的 Fone Awesome 版本较旧,无法显示 QQ、腾讯微博等图标,所以,需要下载最新版 Font Awesome,替换掉 source/fonts 中相关文件,并在 source/css/_variables.styl 中的 font-icon-version 修改为最新的 Font Awesome 版本号。
然后,在 source/css/_partial/article.styl
中,找到四段以 .article-share-***
开头的代码,替换为如下内容:
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
.article-share-sina
@extend $article -share-link
&:before
content : "\f18a"
&:hover
background : color-sina
text-shadow : 0 1px darken(color-sina, 20% )
.article-share-qq
@extend $article -share-link
&:before
content : "\f1d6"
&:hover
background : color-qq
text-shadow : 0 1px darken(color-qq, 20% )
.article-share-renren
@extend $article -share-link
&:before
content : "\f18b"
&:hover
background : color-renren
text-shadow : 0 1px darken(color-renren, 20% )
.article-share-tencent
@extend $article -share-link
&:before
content : "\f1d5"
&:hover
background : color-tencent
text-shadow : 0 1px darken(color-tencent, 20% )
最后,找到 source/css/_variables.styl 中 Colors 部分,最后四行分别为四个社交网站图标的背景色,可根据这些网站的主题色修改。
1
2
3
4
color -sina = #ea0020
color -qq = #518 adb
color -renren = #406 ccb
color -tencent = #33 b5eb
修改后的效果如下: