如何使用AnQiCMS的模板语法显示动态数据?

安企CMS(AnQiCMS)作为一个高效、灵活的内容管理系统,其核心优势之一在于能够将后台数据动态地呈现在网站前端。无论是展示文章列表、产品详情,还是站点配置信息,AnQiCMS 都提供了直观且强大的模板语法来帮助您实现这一目标。理解并熟练运用这些模板语法,是打造高度定制化网站的关键。

AnQiCMS 的模板引擎采用了类似 Django 和 Blade 的语法,这使得熟悉其他主流CMS模板系统的用户能够快速上手。它的核心思想是通过特定的标签和双花括号来获取和展示动态数据,并利用逻辑标签来控制内容的显示方式。

掌握核心语法:变量与逻辑

在AnQiCMS模板中,您会主要接触到两种基本语法结构:

  • 双花括号 {{ 变量 }}:用于直接输出变量的值。这些变量可以是系统预设的,也可以是您从后台获取的动态数据字段。
  • 百分号花括号 {% 标签 %}:用于实现逻辑控制,比如条件判断(if-else)、循环遍历(for)以及调用各种功能标签。这类标签通常需要一个对应的结束标签,例如 {% if 条件 %}...{% endif %}{% for item in 列表 %}...{% endfor %}

接下来,我们将通过具体的示例,探讨如何利用这些语法来显示动态数据。

获取基础站点信息

每个网站都离不开一些全局性的配置,比如网站名称、Logo、联系方式等。AnQiCMS 提供了 systemcontact 标签来轻松获取这些信息。

假设您想在网站页头显示网站名称和Logo:

<header>
    <a href="/">
        <img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}" />
    </a>
    <h1>{% system with name='SiteName' %}</h1>
</header>

这里,{% system with name='SiteLogo' %} 会直接输出后台配置的网站Logo地址,而 {% system with name='SiteName' %} 则会输出网站名称。这种简洁的写法让您无需关心数据是如何从数据库中提取出来的,只需关注所需字段的名称。

同样地,联系方式如电话、地址、微信二维码,甚至是您在后台自定义的联系信息,都可以通过 contact 标签获取。例如,显示联系电话和自定义的WhatsApp:

<footer>
    <p>联系电话:{% contact with name='Cellphone' %}</p>
    {# 如果您在后台自定义了WhatsApp联系方式 #}
    <p>WhatsApp:{% contact with name='WhatsApp' %}</p>
</footer>

展示内容列表:文章、产品与分类

网站的核心在于内容,无论是文章、产品还是新闻,它们通常以列表的形式展示。archiveList 标签是获取这些动态内容列表的利器。配合 for 循环,您可以遍历并显示每条内容的标题、链接、简介、缩略图等。

比如,在首页显示最新发布的10篇文章:

<section class="latest-articles">
    <h2>最新文章</h2>
    <ul>
        {% archiveList archives with moduleId="1" type="list" limit="10" order="id desc" %}
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                        <h3>{{ item.Title }}</h3>
                        <p>{{ item.Description|truncatechars:100 }}</p> {# 截取简介前100个字符 #}
                        <span>发布时间:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无文章内容。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

这段代码中:

  • {% archiveList archives ... %} 获取了一个名为 archives 的文章列表。
    • moduleId="1" 指明获取文章模型(通常文章模型的ID为1)。
    • type="list" 表示只获取指定数量的列表,而非分页。
    • limit="10" 限制只显示10条。
    • order="id desc" 按照ID倒序排列,即最新发布在前。
  • {% for item in archives %} 遍历这个列表,每次循环将当前文章数据赋值给 item 变量。
  • {{ item.Link }}, {{ item.Title }}, {{ item.Thumb }}, {{ item.Description }}, {{ item.CreatedTime }} 分别输出文章的链接、标题、缩略图、描述和创建时间。
  • |truncatechars:100 是一个过滤器,用于截取字符串的前100个字符,并添加省略号。
  • stampToDate(item.CreatedTime, "2006-01-02") 是一个时间格式化函数,将时间戳格式化为“年-月-日”的形式。
  • {% empty %} 块会在 archives 列表为空时显示,提供了友好的用户体验。

除了文章,您还可以使用 categoryId 参数来筛选特定分类下的内容,或者通过 categoryList 标签来获取分类本身的列表,并通过嵌套 archiveList 来展示每个分类下的文章。

显示单条内容详情:自定义字段的魔力

当用户点击列表中的某篇文章或产品时,他们会进入详情页面。在详情页,archiveDetail 标签是获取当前内容所有信息的关键。AnQiCMS 的“灵活内容模型”特性在这里发挥得淋漓尽致,您可以自定义各种字段(如文章作者、产品价格、颜色、尺寸等),并在模板中轻松调用。

例如,显示一篇文章的完整内容,包括其自定义的“文章来源”字段:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <span>作者:{% archiveDetail with name="author" %}</span> {# 假设您自定义了“author”字段 #}
        <span>来源:{% archiveDetail with name="source" %}</span> {# 假设您自定义了“source”字段 #}
        <span>发布日期:{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
        <span>阅读量:{% archiveDetail with name="Views" %}</span>
    </div>
    <div class="article-content">
        {% archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }} {# 这里的 |safe 过滤器非常重要,因为它会阻止HTML内容被转义,从而正常显示文章中的图片、格式等 #}
    </div>
</article>

在这个例子中:

  • {% archiveDetail with name="Title" %} 直接输出当前文档的标题。
  • {% archiveDetail with name="author" %}{% archiveDetail with name="source" %} 是调用自定义字段的示例。只要您在后台的内容模型中添加了这些字段,就可以这样直接通过字段名来调用。
  • {{ archive.CreatedTime }} 是直接访问当前文档对象 archive 的属性(AnQiCMS在详情页会自动提供一个名为 archive 的全局对象)。
  • {% archiveDetail articleContent with name="Content" %}{{ articleContent|safe }} 分两步完成:先将内容赋值给一个临时变量 articleContent,然后使用 |safe 过滤器确保HTML内容正确渲染。

如果您想遍历所有的自定义参数,archiveParams 标签会非常有用:

<div class="custom-params">
    {% archiveParams params %}
        {% for item in params %}
            <p>{{ item.Name }}:{{ item.Value }}</p>
        {% endfor %}
    {% endarchiveParams %}
</div>

这将把所有后台设置的文档自定义参数(如“作者”、“来源”等)都以键值对的形式展示出来。

灵活的条件判断与分页显示

在内容运营中,经常需要根据某些条件来显示或隐藏内容,或者实现分页功能。

条件判断: 例如,判断当前文章是否有缩略图,并根据是否有图来决定显示方式:

{% if archive.Thumb %}
    <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
    <img src="/public/static/images/default-thumb.png" alt="默认缩略图" />
{% endif %}

分页显示: 对于内容量大的列表,分页是必不可少的功能。在使用 archiveList 标签时,将 type 设置为 "page",然后结合 pagination 标签,就可以轻松实现分页导航。

”`twig {# 先获取分页内容列表 #} {% archiveList archives with moduleId=“1” type=“page” limit=“10” order=“id desc” %}

{# 循环显示文章内容 #}
{# ... 循环代码与上文类似 ... #}

{% endarchiveList %}

{# 再显示分页导航 #}