AnQiCMS 如何在模板中定义变量并将其值显示出来?

在 AnQiCMS 的模板中,我们经常需要处理各种数据,无论是网站的名称、文章的标题,还是产品详情,这些动态内容都需要通过变量来承载并展示出来。理解如何在模板中定义和显示变量,是进行 AnQiCMS 模板开发的核心。

AnQiCMS 采用了类似 Django 模板引擎的语法,这使得变量的使用直观且易于上手。在模板文件(通常是 .html 格式,并存放在 /template 目录下)中,我们主要通过两种符号来操作内容:双花括号 {{ }} 用于输出变量的值,而单花括号和百分号 {% %} 则用于定义逻辑结构,比如条件判断或循环,有时也用于调用特定的数据标签并定义变量。

基础变量的显示

最直接的变量显示方式,就是使用双花括号包裹变量名。例如,当你想要在页面上显示当前文章的标题时,如果后端已经将文章数据传递到模板中,并命名为 archive 对象,你就可以这样轻松地显示出来:

<h1>{{ archive.Title }}</h1>

这里的 archive 是一个对象,Title 则是这个对象的属性。通过 .(点号)运算符,我们可以层层深入地访问对象的属性。AnQiCMS 的变量命名通常遵循驼峰命名法则,即每个单词的首字母大写,例如 archive.Idarchive.Link

在模板中定义新的变量

有时候,我们可能需要在模板内部创建一些临时变量,以便于后续的计算、组合或在局部代码块中使用。AnQiCMS 提供了 setwith 两种方式来定义变量。

set 标签用于在当前模板文件中定义一个新变量并赋值。这个变量的作用域会持续到当前模板文件的末尾。

{% set myTitle = "欢迎来到安企CMS的世界" %}
<p>{{ myTitle }}</p>

with 标签则更常用于定义一个临时的、作用域受限的变量,它通常与 include 标签结合使用,为引入的子模板传递特定数据,或者在某个代码块内进行局部变量声明,并通过 {% endwith %} 结束其作用域。

{% with headerTitle = "安企CMS官方网站" %}
    <h1>{{ headerTitle }}</h1>
{% endwith %}
{# 在这里,headerTitle 变量将不再可用 #}

利用内置标签获取并显示数据

AnQiCMS 内置了许多功能强大的标签,它们可以直接从后台获取配置数据、内容数据等,并提供两种常用的显示变量值的方式:直接输出或先定义为变量再输出。

以获取网站名称为例,我们可以使用 system 标签。如果只是想直接在某个位置显示网站名称,可以这样写:

<p>我们的网站名称是:{% system with name="SiteName" %}</p>

如果希望将网站名称赋值给一个新变量,以便在模板中的多个位置灵活使用,或者进行进一步处理,可以在标签后指定变量名:

{% system siteBrandName with name="SiteName" %}
<p>网站品牌:{{ siteBrandName }}</p>
<meta property="og:site_name" content="{{ siteBrandName }}">

类似的标签还有 contact(用于获取联系方式,如 {% contact cellPhone with name="Cellphone" %}{{ cellPhone }})、tdk(用于获取页面 SEO 相关的 TDK 信息)、archiveDetail(获取文章详情)、categoryDetail(获取分类详情)和 pageDetail(获取单页详情)等。它们都遵循这种通过 with name="字段名称" 来指定获取哪个字段的模式。

处理列表数据:for 循环

在网站中,我们经常需要展示文章列表、产品列表等集合数据。AnQiCMS 的 for 循环标签能够遍历这些数据集合,并在每次迭代中将当前项赋值给一个临时变量,供我们显示其属性。

例如,要显示最新的十篇文章列表,可以配合 archiveList 标签:

{% archiveList articles with type="list" limit="10" %}
    <ul>
        {% for item in articles %}
            <li>
                <a href="{{ item.Link }}">
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description|truncatechars:100 }}</p>
                    <small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</small>
                </a>
            </li>
        {% empty %}
            <li>暂无文章</li>
        {% endfor %}
    </ul>
{% endarchiveList %}

在这个例子中,for item in articles 会在每次循环时将当前文章数据赋值给 item 变量。我们就可以通过 item.Linkitem.Title 等方式来访问并显示文章的各项属性。forloop.Counter 等内置变量还能帮助我们获取循环的当前索引等信息。

条件性显示:if 语句

有时,我们可能需要根据特定条件来决定是否显示某个变量或代码块。if 语句允许我们进行逻辑判断。

例如,如果一篇文章没有缩略图,我们就不显示图片区域:

{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% else %}
    <img src="{% system with name="SiteLogo" %}" alt="默认图片">
{% endif %}

使用过滤器美化和处理变量

AnQiCMS 提供了丰富的过滤器(Filters)来对变量进行加工处理,例如格式化、截取、转义等。使用过滤器时,只需在变量名后加上 |(管道符)和过滤器名称即可。

  • |safe 当变量内容包含 HTML 代码,而你不希望它被转义显示时,使用 |safe 过滤器可以确保 HTML 代码被浏览器正确解析。这对于显示富文本编辑器内容尤为重要。
    
    <div>文章内容:{{ archive.Content|safe }}</div>
    
  • |stampToDate AnQiCMS 的时间戳通常以 10 位数字形式存储,stampToDate 函数可以将其格式化成我们需要的日期时间格式。 “`twig 更新时间:{{ stampToDate(archive.UpdatedTime, “2006年0