对我的paperbox（现在这个主题，landscape plus基础修改而来的，我引用了）做基于自己喜好的改造；

Part2: 加入Updated时间和标签美化~

主题图变化

  • 换图

cube优化

  • cube改版！

  • cube不会自动滚动了

速度

  • 加速访问 [见基于Hexo创建博客，这个和paperbox没有关系，所以不放在这里写]

添加时间

  • 有个Update比较好~

标签改一下

  • 太丑了；太小了

字体问题

  • 同上

代码高亮

  • 感觉代码不是很好看，说不定就会改了

search

  • 加上search框

添加更新时间

原版没有更新时间，感觉很别扭呀，不知道这个博客更新过没，也不知道时效；很苦恼，网上一搜，都是next的主题的，还有一个基于landscape的，非常具有参考价值：hexo优化及主题Landscape-F

修改layout页面模板

根据我们上一篇的思路，应该是两个操作，layout模板——修改页面显示、获取时间

每篇文章开头都有个时间，这个时间是在哪的呢：layout/_partial/article.ejs

1
2
3
4
5
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
  <div class="article-meta">
    <%- partial('post/date', {class_name: 'article-date', date_format: null, data_type: 'date'}) %>
    <%- partial('post/category') %>
  </div>

说实话，没有都明白字段意义，但是可以想到，如果复制这一句话，我们不就可以在页面显示两遍时间了咩~（data_type: 'date’是我后面加的，其实没用到，我就不删了）

对于layout/_partial/post/date.ejs我将我的更新时间写在了footer里面，放在标签前面：

1
2
3
4
5
6
7
<footer class="article-footer">
      <div class="article-footer-content">
        <%- partial('post/date', {class_name: 'article-updated', date_format: null, data_type: 'updated'}) %>
        <%- partial('post/tag') %>
        ...
      </div>
    </footer>

那么这个时间从哪来？？？太菜了，不知道Orz，只能推断到数据由layout/_partial/post/date.ejs处理显示逻辑，看看原处理逻辑：

[old] date.ejs

1
2
3
<h3 href="<%- url_for(post.path) %>" class="<%= class_name %>">
  <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
</h3>

对每一个"post/date"都是这个处理逻辑，那么只要我处理一下这个逻辑，这么写 参考：

[new] date.ejs

1
2
3
4
5
6
7
8
9
<% if (class_name != 'article-updated') { %>
  <h3 href="<%- url_for(post.path) %>" class="<%= class_name %>">
    <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
  </h3>
  <% } else if (post.updated!=null && theme.display_updated != false) { %>
    <h3 href="<%- url_for(post.path) %>" class="<%= class_name %>">
      <%= __('updated') %>&nbsp;:&nbsp;<time datetime="<%= date_xml(post.updated) %>" itemprop="datePublished"><%= date(post.updated, date_format) %></time>
    </h3>
  <% } %>

当我的class_name不是’article-updated’，返回原来的值，否则，就输出post.updated的值；可以用<%= __('updated') %>来访问"Updated:/更新于:"这种写在language的yml文件里的常量字符串。

关于这个处理逻辑，建议使用 class_name != ‘article-updated’；因为还有很多地方用到了这个ejs，我们应该尽量不改变原逻辑

更改样式

source/css/_partial/article.styl加一个，这样，date.ejs就可以找到这个样式啦（class="<%= class_name %>">）~

1
2
3
4
5
6
7
8
9
.article-date
  @extend $block-caption
  float: left
  letter-spacing: 0

// ADD it
.article-updated
    color: color-grey
    text-decoration: none

最后看下效果

image-20190929201947361

image-20190929202024981

标签优化

原标签如上，我觉得不好看，所以我改成了酱晒的：

标签美化后

超级简单的，首先，找到一个样例，然后copy:

你看这个主题标签就很好看，http://moxfive.xyz/，但是一想到，介个吧，五颜六色的标签不适合我这个性冷淡的博客风格，所以只盗用前面的小标签符号我觉得就很不错啦

修改source/css/_partial/article.styl

1
2
3
4
5
6
7
8
.article-tag-list-link
  &:before
    //内容是『f02b』
    content: "\f02b"
    //font的family是fontAwesome
    font-family: font-icon
    //和后面字符的距离
    padding-right: 2px;

source/css/_variables.styl里面定义了

1
2
3
4
5
6
7
8
9
10
// Fonts
font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif
font-serif = "Droid Serif", Georgia, Serif
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont"
font-icon-version = "4.2.0"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em

FontAwesome是啥呢，https://astronautweb.co/snippet/font-awesome/

在里面，你可以找到很多很好用又很漂亮的小图标哦~

FontAwesome部分图标

关于字体太小的问题

这个因为他们都放在footer里面，所以修改footer的字体大小就阔以啦，我从0.85改到了0.9，微调

1
2
3
4
// source/css/_partial/article.styl
.article-footer-content
  clearfix()
  font-size: 0.9em

至此，我的footer我就很满意啦~