Image

image
image

Blockquote

当blockquote、img、pre、figure为第一级内容时，在page布局中拥有card阴影，所有标题居中展示。

Content

目前的想法是预定义一系列内容模块，通过像输入 Markdown 标记一样来简单调用。好在 Markdown 没有把所有便于输入的符号占用，最终我定义了@moduleName{ ... }这种标记格式。如果你使用过Asp.Net MVC，一定会很熟悉这种用法，没错，就是razor。

page布局中的title和subtitle对应 Markdown 中的title和description。

基本的内容容器还是card，你可以这样使用card：

1
2
3
4
5
@card{

在`page`页中，建议把内容都放到`card`中。

}

需要注意的是：标记与内容之间必须空一行隔开。至于为何要这样，看到最后就明白了。

Column

左

与card标记类似，分栏的标记是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@column-2{

@card{

# 左

}

@card{

# 右

}

}

为了移动端观感，当屏幕宽度小于 480 时，column将换行显示。

右

column中的每一列具有等宽、等高的特点，最多支持三栏：

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

@card{

左

}

@card{

中

}

@card{

右

}

}

Three columns

话式片平九业影查类办细开被支，置军争里老5备才才目板。 且数置百容机，规的空界往，十陕志入。料解格清收权厂值动且习，识生能化路速年边，类儿2带杏性热求已。

话式片平九业影查类办细开被支，置军争里老5备才才目板。 且数置百容机，规的空界往，十陕志入。料解格清收权厂值动且习，识生能化路速年边，类儿2带杏性热求已。

话式片平九业影查类办细开被支，置军争里老5备才才目板。 且数置百容机，规的空界往，十陕志入。料解格清收权厂值动且习，识生能化路速年边，类儿2带杏性热求已。

Timeline

在timeline模块中，你的 5 号标题#####和六号标题######将被“征用”，用作时间线上的标记点：

1
2
3
4
5
6
7
8
9
10
11
12
@timeline{

##### 2016

@item{
###### 11月6日

为 Card theme 添加 page layout。

}

}

@item中多行内容可以换行输入，目前不允许隔行：

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

##### 2016

@item{
###### 11月6日

第一行 
第二行 /* ok */

}

@item{
###### 11月6日

第一行

第二行 /* error */

}

}
2016
11月6日

为 Card theme 添加 page layout。
加快绿化空间好看

10月31日

本地化多说。

10月24日

为 Indigo 主题创建 Card 分支。

2015
2月24日

发布 Indigo 主题到 hexo.io。

1月22日

创建 Indigo 主题。

CodeBlock

1
2
3
4
5
// 自定义内容块实现
page.content.replace(/<p>}<\/p>/g, '</div>')
	.replace(/<p>@([\w-]+){<\/p>/g, function(match, $1){
		return '<div class="'+ $1 +'">'
	})

这里可以解释，为什么标记之间必须要隔一行了。

当你在 Markdown 中隔行输入时，会形成新的段落，而如果一个段落中的内容仅仅是我们约定的标记，就可以用很容易的用正则匹配到替换为对应的模块容器。

End

为了解决 Hexo 自定义页面slug为空不能很好的使用多说评论这个问题，现在已经给每个自定义页面自动生成了hexo-page-path这种格式的slug。
本来准备用date做格式的最后一节，测试中发现 page 中的date值为修改时间，是动态的。
综合考虑使用了路径path。

以后可以根据需要添加更多模块支持。

打赏和评论默认开启，可根据需要在 Markdown 头部定义是否关闭。