In AnQi CMS, when building a website, the first thing to consider is often how to elegantly display basic system configuration information on the website front-end, such as the website name, logo image, and ICP filing number.This information is not only the 'face' of the website, it concerns the brand image, but also is an important part of enhancing user trust and even complying with laws and regulations.AnQi CMS provides us with a very convenient way to dynamically call these system information through template tags.
The template mechanism and system information of AnQi CMS
The Anqi CMS uses a template engine syntax similar to Django, which allows us to control the presentation of page content in a straightforward and powerful way. All front-end pages are usually located at/templateUnder the directory.htmlFile construction. In these template files, we can operate data through two main syntaxes:{{变量}}Used to output variable content, and{% 标签 %}It is used to implement logic control or call specific functional modules.
For global system configurations such as website name, Logo, and filing number, Anqi CMS provides a specialsystemThe tag can help us retrieve various preset information from the background in the "Global Function Settings" to ensure the consistency and dynamic update of website information.
How to display this information in a front-end template?
Next, let's see how to use it specifically in the templatesystemtags to display these important configuration items.
Display of the site name (SiteName)
The website name is the identity of the website, which usually appears on the page.<title>Tag, as well as in the navigation bar, footer, and other key positions. BysystemTag, we can easily obtain it:
{# 在页面的<head>部分，设置网站标题 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 或者在页面其他位置直接显示网站名称 #}
<h1>欢迎来到 {% system with name="SiteName" %}</h1>
Here, we usedtdktags to dynamically generate the page title and pass insiteName=trueThe parameter will automatically append the website name as a suffix to the title after it, which is a SEO-friendly practice. Of course, you can also use it directly to display the website name separately.{% system with name="SiteName" %}to display the website name separately.
The display of the website logo (SiteLogo)
The website logo is the core of brand visual recognition, usually presented in the form of an image. In Anqi CMS, the address of the website logo image uploaded on the backend can be accessed throughsystemLabel acquisition. It is recommended to set it at the same time as inserting the logoaltProperty, this is not only friendly to visually impaired users, but also an important part of search engine optimization (SEO), helping search engines understand the content of images.
{# 在导航栏或其他位置显示网站Logo #}
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %} - Logo" class="site-logo">
</a>
Here we also usedBaseUrlLabel to get the root address of the website, make sure that clicking the Logo can correctly jump back to the homepage.
The call of the website filing number (SiteIcp)
For websites operating in mainland China, the ICP record number is a legally required piece of information that is usually placed in the footer of the website and linked to the Ministry of Industry and Information Technology record query website.
{# 在页脚区域显示备案号并添加链接 #}
<p>
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">
{% system with name="SiteIcp" %}
</a>
</p>
rel="nofollow"andtarget="_blank"It is recommended attribute, the former tells the search engine not to track this link, and the latter ensures that the link opens in a new window, improving the user experience.
Copyright information (SiteCopyright) and the current year
The copyright information of the website is usually also located at the footer, in order to keep it updated, we often need to dynamically display the current year. Anqi CMS'ssystemThe label can retrieve the copyright content set by the background, while combiningnowThe label can retrieve the current year, making the copyright information unnecessary to modify manually.
{# 在页脚显示版权信息，动态显示年份 #}
<p>
© {% now "2006" %} {% system with name="SiteCopyright" %}
</p>
{% now "2006" %}According to the Golang time format rule, it dynamically outputs the current year, for example “2023” or “2024”.
Flexible application of custom parameters.
In addition to the aforementioned built-in system configurations, sometimes we may need to customize some additional global information in the background, such as customer service phone numbers, company vision, etc.The AnQi CMS allows you to add custom parameters in the "Global Function Settings".Once set, these parameters can also be accessed throughsystemTags to retrieve and display:
Assuming you have added a custom parameter named "ServicePhone" in the background, with the value of "400-123-4567".
{# 显示自定义的客服电话 #}
<div>客服热线：{% system with name="ServicePhone" %}</div>
Integrate this information into the template
In actual projects, these system configuration information is usually integrated into the public header (header.html) or footer (footer.html) of the website, and then through{% include %}Introduce tags to all pages to ensure consistency across the site
Here is a simplifiedbase.htmlorheader.htmlcode snippet that shows how to integrate these system tags:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# 页面标题，附加网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 网站关键词 #}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
{# 网站描述 #}
<meta name="description" content="{% tdk with name="Description" %}">
{# 引入网站样式表，使用TemplateUrl获取静态资源路径 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/static/css/style.css">
{# 可能的规范链接 #}
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
</head>
<body>
<header class="site-header">
<div class="container">
{# 网站Logo和名称 #}
<div class="logo">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %} - Logo">
</a>
<span>{% system with name="SiteName" %}</span>
</div>
{# 导航栏 #}
<nav class="main-nav">
{# 这里通常会使用navList标签来动态生成导航菜单 #}
</nav>
{# 显示自定义的客服电话 #}
<div class="contact-info">
客服热线：{% system with name="ServicePhone" %}
</div>
</div>
</header>
<main class="site-content">
{# 页面主要内容将在此处插入 #}
</main>
<footer class="site-footer">
<div class="container">
{# 版权信息 #}
<p>© {% now "2006" %} {% system with name="SiteCopyright" %}</p>
{# ICP备案号 #}
<p>
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">
{% system with name="SiteIcp" %}
</a>
</p>
</div>
</footer>
</body>
</html>
In AnQi CMS, the process of obtaining and displaying system configuration information is concise and clear. We just need to fill in or upload the corresponding content in the background "Background Settings" -> "Global Function Settings", and then use it in the front-end template.systemlabel and specifynameParameters can be easily called. This method not only improves the maintainability of the website but also provides a solid foundation for the dynamic operation of content.
Frequently Asked Questions (FAQ)
1. Why did I set the website logo in the background, but it didn't show up on the front end?
First, please make sure you have used it correctly in the front-end template.{% system with name="SiteLogo" %}The tag. Next, check if the tag is located<img>label'ssrcin the attributes, and<img>The style (CSS) of the tag does not hide it. If the logo image address is a relative path, it also needs to be confirmedTemplateUrlWhether the label is output correctly, or make sure that the image file itself has been successfully uploaded to the accessible path of the server.Finally, remember to clear the website cache (background 'update cache' function), sometimes new uploaded images or settings need to refresh the cache to take effect.
How to configure different website names and logos for multiple sites?
The AnQi CMS supports multi-site management, each site can have independent configuration.When you create a new site through the 'Multi-site Management' feature in the background, each site has its own 'Global Feature Settings'.Therefore, in the template callsystemWhen labeling, it is usually not necessary to specify the site ID additionally, the system will automatically identify which site the current visited domain belongs to and retrieve the corresponding configuration. If you indeed need to display *other* site configuration information within a specific site, you cansystemthe tag withsiteIdparameters, for example{% system with name="SiteName" siteId="2" %}To get the website name of the site with ID 2.
**3. I am in the global function of the website backend “