如何自定义模板?

准备工作

1, 进入网站的Dashboard设置,在呈现(Render)栏中的Debug Template 打开。
2,请确保自己网站内有文章、照片(如果是自定义相册类的模板) ,不然模板自定义没有真正预览的效果。
3,不论是客户端软件(比如 MarkEditor)或者 Bitcron.com 直接提供的 Web 端文件管理器,进入template这个目录,如果尚不存在,需要自己创建。自定义模板的所有文件,应该位于这个目录内。

注意: 你也可以选择 Clone 一个系统默认提供模板,这样模板的源码会存储到你自己的网站中。

创建模板文件

创建template/index.jade(控制页面的内容),源码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
html
    head
        title= site.title
        +h.load("/template/css.scss")
    body
        for post in posts
            .post
                .content= post.content(500)
                .title ——《{{post.title}}》
        +h.paginator(pre_label="<",  next_label=">")

创建template/css.scss(控制页面的风格),源码如下:

 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
body {
    font: normal 14px Arial, Helvetice, Verdana, sans-serif;
    line-height: 1.9em;
    color: #666;
    width: 600px;
    margin: 0 auto;
    padding-top: 50px;
}

.post {
    margin-bottom: 130px;
    .title {
        margin-top: 30px;
        text-align: right;
    }
}

.pager {
    a {
        text-decoration: none;
        color: #ddd;
        font-size: 72px;
        &:hover { color: #111; }
        &.next{ float: right; }
    }
}

了解 URL 匹配规则

template目录内的文件名本身决定了对应的 URL ,比如hello.jade这个模板文件,可以对应/hello这样的 URL 页面,以及/hello/xxx/xxxx这样以/hello/开头的 URL。
具体的请参考 URL匹配规则

了解基本的模板语法

  1. 模板语法采用的是 Jade 语法。
  2. 前端资源原生支持 SCSS、CoffeeScript,模板引擎会自动进行编译
  3. API 的调用,通常都已归于某个 namespace 内,比如postsimages, 调用的时候参考对应的 namespace 的个属性、函数即可。

具体的请参考 API与基本语法

关于模板的实时渲染

Bitcorn 的系统内置的模板实时渲染机制,当你的模板代码、SCSS、CoffeeScript 发生变化的时候,对应的页面会自动刷新、或者重载样式文件。
你可以在网站的设定中开启模板调试 Template Debug 的选项 (之后应该需要手工关闭以避免影响网站的浏览体验以及造成额外的资源消耗),来开启此实时渲染的功能。