如何自定义模板？

以下假设你正在使用Dropbox；如果不是，则需要下载FarBox的客户端，并且关联账户后，在本地电脑里，才能操作网站目录的数据。

直接开始写第一个模板吧！

准备工作

在网站的后台管理中，确保模板的优先级设置为了自定义模板。

Image Title

保证网站内是有文章的（不然模板看起来没有效果），然后进入代码编辑器，如下图所示：

Image Title

创建模板文件

创建index.jade(控制页面的内容)，源码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
html
    head
        title= site.title
        load("/template/style.scss")
    body
        for post in posts
            .post
                .content= post.content(1000)
                .title ——《{{post.title}}》
        .pager
            if pager.has_pre
                a.pre(href= pager.pre_url) <
            if pager.has_next
                a.next(href= pager.next_url) >

创建style.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
27
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;
        }
    }
}

开始改代码吧！

此时，你应该在另外的浏览器（非IE）窗口打开了自己的网站...

  1. 修改index.jade的第8行将1000改为10试试。
  2. 修改index.jade的第9行的《{{post.title}}》为《Hello world. {{post.title}}》
  3. 修改style.scss的第4行的color: #666;为color: red;
  4. .etc

如果你对HTML/CSS有一定的了解，就会发现在FarBox上自定义模板非常的简单与友好；即使不了解HTML/CSS，也可以猜测着修改一些地方，页面会随着修改而自动刷新，这样就知道自己改后的效果了！

对自定义模板感兴趣了，需要进一步了解？

我们建议可以按照下面三个步骤，进一步了解FarBox的模板系统。

第一步，了解模板目录所在的位置

假设你现在的网站目录为Dropbox/应用/FarBox/MyBlog/

模板页面则要放置于Dropbox/应用/FarBox/MyBlog/template/的目录下， 没有这个目录，则需要创建一个。

那么Dropbox/应用/FarBox/MyBlog/template/index.html的内容，将会是你的网站首页。

第二步，下载网站模板源码

我们建议可以先下载默认模板的代码。

也可以到我们团队托管在GitHub的代码库中找, 或者直接搜索其他人的模板代码。

然后，把需要的模板文件放在自己网站的template目录内。

几种常见的位置错误，举例说明：

Dropbox/应用/FarBox/MyBlog/template/index.html --> 正确的

如果出现以下路径，则是错误的:
Dropbox/应用/FarBox/MyBlog/template/Name/index.html --> 错误的
Dropbox/应用/FarBox/MyBlog/template/Name/template/index.html --> 错误的

第三步，了解FarBox模板的基本语法

head
    if site.title
        title= site.title
body
    for post in posts
        h1= post.title

这样的API语法是不是很漂亮? 具体可以了解FarBox模板语法。