如何自定义模板 - lizheming/PMBlog GitHub Wiki

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

主题存放于tmp文件夹下，自定义模板必须存放在主题文件夹的根目录，比如说你现在使用的主题名称为Default，你的自定义模板为guestbook.html，那么你的自定义模板的路径必须为./tmp/Default/guestbook.html。

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

由于程序使用了Twig模板引擎，Twig的最大特点是采用了Django和Jinjia的模板语法，所以基本上你只要会这两个模板语法就OK了。如果不懂也没关系，可以去Twig的官方网站看看：Twig

基本语法

模板语法就是普通的HTML，但是用{{}} {%%}可以嵌入特殊的API代码。

{{ 使用变量或者运行函数 }}
{% 逻辑运算 %}

如果循环、判断，则会有对应起止，示例如下：

{% if site.title %}我有名字{% endif %}  --> 如果没有 {% endif %} 会报错

{%for post in posts %}
    文章的标题: {{post.title}}
{% endfor %} --> 如果没有{% endfor %} 也会报错

除了{% if %}、{% endif %}、{% for %}、{% endfor %}这些基本逻辑运算外，这几个也是常见的：{% block %}、{% endblock %}、{% extends 'something.html' %}、{% include 'something.html' %}, 下面会做具体的解释。

模板的继承

父模板(比如名为base.html)，它负责的是一个基本的框架，

Title Here
{% block head %}{% endblock %} 
{% block content %}{% endblock %}

子模板(比如名为detail.html)，它继承父模板的框架，并最终渲染页面

{% extends "base.html" %}  # 这里申明从哪个父模板继承
{% block content %}  # 声明block
    具体的内容
{% endblock %}
    **没有在block里面的内容，最终不会呈现，比如我这一行文字。**

{% block abc %}
    在base.html中，并没有声明一个abc的block，所以，这段文字也是不会被呈现。
{% endblock %}

模板的引用

比如名为t1.html的源码如下：

1234567
{% include 't2.html' %}
89

而t2.html的源码如下：

我是嵌入的文字或者代码

那么最终呈现为：

1234567
我是嵌入的文字或者代码
89

补充说明

静态资源的访问

由于主题需要使用一些静态资源，比如CSS, JS, 图片等，但是程序无法自动将其拷贝至site.config.html（文章输出）目录，需要使用者自己手动将相关资源复制过去。比如说我在模板中使用了style.css这个资源，目前文件的结构是这样的：

|-- html
    |-- index.html
|-- tmp
    |-- Default
        |-- css
            |-- style.css
        |-- index.html

在Default主题中，index.html页面使用了'./css/style.css'资源，那么你需要手动将css文件夹复制到html目录，即

|-- html            
    |-- css
        |-- style.css
    |-- index.html
|-- tmp
    |-- Default
        |-- css
            |-- style.css
        |-- index.html