Hexo 主题 Landscape 改造小记

昨晚更新 Hexo 后,发现新版 Hexo 自带的主题 Landscape 不错,就决定使用这一款主题。同时,对 Landscape 中一些不太符合自己使用习惯的地方进行了修改。

目录:

  1. 自动切换 banner 图片
  2. 更改引文样式
  3. 更改标题样式
  4. 优化字体方案
  5. 修改分享按钮
  6. 替换 Google Javascript 库和字体库

1. 自动切换 banner 图片

更换主题后,打开网页,首先看到的是顶部大大的 banner 图片。不过,默认的 banner,只能固定显示一张图片。如果这张图片能替换成自己作品的照片,并且能自动随机切换,效果应该会更好。

上网搜索了一下,刚好有人有同样的想法。使用 Javascript 即可实现:

1
2
3
4
5
6
7
8
9
<script>
<% if (theme.switch_banner){ %>
var number_of_banners = 6;
var randnum = Math.floor(Math.random() * number_of_banners + 1);
document.getElementById("banner").style.backgroundImage = "url(/css/images/banner" + randnum + ".jpg)";
<% } else { %>
document.getElementById("banner").style.backgroundImage = "url(/css/images/banner.jpg)";
<% } %>
</script>

详细的操作步骤请参考:自动随机切换Hexo博客的banner图片

2. 更改引文样式

Hexo 默认的引文样式为大字号居中显示,但是对我来说,blockquote 被更多地用来展示内容的层级关系。所以,我对 blockquote 的样式进行了简单的修改:

1
2
3
4
font-family: font-sans
border-left: 5px solid #DDD
margin: 15px 0 0 2px
padding-left: 20px

效果如图所示:

引文样式

3. 更改标题样式

在一级标题下加上浅色背景,二级标题下加浅色下划线,能使文章层次更加清晰,便于阅读。可在 article.styl.article-entry 合适位置添加如下内容:

1
2
3
4
5
h1
padding: 7px 6px 7px 0px;
background: #dddddd;
h2
border-bottom: 1px #d8d8d8 solid;

显示效果如下:

标题样式

参考资料:

4. 优化字体方案

为了是网页在各个操作系统中都能显示出高质量的中英文字体,对默认的字体方案稍作修改:

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 等系统里,默认只能以 黑体-简 显示中文,显示效果不太理想(尤其是显示粗体文本时)。

参考资料:

5. 修改分享按钮

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
29
30
31
.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.stylColors 部分,最后四行分别为四个社交网站图标的背景色,可根据这些网站的主题色修改。这是我的修改结果:

1
2
3
4
color-sina = #ea0020
color-qq = #518adb
color-renren = #406ccb
color-tencent = #33b5eb

修改后的效果如下:

分享按钮

参考资料:

6. 替换 Google Javascript 库和字体库

本主题使用 Google 提供的 JS 库和字体,但 Google API 在国内基本无法访问,导致网站部分功能失效。而新浪、百度、微软、360 均提供类似的服务,可以在在国内正常使用。

找到 layout/_partial/after-footer.ejslayout/_partial/head.ejs 两个文件,将其中的 googleapis 替换为 useso 即可。

参考资料: