跳转至

模板开发(基于 2.1.7)

使用模板标签前请先通读 Nunjucks 文档

常用的模板标签

{% header adaptor="default" %}

<!-- 模板静态资源 -->
{% assets 'base.css index.css media.css swiper.min.css list.css swiper.min.js' %}
{% endassets %}

<!-- 二次开发静态资源 -->
{% assets 'dora.front.js white.css' %}
{% endassets %}

{% endheader %}
* adaptor 必填,可选值 ['default','ie','modernizr'],如无特殊需要,填 default * 约定,每个模板下的静态资源文件夹为 js, css,若文件夹下直接对应的静态资源文件,那么可以这样引用

如果 js 或 css 文件夹下还有子文件夹,那么需要填完整路径,尽量避免这种情况

{% assets 'base.css index.css media.css swiper.min.css list.css swiper.min.js' %}
{% endassets %}

获取最新文档 news

// 获取最新的6条文档
{% news pageSize=6 %} 
// 循环输出
{% for item in news %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}
如果在同一个页面想获取不同分类下的最新文档,可以定义一个 key ,配合 typeId 来实现
{% news key="nodejs","pageSize"=6,"typeId"="E1lagiaw" %}
{% for item in nodejs %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}

获取推荐文档 recommend

{% recommend pageSize=3 %}
{% for item in recommend %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}

获取热门文档 hot

{% hot pageSize=6 %}
{% for item in hot %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}

获取热门标签 hottags

{% hottags pageSize=15 %}
{% for tagItem in hottags %}
<li><a href="{{tagItem.url}}">{{tagItem.name}}</a></li>
{% endfor %}

获取指定名称的广告 ads

{% ads name="recommend" %}
{{adsPannel.slider(recommend)}}
{% navtree 'default' %}
{% for cate in navtree %}
...
{% endfor %}

获取指定类别下的子类 childnav

{% childnav key="tabTwoTitle","pageSize"=10,"typeId"="Nycd05pP" %}
{% for cateItem in tabTwoTitle.cates %}
...
{% endfor %}

获取指定文档的上下篇 near_post

{% near_post "id"=post._id %}
{% if near_post %}
<div class="near-article">
    <ul>
        {% if near_post.preContent.title %}
        <li class="left">{{__('lc_pre_document')}}: <a href="{{near_post.preContent.url}}"
                target="_self">{{near_post.preContent.title}}</a>
        </li>
        {% endif %}
        {% if near_post.nextContent.title %}
        <li class="right">{{__('lc_next_document')}}: <a href="{{near_post.nextContent.url}}"
                target="_self">{{near_post.nextContent.title}}</a>
        </li>
        {% endif %}
    </ul>
</div>
{% endif %}

通用模板调用接口显示数据方式

原则上,所有的 api 都可以通过如下方式进行调用并展示数据

DoraCMS 中我们把 {% %} 作为开始结束标签。DoraCMS 模版标签的是以下面的方式进行声明

{% remote key="tabContents",api="content/getList",query='{"model":"1","pageSize":7,"isPaging":"0","typeId":"Ek7skiaw"}' %}

模版标签必须以 {% 开头,并以 %} 结尾的代码片段,如果不正确会引起程序致命性的错误,导致程序无法继续运行。

模版标签分析

标签中 {% 后的 remote 是固定的,通过 remote 标记,我们可以使用服务端定义的方法来请求数据

key="tabContents"
这是开发者指定的变量,代表的是返回数组接收的变量。

api="content/getList"
这是获取数据指定的api,在模板中展示的数据主要来自api,数据获取是异步的。

query='{"model":"1","pageSize":7,"isPaging":"0","typeId":"Ek7skiaw"}'
query 是选填的,包含了在接口请求过程中需要携带的参数,query 中约定了几个参数可以传递:

变量名 默认值 备注
current 1 当前页码
pageSize 10 每页数量
isPaging 1 是否分页 0:不分页 1:分页

这个形式所代表的是参数。每一个模型都为其模版标签定义了调用的参数。其中有一些调用参数是系统保留的参数,其对所有的模版标签都是有效的。

参数必须使用

参数名="参数值"

的方式填写,多个参数之间使用’,’分开(如下例),参数值可使用双引号来包括,无论是什么形式的引号都必须是成对出现的。

{% remote key="demoKey", 参数名="参数值",参数名="参数值",参数名="参数值" %}
请查看模版表情标签保留参数相关章节,以了解具体保留参数及其用途。

如何显示模版标签中的数据

默认情况下模版标签中的数据都是数组方式返回的,你都可以通过 你在模版标签中定义key的参数来接收返回的数组。 比如上例定义key为 'demoKey' ,你可以使用如下的方式来显示值:

<ul>
{% for val in demoKey%}
<li><a href="{{val.url}}">{{val.title}}</a></li>
{% endfor %}
</ul>

基中的{{val.name}},{{val.id}}和{{val.title}}需要具体根据所使用的模版标签,返回的数据来判断。

模版标签保留参数

下表为模版标签保留参数表,几乎所有的模版标签都支持这些保留参数设置

变量名 默认值 备注
key - 定义接收数据参数
api - 获取数据的接口
query - 接口请求携带的参数

下例中是首页请求热门标签的例子。

{% remote key='hotTags',api="contentTag/getList",query='{"isPaging":"0"}' %}
{% for tagItem in hotTags %}
<a href="/tag/{{tagItem.name}}" target="_blank">{{tagItem.name}}</a>
{% endfor %}