在运营网站时,我们经常会遇到这样的需求:需要在前端页面上显示一些灵活可变的站点信息,比如公司成立年份、客服热线、特定页面的宣传语、或者一段简短的公告等。这些信息可能需要经常更新,如果每次都去修改模板文件,既低效又容易出错。幸运的是,安企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 %}标签。