How to correctly call and display the system configuration information in AnQiCMS templates?
Manage website content in AnQiCMS, not just publish articles and products, but also includes system-level configurations such as basic information, contact information, SEO metadata, etc.These configuration information is usually required to be displayed correctly on various pages of the website, such as displaying the website logo and name at the header, displaying the copyright and filing number at the footer, or displaying the company's phone number and address on the contact us page.Flexibly and correctly call these system configurations is the key to ensuring website information consistency, ease of maintenance, and SEO-friendliness.
AnQiCMS uses a syntax similar to the Django template engine, allowing template creators to refer to various background settings in a straightforward manner in the front-end template.
Call the system global configuration information
AnQiCMS provides a namedsystemThe template tag is specifically used to obtain various configurations from the background "Global Function Settings".Whether it is the website name, logo image address, record number, copyright information, or even the website access address and mobile end address, all of them can be easily called through this tag.
For example, if you want to display the website name<title>in the tag or show the Logo at the top of the page, you can write it like this:
<title>{% system with name="SiteName" %}</title>
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
here,name="SiteName"Specified is the configuration item to obtain the website name,name="SiteLogo"which corresponds to the website logo.
And for the common footer copyright information, you may need to display the company name and the current year, along withSiteCopyrightandnowTags can be implemented:
<p>
{% system with name="SiteCopyright" %} © {% now "2006" %}. All Rights Reserved.
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a>
</p>
here,{% now "2006" %}It will dynamically display the current year, whileSiteIcpIt will display the filing number filled in on your backend. It should be noted that,nowin the label"2006"It is a time formatting reference time specific to the Go language, representing the year.
If your website has enabled a separate mobile domain or needs to reference static template files,BaseUrl/MobileUrlandTemplateUrlTags can be very useful:
<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">
Combine when introducing CSS or JS static resources,TemplateUrlIt can effectively avoid path issues, making your template more universal.
Contact information configuration retrieval
The contact information of the website is usually displayed centrally, AnQiCMS provides special features for thiscontactThe tag allows you to conveniently obtain contact information, phone numbers, addresses, and email addresses from the background "Contact Information Settings".
On a typical "Contact Us" page or website footer, you can display it like this:
<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>
If the background is set to WeChat QR code or custom WhatsApp contact information (added through custom parameters), it can also be called:
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
<p>WhatsApp：{% contact with name="WhatsApp" %}</p>
Page TDK (Title, Description, Keywords) Information
The SEO optimization of the website cannot do without the setting of TDK. AnQiCMS providestdktags, allowing you to correctly call the<head>current page's title, keywords, and description in the template area.
In HTML's<head>inside the tag, you can place it like this:
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
here,siteName=trueIt is a very practical parameter that will automatically append the website name you set in the background to the page title, such as “Article Title - Your Website Name”, which helps maintain the unity of the title and brand exposure.
For more professional SEO needs, you may also need to use canonical links (Canonical URL), just like throughtdkTag retrieval:
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
We used a conditional judgment here{% if canonical %}This is a good template writing habit, which ensures that the corresponding HTML code is only output when there is a standard link.
Custom settings call
The AnQiCMS backend settings are very flexible, in addition to the built-in configuration items, you can also add custom parameters, such as a help page linkHelpUrlor an author nameAuthorThese custom parameters are passed throughdiytags to call.
For example, if you add a parameter named in the "Global Function Settings" or "Contact Information Settings" in the backgroundHelpUrland need to use it in the template:
<p>遇到问题？访问我们的<a href="{% diy with name="HelpUrl" %}" target="_blank">帮助中心</a></p>
This, when the background'sHelpUrlupdated, the front-end page will also synchronize automatically.
Multilingual Site Information
If your website has enabled the multilingual feature, AnQiCMS'slanguagesTags can help you build a language switcher or set uphreflangTags to adapt to international SEO needs.
Set up for search engines at the top of the pagehreflangIt can be like this:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
Or build a language switch dropdown menu:
{%- 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 %}
Template writing tips
When calling system configuration information in a template, there are some tips that can help you write more robust and secure templates:
|safeFilter:If the configuration content you call may contain HTML code (such asSiteCopyrightor certain custom parameters), be sure to use|safea filter. For example:{{siteCopyright|safe}}This is to inform the template engine that this part of the content is safe and does not need to be HTML-escaped, so that the HTML code can be correctly parsed by the browser.Please note that this means you need to ensure that the content is indeed safe to prevent potential XSS attacks.- Conditional judgment:For optional configuration items such as
MobileUrlorCanonicalUrl, it is best to use{% if %}The tag is used for judgment. This can avoid unnecessary empty tags or error links on the page when the configuration item is empty, improving the cleanliness of page rendering. - Pay attention to case sensitivity:The AnQiCMS template tags are case-sensitive.
SiteNameandsitenameThey will be considered as different fields, please make sure to spell the field names accurately according to the document provided.
By mastering the use ofsystem/contact/tdk/diyandlanguagesThese tags will allow you to fully utilize the flexible configuration capabilities of AnQiCMS to build a website that is rich in information, easy to maintain, and SEO-friendly.
Frequently Asked Questions (FAQ)
1. Why did the front-end page not update immediately after I modified the system settings in the background?This is usually because of the AnQiCMS caching mechanism. The system caches page content to improve performance.After modifying the background configuration, the cache needs to be cleared manually for the front-end to take effect immediately.You can find the 'Update Cache' feature in the AnQiCMS backend, click to execute it.
2. Can I directly retrieve and use these system configuration information in JavaScript?Cannot directly obtain through backend tags in JavaScript.Because template tags have already been parsed and outputted as HTML on the server side.If you need to use these configurations in JavaScript, **the practice is to output the data through hidden elements in HTML or JavaScript variables, and then JavaScript goes to read the data from these HTML.For example, you can add a hidden one to the page<input type="hidden" id="siteName" value="{% system with name='SiteName' %}" />Then in JavaScript, throughdocument.getElementById('siteName').valueGet it.
3. What tag should I use to display a custom field added in the background "Global Feature Settings"?For custom fields added in the "Global Feature Settings" or "Contact Information Settings", you should usediytags to call. For example, if you add a field namedServiceHotlineThe custom parameter, you can access it in the template like this:{% diy with name="ServiceHotline" %}Make sure thatnameThe parameter is exactly the same as the custom parameter name you set in the background.