如何自定义模板?
API 文档
API 文档的网站位于 https://api.bitcron.com
准备工作
1, 进入网站的Dashboard
设置,在呈现(Render)
栏中的Debug Template
打开,主题
输入项中留空。
2,请确保自己网站内有文章、照片(如果是自定义相册类的模板) ,不然模板自定义没有真正预览的效果。
3,不论是客户端软件(比如 MarkEditor)或者 Bitcron.com 直接提供的 Web 端文件管理器
,进入template
这个目录,如果尚不存在,需要自己创建。自定义模板的所有文件,应该位于这个目录内。
创建第一个模板源文件
创建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匹配规则。
了解基本的模板语法
- 模板语法采用的是 Jade 语法。
- 前端资源原生支持 SCSS、CoffeeScript,模板引擎会自动进行编译
- API 的调用,通常都已归于某个 namespace 内,比如
posts
、images
, 调用的时候参考对应的 namespace 的个属性、函数即可。
具体的请参考 API与基本语法。
关于模板的实时渲染
Bitcorn 的系统内置的模板实时渲染机制,当你的模板代码、SCSS、CoffeeScript 发生变化的时候,对应的页面会自动刷新、或者重载样式文件。
你可以在网站的设定中开启模板调试 Template Debug
的选项 (之后应该需要手工关闭以避免影响网站的浏览体验以及造成额外的资源消耗),来开启此实时渲染的功能。
Jade 很久很久之前已经更名为 PUG 了话说