如何在文章或产品详情页展示其自定义参数?

在网站运营中,为文章或产品详情页增添个性化信息,是提升内容专业度和用户体验的关键。安企CMS(AnQiCMS)深知这一需求,提供了强大的自定义参数功能,让我们可以根据不同内容类型,灵活地添加和展示所需信息。

想象一下,你发布了一篇技术文章,除了标题、正文,你还想展示“作者”、“发布日期”、“技术栈”等独有属性;又或者,你正在销售一款产品,除了常规的名称、价格、描述,你还希望突出“颜色”、“尺寸”、“材质”甚至“产地”等具体参数。安企CMS的自定义参数功能,正是为了满足这些个性化展示需求而生。

理解安企CMS的自定义参数

安企CMS的核心优势之一是其“灵活的内容模型”。这意味着,它不只是提供一套固定的内容结构,而是允许我们根据实际业务需求,为不同类型的内容(例如文章、产品)创建专属的“内容模型”。而自定义参数,就是这些内容模型中的个性化字段。

通过自定义参数,我们能够打破传统CMS的束缚,让每一篇文章或产品详情页都能拥有独特的属性,极大地丰富了内容的维度和信息量,同时也为前端页面的差异化展示提供了数据基础。

在后台定义和管理自定义参数

要使用自定义参数,首先需要在安企CMS的后台进行定义。这个过程非常直观:

  1. 进入“内容管理”下的“内容模型”:这里列出了网站中所有的内容模型,比如“文章模型”和“产品模型”。我们可以选择编辑现有模型,或者新建一个自定义模型。
  2. 添加自定义字段:在内容模型的编辑界面,你会看到一个“内容模型自定义字段”区域。点击添加新的字段,就可以开始定义你的专属参数了。
    • 参数名:这是用于后台展示的中文名称,方便我们理解和填写。例如“文章作者”、“产品颜色”。
    • 调用字段:这是在模板中调用时使用的英文字段名,建议使用有意义的英文小写字母组合,例如authorproductColor。这个名称是唯一标识字段的关键。
    • 字段类型:安企CMS提供了多种字段类型,如单行文本、数字、多行文本、单项选择、多项选择和下拉选择。根据你希望收集和展示的数据类型来选择,比如产品颜色可以用单项选择或下拉选择。
    • 是否必填、默认值:这些设置可以帮助我们规范内容的录入。

通过这些步骤,我们就为内容模型添加了专属的自定义参数。

在文章或产品中填写自定义参数

自定义参数定义完成后,当我们去发布或编辑文章/产品时,这些字段就会出现在页面的“其他参数”折叠框中。

举个例子,如果你定义了一个“产品模型”,并在其中添加了material(材质)和weight(重量)两个自定义字段。那么,在你编辑某个具体产品时,选择对应的产品分类后,在“其他参数”区域,就会看到“材质”和“重量”的输入框。我们只需在这里填入相应的值,这些个性化信息就会与该文章或产品关联起来。如果有些字段我们选择留空,但后台定义了默认值,那么在前端调用时,系统会自动使用其默认值。

在模板中灵活展示自定义参数

数据已经有了,现在最重要的是如何在网站前台的模板中优雅地展示它们。安企CMS提供了非常灵活的模板标签,可以轻松实现这一点。

方法一:循环输出所有自定义参数

对于希望以列表形式展示所有或部分自定义参数的场景,可以使用archiveParams标签。这个标签能够获取当前文章或产品的所有自定义参数。

你可以这样使用它:

{% archiveParams params %}
<div class="custom-parameters">
    {% for item in params %}
    <div class="param-item">
        <span class="param-name">{{item.Name}}:</span>
        <span class="param-value">{{item.Value}}</span>
    </div>
    {% endfor %}
</div>
{% endarchiveParams %}

在上面的代码中,{% archiveParams params %}将当前文章或产品的自定义参数集合赋值给params变量。接着,我们使用{% for item in params %}循环遍历这个集合。item.Name会输出参数在后台定义的“参数名”(如“产品材质”),item.Value则输出我们为该文章/产品填写的具体值(如“纯棉”)。

这个方法的好处是,无论你后台添加了多少个自定义参数,这段代码都能自动地将它们全部或大部分展示出来,非常适合产品参数列表等场景。如果你只希望显示特定的字段,可以在for循环内使用{% if item.Name != '不需要显示的参数名' %}进行条件判断。

方法二:直接调用特定自定义参数

如果你只需要在模板的特定位置展示某个具体的自定义参数,而不是循环输出所有,可以使用archiveDetail标签配合name属性。

假设你有一个名为author的自定义字段,想在文章标题下方显示作者:

<h1 class="article-title">{{archive.Title}}</h1>
<p class="article-author">
    作者:{% archiveDetail with name="author" %}
</p>

这里,{% archiveDetail with name="author" %}会直接输出当前文章中author字段的值。这种方式简洁明了,适合将特定参数融入到页面的固定布局中。

处理特殊类型自定义参数:组图

有些自定义参数可能需要特殊处理,例如,如果你定义了一个用于上传多张图片的自定义组图字段(假设其“调用字段”为productImages),那么在模板中,它会返回一个图片URL的数组。你需要再次循环这个数组来展示图片:

{% archiveDetail productImages with name="productImages" %}
<div class="product-gallery">
  {% for imgUrl in productImages %}
  <img src="{{imgUrl}}" alt="产品图片" class="product-image" />
  {% endfor %}
</div>

通过{% archiveDetail productImages with name="productImages" %}将组图数据赋值给productImages,然后遍历productImages数组,即可逐一展示图片。

示例:产品详情页的自定义参数展示

结合实际,一个典型的产品详情页可能会这样利用自定义参数:

<article class="product-detail">
    <div class="product-header">
        <h1 class="product-name">{% archiveDetail with name="Title" %}</h1>
        <p class="product-description">{% archiveDetail with name="Description" %}</p>
    </div>

    <div class="product-specs">
        <h2>产品参数</h2>
        {% archiveParams params %}
        {% for item in params %}
        <div class="spec-row">
            <span class="spec-label">{{item.Name}}:</span>
            <span class="spec-value">{{item.Value}}</span>
        </div>
        {% endfor %}
        {% endarchiveParams %}
    </div>

    <div class="product-content">
        <h2>详细介绍</h2>
        <div class="content-body">
            {%- archiveDetail articleContent with name="Content" %}
            {{articleContent|safe}}
        </div>
    </div>
</article>

这段代码结合了archiveDetail获取常规信息(标题、描述、正文)和archiveParams循环输出自定义参数,构建了一个内容丰富的页面。

在分类详情页展示自定义参数(拓展)

不仅是文章和产品,安企CMS的“分类”也可以拥有自定义参数。这在一些特殊场景下非常有用,比如为某个产品系列分类添加一个“系列特色”的自定义参数。

在分类详情页的模板中,你可以使用categoryDetail标签来获取分类的自定义参数。如果你的自定义字段名为seriesFeature,可以直接调用:{% categoryDetail with name="seriesFeature" %}

如果想要循环输出所有分类的自定义参数,可以使用categoryDetail extras with name="Extra",然后遍历extras变量。这与archiveParams的用法异曲同工。

总结

安企CMS的自定义参数功能,为网站内容的个性化展示提供了极大的灵活性。从后台定义到前端展示,整个流程设计得非常人性化和高效。无论是为文章添加专业信息,还是为产品提供详尽规格,合理运用自定义参数,都能让我们的网站内容更加丰富、专业,从而更好地满足用户需求,提升网站的整体价值。


常见问题 (FAQ)

1. 为什么我在文章详情页使用archiveParams标签时,有些自定义参数没有显示出来?

通常情况下,archiveParams会获取所有已定义的自定义参数。如果部分参数未显示,有几种可能: a. 未正确填写内容:在后台编辑文章或产品时,确保这些自定义参数字段已被填写。如果字段为空,默认情况下可能不会显示。 b. 字段类型问题:某些字段类型(如图片组图)需要二次循环才能完整显示,如果你直接{{item.Value}},可能只显示一个数组或JSON字符串,而不是渲染后的内容。请参考上面的“处理特殊类型自定义参数:组图”部分。 c. sorted参数的影响archiveParams默认sorted=true,返回一个有序数组。如果你显式设置了sorted=false,它会返回一个无序的map对象,此时你需要通过键名(即调用字段名)来访问,例如{{params.myCustomField.Value}}。如果遍历的是params,那么无论sorted为何值,都应能正常显示。

2. 如何在自定义参数中添加图片或更复杂的HTML内容?

如果你的自定义参数需要包含图片、链接或格式化的文本,可以在定义自定义参数时,将“字段类型”设置为“多行文本”,并在后台填写内容时,直接粘贴HTML代码或图片URL。在前端模板中显示时,务必使用|safe过滤器,例如{{item.Value|safe}},以防止HTML代码被转义而无法正常显示。如果希望支持Markdown格式,需要确保安企CMS已开启Markdown编辑器,并且在模板中正确处理Markdown渲染(例如,使用|render|safe)。

3. 我定义了一个“产品产地”的自定义字段,如何在产品列表页也显示出来?

自定义参数主要用于详情页展示。如果需要在列表页展示,你需要利用archiveList标签的item变量,并结合archiveParams来获取每个列表项的自定义参数。具体做法是,在archiveList的循环中,使用archiveParams并指定当前列表项的ID:

{% archiveList products with type="page" limit="10" %}
    {% for item in products %}
    <div>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <!-- 其他列表信息 -->
        <p>
            产地:{% archiveParams param with id=item.Id sorted=false %}{{param.productOrigin.Value}}{% endarchiveParams %}
            <!-- 假设你的“产品产地”调用字段是 productOrigin -->
        </p>
    </div>
    {% endfor %}
{% endarchiveList %}

这里使用了archiveParams param with id=item.Id sorted=false来获取当前列表项(item)的自定义参数,并将其赋值给param,然后通过param.productOrigin.Value直接访问产地字段的值。请注意sorted=false是为了能够直接通过productOrigin键名访问。