用户自定义页面功能演示

Image

image
image

Blockquote

blockquoteimgprefigure为第一级内容时,在page布局中拥有card阴影,所有标题居中展示。

Content

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

page布局中的titlesubtitle对应 Markdown 中的titledescription

基本的内容容器还是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
// 自定义内容块实现
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 头部定义是否关闭。