CPress 中的模板语法

CPress 使用的模板语法类似 Python 的模板引擎 Jinja2,或 PHP 中的 Twig 模板引擎。


变量

    变量赋值
    {% set name = "CPress" %}

    使用变量
    {{ name }}

    使用对象属性
    {% set user = {"name": "Jack", "age": 18} %}
    {{ user.name }}
    {{ user.age }}

    {{ user["name"] }}


注释

    {# 这是注释 #}

转义


    把  {{ 作为原始字符串使用

        {{ "{{" }}


    标记一个块为 raw ,这个块内的 {{ 或 {% 都作为普通字符串

        {% raw %}
            {% for item in seq %}
            {% endfor %}
        {% endraw %}


循环


    {% set books = [{"id":1001, name:"深入计算机原理"}, {"id":1002, "name":"Java编程思想"}] %}

    <ul>
        {% for item in books %}
            <li>{{ item.id }} {{ item.name }}</li>
        {% endfor %}
    </ul>

    在一个 for 循环块中你可以访问这些特殊的变量
    loop.index  当前循环迭代的次数(从 1 开始)
    loop.length 序列中的项目数

    <ul>
        {% for item in books %}
            <li>{{ loop.index }}. {{ item.name }}</li>
        {% endfor %}
    </ul>


条件判断


    {% set age = 22 %}
    {% if age >= 18 %}
        <div>我的世界我作主</div>
    {% else %}
        <div>我还只是个孩子</div>
    {% endif %}

    {% set books = [] %}

    {% if books %}
        <ul>
            {% for item in books %}
                <li>{{ item.name }}</li>
            {% endfor %}
        </ul>
    {% else %}
        <div>暂无图书数据</div>
    {% endif %}


运算符

    <div>算术</div>
    <div>{{ 1 + 1 }}</div>
    <div>{{ "1" + "1" }}</div>
    <div>{{ 3 - 2 }}</div>
    <div>{{ 2 * 2 }}</div>
    <div>{{ 5 / 2 }}</div>
    <div>{{ 5 // 2 }}</div>
    <div>{{ 5 % 2 }}</div>
    <div>{{ 2**3 }}</div>

    <div>比较</div>
    <div>{{ 1 == 2 }}</div>
    <div>{{ 1 != 2 }}</div>
    <div>{{ 1 > 2 }}</div>
    <div>{{ 1 >= 2 }}</div>
    <div>{{ 1 < 2 }}</div>
    <div>{{ 1 <= 2 }}</div>

    <div>逻辑</div>
    <div>{{ 1 == 2 and 3 == 3 }}</div>
    <div>{{ 1 == 2 or 3 == 3 }}</div>
    <div>{{ not (1 == 2) }}</div>

    <div>其它运算符</div>

    <div>{{ 1 in [ 1, 2, 3] }}</div>
    <div>{{ 1 not in [ 1, 2, 3] }}</div>

    {% set name = "CPress" %}
    {{ "Hello " ~ name ~ "!" }}

    <div>
        {% if var1 is defined %}
            var1 变量已定义,值为 {{ var1 }}
        {% else %}
            var1 变量未定义
        {% endif %}
    </div>


过滤器


    <div>{{ -123 | abs }}</div>

    {% set name = "hello CPress" %}
    <div> {{ name | capitalize }} </div>
    <div> {{ name | upper }} </div>
    <div> {{ name | length }}</div>
    <div> {{ name | truncate(5, true, "…") }}</div>
    <div> {{ name | reverse }}</div>
    <div> {{ name | replace("你好", "Hello") }}</div>

    {% set html = "<a href='https://www.baidu.com'>百度</a>" %}
    <div>{{ html }}</div>
    <div>{{ html | safe }}</div>
    <div>{{ html | striptags }}</div>

    变量未定义
    {% set user = {"name": "Jack", "age": 18} %}
    <div>{{ user.intro | default("用户很懒,什么也没留下") }}</div>

    变量值为空
    {% set user = {"name": "Jack", "age": 18, "intro": ""} %}
    <div>{{ user.intro | default("用户很懒,什么也没留下", true) }}</div>

    {% set names = ["Jack", "Mary", "Lily"] %}
    <div>{{ names | first }}</div>
    <div>{{ names | join(", ") }}</div>

    <div>{{ "123" | float + 4 }}</div>
 

    格式化日期时间

    <div>{{ today() | date("yyyy-MM-dd HH:mm:ss") }}</div>

模板包含

    {% include "header.twig" %}
        Body
    {% include "footer.twig" %}



模板继承

    父模板 base.twig


    {% block main %}{% endblock %}


    子模板 index.twig

    {% extends "base.twig" %}
    {% block main %}
        Welcome on my awesome homepage.
    {% endblock %}
 


内置函数

    url() 生成页面的链接

        <a href="{{ url('/news') }}"></a>

        对应跳转地址为 http://example.com/news

        <a href="{{ url('/book', {id: 3, foo:'bar'}) }}">详情</a>

        对应跳转地址为 http://example.com/book?id=3&foo=bar

    asset() 生成静态资源的引用

        <img src="{{ asset('/images/demo.png' }}">  对应当前主题目录下的 images/demo.png

        <link rel="stylesheet" href="{{ asset('/css/style.css', {v: '1.0'}) }}"> 

        对应当前主题目录下的 css/style.css?v=1.0

    plugin()  引用插件

    fetch()  查询数据库

    config()  查询网站配置

    pageLink()  生成分页按扭

        第一个参数为跳转页面地址(即不带分页的部份)

        第二个参数是 fetch() 函数查询得到的分页对象

        第三个参数是额外需要添加的 url 参数

        第四个参数用于定制生成的标签

        {{ pageLink("/news", pagination) }}

        {{ pageLink("/news", pagination, {foo:1, bar:2}, {rootTag:"div", itemTag:"", currentTag:"a", prevPageLabel:"<", nextPageLabel:">"}) }}