博客改版，格式微调实记

作为一个静态博客框架，Hexo已经足够优秀。只是或多或少有一点Bug存在，不知为何。这篇文章记录了一些微调和修改，以使整个网站看上去更加正常。

这个其实几天前就忍不了了……更换了页头的背景图，因为默认的实在看不清副标题。用这张图替换themes/landscape/source/css/images/banner.jpg即可。

新的封面图

更换了字体为Open Sans。这个字体是从Typora的配置里面拿出来的，用Typora的时候实在是眼馋得不得了。将Typora主题文件夹里的github文件夹复制到博客的themes/landscape/source/css/fonts文件夹下，然后添加文件themes/landscape/source/css/github-font.css，内容如下：

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
@include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
/**
* css forked from https://github.com/GitbookIO/gitbook
* www.gitbook.com
* Apache License
* https://github.com/GitbookIO/gitbook/blob/master/LICENSE
**/
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: normal;
   src: local('Open Sans Regular'),url('./fonts/github/400.woff') format('woff')
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: normal;
   src: local('Open Sans Italic'),url('./fonts/github/400i.woff') format('woff')
}
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: bold;
   src: local('Open Sans Bold'),url('./fonts/github/700.woff') format('woff')
}
@font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: bold;
   src: local('Open Sans Bold Italic'),url('./fonts/github/700i.woff') format('woff')
}

这一段是从Typora的github.css文件中复制出来的，看起来Typora是从Gitbook复制的。对原作者表示感谢。文件路径稍有更改。

在同目录下的style.styl中添加一行：

1
@import "github-font.css"

即可大功告成。

原本的日期显示有一点问题。修改themes/landscape/layout/_widget/archive.ejs中的日期格式：

1
2
3
4
5
6
7
8
<% if (site.posts.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title"><%= __('archive_a') %></h3>
    <div class="widget">
      <%- list_archives({show_count: theme.show_count, type: theme.archive_type, format: 'YYYY年M月'}) %>
    </div>
  </div>
<% } %>

注意第五行的格式变化。类似的还有themes/landscape/layout/_partial/archive-post.ejs:

1
2
3
4
5
6
7
8
<article class="archive-article archive-type-<%= post.layout %>">
  <div class="archive-article-inner">
    <header class="archive-article-header">
      <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'M月D日'}) %>
      <%- partial('post/title', {class_name: 'archive-article-title'}) %>
    </header>
  </div>
</article>

注意第四行的日期格式。这样做损失了多国语言的兼容性，不过参考官方文档也没有看出什么名堂。希望有更好的办法吧。

在主题的配置文件_config.yml当中去掉了fancybox效果，去掉了tag边栏。前者加载太慢了，对移动端的兼容也不太好；后者纯属个人喜好。

大概的改动就是这些。默认主题landscape可以满足大多数日常所需，曾经做得大改动就是改了tag的位置并且为其加上了五颜六色的背景色。不过这回应该不会这样做了吧。

为什么高亮没有EJS。是不是应该换一个……算了。