模板开发(基于 2.1.7)
使用模板标签前请先通读 Nunjucks 文档
常用的模板标签
公共模板 header
{% 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
{% 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 %}