有时候就是心血来潮才想搞一些好玩的，假期一旦懒下来人就待完了。

开始

之前一直是抱着小小改造一下将就用就行了的心态来改造博客主题，直到又一个朋友也开始建立博客。于是一直懒着不愿意写的友链以及关于的独立页面也不得不提上日程，就连之前想加入的 clipboard.js 这次也想一股气做好。说起来容易，实际开始读 layout 部分代码才发现自己并不是很懂整个 pug 模版的渲染流程以及构架。整个博文是对于改造过程的记录，如果嫌烦可以跳过我思考的那一部分。

思考

最初搜索一番，仍然发现大多数就是简单的建立一个友链的 page 然后直接 md 堆上去就完事了。当然我之前也这么做过。但是实际效果并不尽如人意。于是不得不进行主题拆解。

然后花费了相当长一段时间发现并没有搞懂主题的布局…Orz。这就产生了一个问题，在寻找了非常多 HEXO 主题开发相关的博文时候，发现不管是用脚手架来搭建还是怎样，一个主题一定是先有布局再往里面填肉，虽然日常自己写点东西是这个思想却没想到用这个思想来解构，有点呆。

解构主题

所以，整体布局确实如下图，从代码中也多少能看出点倪端：

那么看下整体文件的解构：

 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


themes/maupassant/layout/
----------------------------------
├── archive.pug
├── base.pug
├── index.pug
├── page.pug
├── post.pug
├── single-column.pug
├── timeline.pug
├── _partial
     ├── after_footer.pug
     ├── comments.pug
     ├── footer.pug
     ├── head.pug
     ├── helpers.pug
     ├── mathjax2.pug
     ├── mathjax.pug
     ├── paginator.pug
     ├── post_nav.pug
     ├── tag.pug
     ├── totop.pug
     └── wordcount.pug
|── _widget
    ├── category.pug
    ├── links.pug
    ├── recent_comments.pug
    ├── recent_posts.pug
    ├── search.pug
    ├── tag.pug
    └── toc.pug

如果是仔细阅读过主题配置文件，就会发现其中下面列出的这一部分就属于我们说的“单独的页面”：

1
2
3
4


├── index.pug
├── timeline.pug
├── post.pug
├── archive.pug

这些是主题中最最基础的几个独立页面：文章、时间线、主页、文章归档。

其中都会有那么句：

1
2
3


extends base
...
include _partial/BALABALA.pug

如果是对编程相对熟悉的同学可能一下子就发现了这不是典型的引入么，前面是以 base.pug 作为“母版”，后面在上面加东西。前面尝试着 copy 过别人的代码尝试添加一个侧边栏的 TOC（以失败告终），但是并没有好好阅读代码，所以这次吃了大苦头。所以，就连其他全部页面都是在 base 基础上扩展来的，因此提供了一个思路：要想添加自己的独立页面，就需要仿照其他的从 base 为基础进行扩展。

那么我们来看一下，比如这个 archive:

 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


archive.pug
-------------------
extends base

block title
  if page.category
     title= page.category + ' | ' + config.title
  if page.tag
     title= page.tag + ' | ' + config.title
  if page.archive
     title= __('archive') + ' | ' + config.title
block content
  if page.category || page.tag
      h1.label-title=  __('reading_label', page.category || page.tag)
  .post
    .post-archive
        //Use lodash to classify posts. See https://lodash.com/docs#groupBy
        each posts, year in _.groupBy(page.posts.toArray(), function(p){return -p.date.format('YYYY')})
          h2= -year
          ul.listing
            for post in posts
              li
                span.date= post.date.format(config.date_format)
                a(href=url_for(post.path), title=post.title)
                  +title(post)
  include _partial/paginator.pug

可以发现整个结构如下：

1
2
3
4
5
6
7


extends base

block title
..........

block content
........

正好也符合整个页面的布局。那么，友链那么多条是不是要自己一条条加上去呢？傻子才全手写。

_widget/links.pug 中就很好的提到了一个思路，当然也非常常用：用 for 循环

1
2
3


- for (var i in theme.links)
    ul
    a(href=theme.links[i].url title=theme.links[i].title target='_blank') #{theme.links[i].title}

不过可以发现少了一些东西，头像呢？描述呢？其实这些东西自己加上就好，这里不赘述 YAML 的语法，整个过程相当是从themes/_config.yml 中取出 links部分的值，然后找寻每个 links 部分的的子项，这是个很好的思路。

动工

首先现在themes/_config.yml填入所需值，然后编写独立页面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


layout/single-link-page.pug
-------------------------------------
extends base

block title
    title= page.title + ' | ' + config.title

block  content
    - for (var i in theme.links)
        p
            a.friendurl(target='_blank', href=theme.links[i].url, title=theme.links[i].title)
        a.friendurl(target='_blank', href=theme.links[i].url, title=theme.links[i].title)
            .frienddiv
                a.frienddivleft(target='_blank', href=theme.links[i].url)
                    img.myfriend(src=theme.links[i].src)  // 头像部分
                .frienddivright
                    |  #{theme.links[i].title}
                    br
                    br
                    |  #{theme.links[i].dec}  // 描述