在安企CMS中,内容模型的灵活性是其项目的一大亮点,它允许我们根据业务的实际需求,创建和管理各式各样的内容结构。无论是文章、产品、活动,还是其他任何需要特定字段来描述的信息,都可以通过自定义内容模型轻松实现。当我们为这些模型添加了专属的额外字段后,下一步自然就是如何在网站前端将这些宝贵的数据准确、美观地展现出来。
这并不是一个复杂的任务,安企CMS提供了直观便捷的模板标签来完成。我们将从自定义字段的创建,到如何在不同类型的页面(如详情页、列表页)中调用并显示这些数据,逐步深入探讨。
定义和配置自定义字段
在开始展示之前,我们首先需要确保自定义内容模型下的额外字段已经正确地定义和配置。这就像为我们的内容准备好一个专属的“信息表格”,每一个额外字段就是表格中的一个特定列。
您可以通过访问安企CMS后台的“内容管理”菜单,然后选择“内容模型”来进入模型管理界面。在这里,您可以选择编辑现有的内容模型,例如“文章模型”或“产品模型”,也可以根据需要创建全新的内容模型。
在内容模型的编辑界面,找到“内容模型自定义字段”部分。在这里,您可以根据业务需求添加新的字段。每个字段都需要设定以下关键信息:
- 参数名: 这是这个字段在后台界面显示的中文名称,方便您在管理内容时理解其用途,比如“文章来源”、“作者邮箱”。
- 调用字段: 这是在前端模板中用来调用这个字段数据的唯一标识,请务必使用英文小写字母,并确保其具有描述性,例如
source、authorEmail。这个名称是区分大小写的,所以在使用时需要严格匹配。 - 字段类型: 安企CMS提供了多种字段类型,以适应不同数据的存储需求,包括:
- 单行文本: 适用于短文本,如作者姓名、外部链接。
- 数字: 仅限输入数字,如价格、库存量。
- 多行文本: 适用于较长的文本,如产品特点、详细介绍。
- 单项选择、多项选择、下拉选择: 适用于预设选项的数据,如产品颜色、尺寸。这些选项需要在“默认值”中一行一个地填写。
- 是否必填: 决定用户在发布内容时是否必须填写此字段。
- 默认值: 如果字段有默认值,在发布内容时未填写,系统将自动使用此处设定的值。对于选择型字段,这里就是设置可供选择的选项。
完成这些配置后,当您在相应的模型下发布或编辑内容时,就会看到这些自定义字段出现在“其他参数”的折叠区域中,等待您填入数据。
在前端模板中展示自定义字段数据
自定义字段的“调用字段”名称,是我们在模板中获取数据的关键。安企CMS的模板引擎支持类似Django的语法,使用双花括号{{ 变量名 }}来输出变量,并使用{% 标签 %}来执行逻辑操作。
1. 在文档详情页(archiveDetail)或分类详情页(categoryDetail)中显示
当您处于单个文档(如文章、产品)的详情页,或者某个分类的详情页时,通常会用到archiveDetail或categoryDetail标签来获取当前页面的详细数据。要显示自定义字段数据,有几种常见的方式:
直接按字段名称调用:
这是最直接的方式。如果您的自定义字段的“调用字段”是author,那么在文档详情页中,您可以这样调用:
<div>作者:{% archiveDetail with name="author" %}</div>
或者,如果您已经将文档详情数据赋值给一个变量(例如archive),也可以直接通过点号访问:
<div>作者:{{ archive.author }}</div>
对于分类详情页,逻辑也是类似的。如果自定义字段的调用字段是customBanner,您可以在categoryDetail标签中使用:
<div>自定义Banner:<img src="{% categoryDetail with name='customBanner' %}" alt="分类自定义图片" /></div>
遍历所有自定义字段:
有时候,您可能希望在页面上动态显示所有已定义的额外字段及其值,而不必一一指定。archiveParams标签是为此而生的,它能获取当前文档或指定文档的所有自定义参数。
{% archiveParams params %}
<div>
<h3>额外参数信息:</h3>
{% for item in params %}
<div>
<span>{{ item.Name }}:</span>
<span>{{ item.Value }}</span>
</div>
{% endfor %}
</div>
{% endarchiveParams %}
这里item.Name对应的是您在后台设定的“参数名”(中文显示),而item.Value则是您在内容编辑时填入的实际数据。
对于分类详情页,您可以使用categoryDetail结合name="Extra"来遍历自定义字段:
{% categoryDetail extras with name="Extra" %}
<h3>分类额外信息:</h3>
{% for field in extras %}
<div>{{ field.Name }}:{{ field.Value }}</div>
{% endfor %}
{% endcategoryDetail %}
处理多行文本和HTML内容: 如果您的自定义字段类型是“多行文本”,并且您在其中输入了带有HTML标签或Markdown格式的内容,那么直接输出可能会导致内容转义,HTML标签不会被浏览器解析,或者Markdown格式无法正确渲染。
- 对于普通的HTML内容,您需要使用
|safe过滤器来告诉模板引擎这段内容是安全的,不需要转义:<div>详细介绍:{{ archive.descriptionDetail|safe }}</div> - 如果内容是Markdown格式,您需要先使用
|render过滤器将其渲染成HTML,然后再使用|safe过滤器:<div>Markdown内容:{{ archive.markdownContent|render|safe }}</div>
处理多项选择或组图字段:
如果您的自定义字段是“多项选择”或用于上传多张图片的“组图”类型,它们在模板中通常会作为一个数组对象返回。这时,您需要使用for循环来遍历并显示每一个值。
假设您定义了一个名为productImages的组图字段:
{% archiveDetail productImgs with name="productImages" %}
<ul class="product-gallery">
{% for imgUrl in productImgs %}
<li><img src="{{ imgUrl }}" alt="产品图片" /></li>
{% endfor %}
</ul>
{% endarchiveDetail %}
或者直接从archive变量中获取并循环:
<ul class="product-gallery">
{% for imgUrl in archive.productImages %}
<li><img src="{{ imgUrl }}" alt="产品图片" /></li>
{% endfor %}
</ul>
2. 在文档列表页(archiveList)中显示
在文档列表页,您通常会使用archiveList标签循环显示多篇文章或产品。在循环的每一个item中,您可以直接通过点号访问其自定义字段数据。
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>作者:{{ item.author }}</p> {# 直接访问自定义字段 'author' #}
<p>文章来源:{{ item.source }}</p> {# 直接访问自定义字段 'source' #}
<div class="summary">{{ item.Description }}</div>
{% if item.productImages %} {# 检查组图字段是否存在 #}
<div class="thumb-preview">
<img src="{{ item.productImages[0] }}" alt="封面图" /> {# 显示第一张图片 #}
</div>
{% endif %}
<span>发布日期:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% empty %}
<p>当前列表没有任何内容。</p>
{% endfor %}
{% endarchiveList %}
请注意,在列表页中直接访问自定义字段(如item.author)通常是最高效的方式。如果您仍需在循环内部获取所有自定义字段并通过archiveParams标签遍历,则需要传入当前列表项的ID:
”`twig {% archiveList archives with type=“list” limit=“5” %}
{% for item in archives %}
<div class