作为一名经验丰富的安企CMS网站运营人员,我深知一套清晰、高效的模板系统对于网站内容管理的重要性。AnQiCMS 提供了高度灵活且易于定制的模板机制,让我们可以根据不同业务需求轻松创建个性化的页面布局。掌握其默认模板的创建方法,是高效运营和内容优化的基石。
本文将详细阐述如何为 AnQiCMS 的模型首页、文档详情页和列表页创建默认模板,并辅以关键标签的使用说明,以确保内容能够准确无误地呈现在用户面前。
AnQiCMS 模板系统概述
AnQiCMS 的模板系统旨在提供简洁而强大的内容展示能力。它采用类似 Django 模板引擎的语法,使用 .html 文件作为模板,并统一存放在网站根目录下的 /template 文件夹中。所有的样式、JavaScript 脚本和图片等静态资源则独立存放在 /public/static/ 目录。理解这种分离的结构是模板制作的第一步。
模板文件在 AnQiCMS 中以 UTF-8 编码存储,这确保了多语言内容的正确显示。系统还支持自适应、代码适配和 PC+手机端三种模板类型,满足不同设备访问的需求。为了提升开发效率,AnQiCMS 定义了一些默认的模板命名约定,只要按照这些约定创建文件,系统就能自动识别并应用,省去了在后台进行手动配置的步骤。
创建模型首页默认模板
模型首页是展示特定内容模型概览的页面,例如“文章中心”或“产品展示”。它的默认模板文件名约定为 {模型table}/index.html 或者在扁平化模式下为 {模型table}_index.html。这里的 {模型table} 是您在后台定义内容模型时指定的模型表名,例如 article 或 product。
在模型首页模板中,我们通常会展示该模型下的分类列表、最新发布的文档,或者是一些推荐内容。为了实现这些,我们可以利用 AnQiCMS 提供的强大模板标签。
您可以使用 {% moduleDetail %} 标签来获取当前模型的信息,例如模型的标题和描述,这有助于在页面顶部展示模型名称。接着,{% categoryList %} 标签可以用来列出该模型下的所有顶级分类或指定父级分类的子分类,让用户能够方便地导航到感兴趣的分类页面。对于展示最新或推荐文档,{% archiveList %} 标签是理想的选择,它可以根据模型ID、推荐属性(flag)或排序方式,灵活地拉取和展示文档列表。例如,您可以配置它来显示最新发布的十篇文章,或者带有“推荐”标志的产品。
{# 示例:模型首页模板 - article/index.html #}
{% extends 'base.html' %} {# 继承基础布局,如包含头部和底部 #}
{% block title %}
<title>{% moduleDetail with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="model-header">
<h1>{% moduleDetail with name="Title" %}</h1>
<p>{% moduleDetail with name="Description" %}</p>
</div>
<div class="category-navigation">
<h2>内容分类</h2>
<ul>
{% categoryList categories with moduleId=archive.ModuleId parentId="0" %}
{% for item in categories %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<li>当前模型下没有分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
<div class="latest-documents">
<h2>最新文档</h2>
<ul>
{% archiveList archives with moduleId=archive.ModuleId type="list" order="id desc" limit="10" %}
{% for item in archives %}
<li>
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
<span>发布日期:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% empty %}
<li>暂无最新文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
{% endblock %}
创建文档详情页默认模板
文档详情页是展示单个文档完整内容的页面。其默认模板文件名为 {模型table}/detail.html 或者在扁平化模式下为 {模型table}_detail.html。此模板是网站的核心内容展示区域,需要全面而丰富地呈现文档信息。
在文档详情页中,{% archiveDetail %} 标签是不可或缺的,它能获取当前文档的所有详细信息,包括 Title(标题)、Content(内容)、Description(描述)、Logo(封面首图)、Thumb(缩略图)、CreatedTime(创建时间)以及所有自定义字段。您需要使用 |safe 过滤器来确保文档内容中的 HTML 代码能够正确渲染,而不是被转义显示。
除了核心内容,我们还会用到 {% categoryDetail %} 标签来显示当前文档所属分类的信息,{% prevArchive %} 和 {% nextArchive %} 标签用于提供上下篇文档的导航链接,提升用户浏览体验。如果需要展示相关文档,{% archiveList archives with type="related" %} 标签可以自动查找并列出与当前文档相关的其他内容。此外,{% commentList %} 标签则用于展示和管理用户对当前文档的评论。
{# 示例:文档详情页模板 - article/detail.html #}
{% extends 'base.html' %} {# 继承基础布局 #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<article class="document-detail">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="meta-info">
<span>分类:<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span>发布日期:{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
<span>浏览量:{% archiveDetail with name="Views" %}</span>
</div>
<div class="document-content">
{%- archiveDetail documentContent with name="Content" %}
{{ documentContent|safe }}
</div>
{# 自定义字段展示示例,假设有一个名为“author”的自定义字段 #}
{% archiveDetail articleAuthor with name="author" %}
{% if articleAuthor %}
<div class="document-author">作者:{{ articleAuthor }}</div>
{% endif %}
<div class="navigation-links">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">上一篇:{{ prev.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">下一篇:{{ next.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
<div class="related-documents">
<h2>相关文档</h2>
<ul>
{% archiveList relatedDocs with type="related" limit="5" %}
{% for item in relatedDocs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
<div class="document-comments">
<h2>评论</h2>
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
{% for item in comments %}
<div class="comment-item">
<strong>{{ item.UserName }}</strong> @ {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}
<p>{{ item.Content }}</p>
</div>
{% empty %}
<p>暂无评论。</p>
{% endfor %}
{% endcommentList %}
{# 这里可以加入评论表单 #}
</div>
</article>
{% endblock %}
创建文档列表页默认模板
文档列表页用于展示一系列文档,通常会根据分类进行筛选并进行分页。其默认模板文件名为 {模型table}/list.html 或者在扁平化模式下为 {模型table}_list.html。
在文档列表页模板中,核心是 {% archiveList %} 标签,但与模型首页不同,这里我们需要将 type 参数设置为 page,并设置 limit 来控制每页显示的文档数量,从而启用分页功能。配合 {% pagination %} 标签,可以生成完整的页码导航。
{% categoryDetail %} 标签可用于获取当前列表所属分类的详细信息,如分类标题、描述或 Banner 图,以便在页面顶部展示分类特色内容。{% categoryList %} 标签可以用来展示当前分类的子分类或兄弟分类,方便用户在分类层级间切换。如果您的内容模型支持复杂的筛选条件,{% archiveFilters %} 标签能够自动生成基于文档自定义参数的筛选选项,极大增强了用户体验。
”`twig {# 示例:文档列表页模板 - article/list.html #} {% extends ‘base.html’ %} {# 继承基础布局 #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="list-header">
<h1>{% categoryDetail with name="Title" %}</h1>
<p>{% categoryDetail with name="Description" %}</p>