如何在前端页面中显示后台自定义的站点参数？

在运营网站时，我们经常会遇到这样的需求：需要在前端页面上显示一些灵活可变的站点信息，比如公司成立年份、客服热线、特定页面的宣传语、或者一段简短的公告等。这些信息可能需要经常更新，如果每次都去修改模板文件，既低效又容易出错。幸运的是，安企CMS为我们提供了非常便捷的方式来管理和显示后台自定义的站点参数，让内容运营变得更加高效和灵活。

在后台定义您的自定义站点参数

要让自定义参数在前端页面上显示，我们首先需要在安企CMS的后台进行定义。

通常，您可以在后台设置中找到全局设置选项。进入全局设置页面后，您会看到一些网站名称、Logo等默认设置项。在这下方，有一个“自定义设置参数”区域。这里就是我们创建自定义参数的地方。

点击“添加自定义参数”，您会看到三个输入框：

• 参数名：这是您在前端模板中调用这个参数时会用到的“名字”。安企CMS会自动将其转换为驼峰命名法（例如，如果您输入公司成立年份，在模板中调用时建议使用CompanyFoundYear）。为了便于记忆和使用，建议您输入有意义的英文名称，例如CompanySlogan（公司标语）或CustomerServiceHotline（客服热线）。
• 参数值：这是您希望在前端页面上实际显示的内容。您可以填写任何文本、数字，甚至HTML代码。
• 备注：这个字段纯粹是为了方便您自己管理和理解这个参数的用途，它不会在前端页面显示。

举个例子，假设您想在网站底部显示一句公司的标语：“安企CMS，让网站更安全、更高效！” 您可以这样设置：

• 参数名：CompanySlogan
• 参数值：安企CMS，让网站更安全、更高效！
• 备注：网站底部宣传语

完成设置后，记得点击保存。

值得一提的是，除了全局设置，在联系方式设置中也提供了类似的自定义参数功能。如果您需要添加WhatsApp号码、Skype账号等特定的联系方式，但又不想改动模板结构，可以在那里以相同的方式进行定义，只是前端调用时会使用{% contact %}标签。

在前端模板中调用并显示参数

在后台定义好参数后，接下来就是如何在前端模板中调用并显示它们了。安企CMS的模板系统非常灵活，采用了类似Django模板引擎的语法，让您能轻松上手。

对于我们在全局设置中定义的自定义参数，主要会用到{% system %}标签。它的基本使用方式是这样的：

{% system 变量名称 with name="后台定义的参数名" %}

或者，如果您不希望给参数值额外定义一个变量，可以直接输出：

{% system with name="后台定义的参数名" %}

让我们以上面定义的CompanySlogan为例。如果您想在模板（比如页脚partial/footer.html）中显示这句标语，可以这样编写代码：

首先，为这个参数值定义一个模板变量，比如slogan：

{% set slogan = '' %} {# 提前声明变量，这是一个好习惯 #}
{% system slogan with name="CompanySlogan" %}
<p>{{ slogan }}</p>

这段代码首先声明了一个名为slogan的变量，然后使用{% system %}标签将后台CompanySlogan参数的值赋给slogan变量，最后在p标签中显示{{ slogan }}。

如果您后台CompanySlogan参数值是安企CMS，让网站更安全、更高效！，那么页面上就会显示：

<p>安企CMS，让网站更安全、更高效！</p>

处理包含HTML代码的参数值

有时候，您自定义的参数值可能不仅仅是纯文本，它可能包含HTML代码，比如一个带有链接或样式的内容。例如，您在CompanySlogan的“参数值”中输入的是：

<b>安企CMS</b>，让网站更<i>安全</i>、更高效！<a href="/about">了解更多</a>

如果直接使用{{ slogan }}，出于安全考虑，安企CMS的模板引擎会自动对HTML标签进行转义，导致页面上显示的是原始的HTML代码而不是解析后的效果。为了正确显示，您需要用到|safe过滤器：

{% set slogan = '' %}
{% system slogan with name="CompanySlogan" %}
<p>{{ slogan|safe }}</p>

加上|safe过滤器后，模板引擎就会知道这段内容是安全的，并将其作为HTML代码正常解析和显示。

调用联系方式的自定义参数

如果您在联系方式设置中定义了自定义参数，比如添加了一个WhatsApp字段，那么在前端模板中，您需要使用{% contact %}标签来调用：

{% set whatsappNumber = '' %}
{% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
  <p>WhatsApp: {{ whatsappNumber }}</p>
{% endif %}

一些实用的小技巧和注意事项

• 让代码更整洁：您可以使用{% set %}标签来定义临时变量，将{% system %}或{% contact %}标签获取的值先赋给这些变量，再进行显示。这样做可以让您的模板代码更清晰，尤其当您需要多次使用同一个参数时。

• 设置默认值：有时候，您可能不确定某个自定义参数是否已经设置了值。为了避免页面上出现空白，您可以使用|default过滤器为其设置一个默认的显示内容：

  {% set slogan = '' %}
  {% system slogan with name="CompanySlogan" %}
  <p>{{ slogan|default:"我们致力于提供优质服务" }}</p>
  

  如果CompanySlogan没有在后台设置，页面上将显示“我们致力于提供优质服务”。

• 多站点管理：如果您使用安企CMS的多站点功能，并且希望调用特定站点的自定义参数，可以在{% system %}和{% contact %}标签中添加siteId参数来指定站点。例如：{% system siteName with name="SiteName" siteId="2" %}，这将获取ID为2的站点的网站名称。

• 清理缓存：在后台修改了自定义参数后，前端页面可能不会立即更新。这是因为安企CMS有缓存机制。您需要在后台找到“更新缓存”选项，点击清理系统缓存，然后刷新前端页面，才能看到最新的内容。

通过安企CMS提供的这些功能，您可以轻松地将后台自定义的站点参数显示在前端页面上，实现灵活的内容管理，大大提升网站的运营效率。

常见问题 (FAQ)

1. 为什么我在后台设置了自定义参数，但在前端页面上却显示不出来？

很可能是缓存导致的问题。在安企CMS后台修改了自定义参数后，需要前往“更新缓存”功能，点击清理系统缓存。清理完成后，刷新您的前端页面，通常就能看到更新后的内容了。此外，也请检查您的模板代码中{% system %}或{% contact %}标签的name属性是否与后台设置的“参数名”完全匹配（包括大小写）。

2. 我自定义的参数值包含HTML代码，比如一个<b>标签，为什么在页面上显示的是原始的<b>而不是加粗的文字？

这是安企CMS出于安全考虑的默认行为，模板引擎会自动对HTML标签进行转义，以防止潜在的XSS攻击。如果您确定自定义参数中的HTML内容是安全的，并且希望它能正常渲染，请在模板变量输出时加上|safe过滤器，例如 {{ yourParam|safe }}。

3. {% system %}、{% contact %}和{% diy %}标签有什么区别？我应该用哪个来显示自定义参数？

这三个标签都用于显示自定义内容，但适用场景略有不同：

• {% system %}：主要用于获取在“后台设置” -> “全局设置”中定义的站点级通用参数，如网站名称、版权信息、自定义的全局标语等。
• {% contact %}：专门用于获取在“后台设置” -> “联系方式设置”中定义的联系信息，包括默认的联系方式以及您自定义的联系方式字段（如WhatsApp）。
• {% diy %}：用于获取在“后台设置”中其他自定义内容区域定义的更零散、非站点级别或非联系方式相关的自定义内容。对于“如何在前端页面中显示后台自定义的站点参数”这个主题，通常会优先使用{% system %}标签。