之前兴冲冲的想自己写个博客，然后没事儿写点儿东西放上面（虽然没人看😂）。但是还是动力不足，总给自己找借口，而且写东西确实是件比较费神的事儿。

而我平时又不想有事儿没事在社交网络（QQ空间，朋友圈，微博等）上面发些心情什么的，总觉得太矫情，琐碎。因此就想在这片属于自己的地方，弄个可以随便写点什么的地方。于是想到之前在@JamesPan那里看到的一个Timeline的页面（他把链接从首页去掉了，但其实链接还在，可能他不希望这些太直接的展示出来吧，所以这里也就不放链接了），总之，我决定模仿（读书人的事儿，能叫抄么）下来了。

其实之前对hexo也只停留在会看教程使用的程度，对其原理、技术是一点儿都不了解的，甚至对网页我也不是很了解，所以在这里花了一些时间，大概两个小时吧。但是最后回头再看，其实挺简单。

首先，我在看JamesPan的github上看到其Timeline页面的markdown源码是这样的：

1
2
3
{% mood 2015-01-24 23:55:21 fa-book %} 搞到了找了好久的《人本界面》，万能的淘宝！ {% endmood %}
{% mood 2015-01-23 18:38:26 fa-code %} 地址收缩算法！ {% endmood %}

看似是用这个什么mode将一条状态包裹起来，然后他在评论中回复别人说只是用了blockquote标签而已。然后就在他的代码里全局搜索mood、blockquote，找到了一个叫Timeline.js的东西，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo.extend.tag.register('mood', function(args, content){
	date = args[0]
	time = args[1]
	logo = args[2]
	var result = '';
	result += '<blockquote>';
	logo = '<span class="fa-stack fa-lg"><i class="fa ' + logo + ' fa-stack-1x"></i></span>';
	result += hexo.render.renderSync({text: logo + content, engine: 'markdown'});
	footer = '<span>' + date + ' ' + time + '</span>'
	result += '<footer>' + footer + '</footer>';
	result += '</blockquote>';
	return result;
}, {ends: true});

看来就是在这里告诉hexo，将mode标签转换成blockquote标签。

然而这个js拿到后放到哪里呢。我一开始是和我的主题里其它的js文件放在一起，然而发现然并卵。hexo g的时候还是会报错。后来看hexo的官方说明才知道，要放在主题文件夹的根目录下的scripts文件夹下，如下图：

附件1

即可加载此脚本。然后即可编译、部署。

然而生成的界面的样式与他的样式稍微又些难看，如下：

附件2

我想肯定是css的问题，于是还是在他的代码里搜，找到了他的css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
blockquote
  background #f9f9f9
  quotes "\201C""\201D""\2018""\2019"
  border-left .2em solid color-border
  margin 20px 0px
  padding 0px 30px
  line-height line-height
  font-size font-size
  footer
    background color-section
    padding 0
    margin 0
    font-size 80%
    line-height 1em
  cite
    font-style italic
    padding-left 0.5em

然而这个玩意儿是用什么stylus的格式写的。然后我稍微科普了一下，神马css、scss、sass、stylus，一大堆的语法标准，真是烦，那些程序员是不是都吃饱了撑的，造了一个又一个相似的轮子。

然后又花费了一些时间弄明白这玩意儿并把它转换成了我的主题用的scss：

1
2
3
4
5
6
7
8
9
10
11
12
13
blockquote{
  background: #f9f9f9;
  quotes: "\201C""\201D""\2018""\2019";
  border-left: .2em solid color-border;
  margin: 20px 0px;
  padding: 0px 30px;
  &:before{
    content: none;
  }
  &:after{
    content: none;
  }
}

其中before、after的content属性都设为none是不想那个难看的引号图标出现。结果如下：

附件3

到这里就差不多了。哦，还有每条状态前面的那个小图标，挺有趣。在这里：Font Awesome Icons

后记：感觉稍微懂了一些了不得的知识，继续走这条路下去，或许会能够与更多的人谈笑风生了吧2333。

EOF