如何在AnQiCMS模板中正确调用并显示系统配置信息?

在AnQiCMS中管理网站内容,不仅仅是发布文章和产品,更包括了网站的基础信息、联系方式、SEO元数据等系统层面的配置。这些配置信息通常在网站的各个页面都需要被正确显示,比如页头展示网站Logo和名称,页脚显示版权和备案号,或者在联系我们页面显示公司的电话地址。灵活且正确地调用这些系统配置,是确保网站信息一致性、易于维护以及SEO友好的关键。

AnQiCMS采用了类似Django模板引擎的语法,让模板制作人员能够以直观的方式在前端模板中引用后台设置的各项信息。

调用系统全局配置信息

AnQiCMS提供了一个名为system的模板标签,专门用于获取后台“全局功能设置”中的各项配置。无论是网站名称、Logo图片地址,还是备案号、版权信息,甚至是网站的访问地址和移动端地址,都可以通过这个标签轻松调用。

例如,如果你想在网站的<title>标签中显示网站名称,或者在页头展示Logo,可以这样来写:

<title>{% system with name="SiteName" %}</title>
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

这里,name="SiteName"指定了要获取的配置项是网站名称,name="SiteLogo"则对应网站Logo。

而对于页脚常见的版权信息,你可能需要显示公司名称和当前年份,配合SiteCopyrightnow标签即可实现:

<p>
    {% system with name="SiteCopyright" %} &copy; {% now "2006" %}. All Rights Reserved.
    <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a>
</p>

这里,{% now "2006" %}会动态地显示当前年份,而SiteIcp则会展示你后台填写的备案号。需要注意的是,now标签中的"2006"是Go语言特有的时间格式化参考时间,代表年份。

如果你的网站启用了手机端独立域名,或者需要引用模板静态文件,BaseUrlMobileUrlTemplateUrl标签会非常有用:

<a href="{% system with name="BaseUrl" %}">网站首页</a>
{% if system.MobileUrl %}
    <a href="{% system with name="MobileUrl" %}">移动端访问</a>
{% endif %}
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">

在引入CSS或JS等静态资源时,结合TemplateUrl能有效避免路径问题,让你的模板更具通用性。

获取联系方式配置

网站的联系方式通常集中展示,AnQiCMS专门为此提供了contact标签。它能够让你便捷地获取后台“联系方式设置”中的联系人、电话、地址、邮箱等信息。

在一个典型的“联系我们”页面或者网站页脚,你可以这样展示:

<p>联系人:{% contact with name="UserName" %}</p>
<p>电话:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
<p>邮箱:<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></p>
<p>地址:{% contact with name="Address" %}</p>

如果后台设置了微信二维码或自定义的WhatsApp联系方式(通过自定义参数添加),同样可以调用:

<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
<p>WhatsApp:{% contact with name="WhatsApp" %}</p>

页面TDK(Title、Description、Keywords)信息

网站的SEO优化离不开TDK的设置。AnQiCMS提供了tdk标签,让你能够在模板的<head>区域正确调用当前页面的标题、关键词和描述。

在HTML的<head>标签内,你可以这样放置:

<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">

这里,siteName=true是一个非常实用的参数,它会让页面的标题自动附加你在后台设置的网站名称,例如“文章标题 - 你的网站名称”,这有助于保持标题的统一性和品牌露出。

对于更专业的SEO需求,你可能还会用到规范化链接(Canonical URL),同样通过tdk标签获取:

{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}

这里我们使用了一个条件判断{% if canonical %},这是良好的模板编写习惯,可以确保只在存在规范链接时才输出相应的HTML代码。

自定义设置的调用

AnQiCMS的后台设置非常灵活,除了系统内置的配置项,你还可以添加自定义参数,例如一个帮助页面链接HelpUrl或者一个作者名称Author。这些自定义参数通过diy标签来调用。

例如,如果你在后台的“全局功能设置”或“联系方式设置”中新增了一个名为HelpUrl的参数,并在模板中需要使用它:

<p>遇到问题?访问我们的<a href="{% diy with name="HelpUrl" %}" target="_blank">帮助中心</a></p>

这样,当后台的HelpUrl更新时,前端页面也会自动同步。

多语言站点信息

如果你的网站启用了多语言功能,AnQiCMS的languages标签能帮助你构建语言切换器或设置hreflang标签,以适应国际化SEO需求。

在页面头部为搜索引擎设置hreflang,可以这样:

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}

或者构建一个语言切换下拉菜单:

{%- languages websites %}
{%- if websites %}
<div>
    <span>切换语言:</span>
    {%- for item in websites %}
    <a href="{{item.Link}}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

模板编写小贴士

在模板中调用系统配置信息时,有几个小技巧可以帮助你写出更健壮、更安全的模板:

  • |safe过滤器: 如果你调用的配置内容可能包含HTML代码(比如SiteCopyright或某些自定义参数),务必使用|safe过滤器。例如:{{siteCopyright|safe}}。这是为了告诉模板引擎这部分内容是安全的,不需要进行HTML转义,从而让HTML代码能够被浏览器正确解析。但请注意,这意味着你需要确保这些内容确实是安全的,以防止潜在的XSS攻击。
  • 条件判断: 对于非必填的配置项,比如MobileUrlCanonicalUrl,最好使用{% if %}标签进行判断。这样可以避免在配置项为空时,页面上出现不必要的空标签或错误链接,提高页面渲染的干净度。
  • 注意大小写: AnQiCMS模板标签对大小写是敏感的。SiteNamesitename会被视为不同的字段,请务必按照文档中提供的字段名称准确拼写。

通过熟练运用systemcontacttdkdiylanguages这些标签,你将能充分利用AnQiCMS的灵活配置能力,构建出信息丰富、易于维护且对搜索引擎友好的网站。


常见问题 (FAQ)

1. 为什么我在后台修改了系统配置,前台页面却没有立即更新? 这通常是因为AnQiCMS的缓存机制。系统为了提高性能,会对页面内容进行缓存。在修改了后台配置后,需要手动清除缓存才能让前台立即生效。你可以在AnQiCMS后台找到“更新缓存”功能,点击执行即可。

2. 我可以在JavaScript中直接获取并使用这些系统配置信息吗? 不可以直接在JavaScript中通过后端标签获取。因为模板标签在服务器端渲染时就已经解析并输出了HTML。如果你需要在JavaScript中使用这些配置,**实践是在HTML中通过隐藏元素或JavaScript变量的方式将数据输出,然后JavaScript再去读取这些HTML中的数据。例如,你可以在页面中添加一个隐藏的<input type="hidden" id="siteName" value="{% system with name='SiteName' %}" />,然后在JavaScript中通过document.getElementById('siteName').value来获取。

3. 如果我想显示一个在后台“全局功能设置”中添加的自定义字段,应该用哪个标签? 对于在“全局功能设置”或“联系方式设置”中添加的自定义字段,你应该使用diy标签来调用。例如,如果你添加了一个名为ServiceHotline的自定义参数,在模板中可以这样获取:{% diy with name="ServiceHotline" %}。请确保name参数与你在后台设置的自定义参数名完全一致。