Managing website content in AnQiCMS is not just about publishing articles and products, but also includes system-level configurations such as basic information, contact details, 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 in the header, showing the copyright and filing number in the footer, or displaying the company's phone number and address on the Contact Us page.Flexibly and correctly invoking these system configurations is the key to ensuring consistency, ease of maintenance, and SEO-friendliness of the website.
AnQiCMS uses a syntax similar to the Django template engine, allowing template creators to easily reference various information set in the backend in the frontend templates.
Invoke system global configuration information
AnQiCMS provides a namedsystemThe template tag, specifically used to retrieve the various configurations in 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<title>display the website name in the tag, or show the Logo in the page header, 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"The configuration item specified is the website name,name="SiteLogo"which corresponds to the website logo.
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,SiteIcpand it will show the filing number you fill in the background. It is important to note,nowthe tag in"2006"It is a time formatting reference time unique to Go language, representing the year.
If your website has enabled a separate mobile domain or needs to refer to template static files,BaseUrl/MobileUrlandTemplateUrlTags will 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">
When introducing CSS or JS resources, combine withTemplateUrlIt can effectively avoid path problems, making your template more versatile.
Get contact information configuration
The contact information of the website is usually displayed centrally, AnQiCMS provides special support for this.contactLabels allow you to conveniently retrieve contact information such as contact person, phone number, address, and email from the 'Contact Information Settings' on the backend.
In 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 a WeChat QR code or a custom WhatsApp contact method (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 is inseparable from the setting of TDK. AnQiCMS providestdktags, allowing you to correctly call the current page's title, keywords, and description in the template<head>area.
In HTML's<head>you can place it like this inside the tag:
<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'. This helps to maintain the consistency of the title and brand exposure.
For more professional SEO needs, you may also use canonical links (Canonical URL), which is also used throughtdkLabel retrieval:)
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
Here we use a conditional judgment{% if canonical %}This is a good habit of template writing, which ensures that the corresponding HTML code is only output when there is a standard link.
Call to custom settings
The AnQiCMS admin 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 throughdiytags to call.
For example, if you add a parameter named in the "Global Feature 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>
So, when the background isHelpUrlupdated, the front-end page will also synchronize automatically.
Multi-language site information
If your website has enabled the multi-language feature, AnQiCMS'slanguagesTags can help you build a language switcher or sethreflangtags to adapt to international SEO requirements.
Set for search engines in the page headerhreflanglike 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 %}
Tips for template writing
When calling system configuration information in the template, there are several tips that can help you write more robust and secure templates:
|safeFilter:If the configuration content you call may contain HTML code (for exampleSiteCopyrightor some custom parameters), make sure to use|safefilter. 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 these contents are indeed safe to prevent potential XSS attacks.- Conditional judgment:For non-mandatory configuration items, such as
MobileUrlorCanonicalUrlit is best to use{% if %}Tags are 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 the case:AnQiCMS template tags are case-sensitive.
SiteNameandsitenameThey will be considered as different fields, please make sure to spell the field names accurately as provided in the documentation.
By skillfully applyingsystem/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.
Common Questions (FAQ)
1. Why doesn't the front-end page update immediately after I modify the system configuration 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 manually cleared for the front-end to take effect immediately.You can find the 'Update Cache' feature in the AnQiCMS admin panel, click to execute.
Can I directly access and use these system configuration information in JavaScript?Cannot directly retrieve backend tags in JavaScript.Because the template tags have 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 reads the data from these HTML elements.<input type="hidden" id="siteName" value="{% system with name='SiteName' %}" />Then, in JavaScript throughdocument.getElementById('siteName').valueto get.
3. Which tag should I use to display a custom field added in the background 'Global Feature Settings'?For custom fields added in the "Global Function Settings" or "Contact Information Settings", you should usediytags to call. For example, if you add a field namedServiceHotlineThe custom parameter, which can be accessed in the template like this:){% diy with name="ServiceHotline" %}Make sure thatnamethe parameter matches the custom parameter name you set in the background exactly.