In the Safe CMS, when setting up a website, the first thing to consider is often how to elegantly display the basic system configuration information on the website front-end, such as the website name, Logo image, and ICP record number.This information is not only the "face" of the website, concerning the brand image, but also an important part of improving user trust and even complying with laws and regulations.The auto CMS provides us with a very convenient way to dynamically call these system information through template tags.
The template mechanism of AnQi CMS and system information
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 composed by the code located/templatethe directory..htmlFile build. In these template files, we can operate data through two main syntaxes:{{变量}}Used to output variable content,{% 标签 %}It is used to implement logical control or call specific functional modules.
For global system configurations such as website name, Logo, and filing number, Anqi CMS provides a dedicatedsystemLabel. This label can help us retrieve various preset information from the background in the "Global Feature Settings", ensuring consistency and dynamic updates of the website information.
How to display this information in the front-end template?
Next, let's see how to use it specifically in the templatesystemto display these important configuration items.
Website Name (SiteName) Display
Website Name is the identifier of the website, which usually appears on the<title>tags, as well as key positions such as the navigation bar, footer, and so on. BysystemLabel, we can easily get it:
{# 在页面的<head>部分，设置网站标题 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 或者在页面其他位置直接显示网站名称 #}
<h1>欢迎来到 {% system with name="SiteName" %}</h1>
Here, we use:tdkLabels to dynamically generate the page title and pass insiteName=trueThe parameter, it will automatically append the website name as a suffix after the title, which is a SEO-friendly practice. Of course, you can also use it 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 besystemLabel acquisition. It is recommended to set at the same time when inserting Logoalt属性，这不仅对视障用户友好，也是搜索引擎优化（SEO）的重要一环，帮助搜索引擎理解图片内容。
{# 在导航栏或其他位置显示网站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 jump back to the homepage correctly.
The invocation of the website record number (SiteIcp)
For websites operating in mainland China, the ICP record number is a legally required information that must be displayed, usually placed at the footer of the website, and linked to the MIIT 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"This is recommended property, the former tells the search engine not to track this link, and the latter ensures that the link opens in a new window to improve 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. The Anqi CMS'ssystemLabels can retrieve the copyright content set by the background, and combinenowLabels retrieve the current year, so the copyright information does not need to be manually modified.
{# 在页脚显示版权信息，动态显示年份 #}
<p>
© {% now "2006" %} {% system with name="SiteCopyright" %}
</p>
{% now "2006" %}The current year will be dynamically output according to the Golang date format rules, such as "2023" or "2024".
Flexible use of custom parameters.
In addition to the built-in system configurations mentioned above, sometimes we may need to customize some additional global information in the background, such as customer service phone numbers, company vision, etc.The AutoCMS allows you to add custom parameters in the "Global Function Settings".systemLabel to get and display:
Assuming you added a custom parameter named "ServicePhone" in the background, with the value "400-123-4567".
{# 显示自定义的客服电话 #}
<div>客服热线：{% system with name="ServicePhone" %}</div>
Integrate this information into the template.
{% include %}Introduce tags to each page to ensure consistency across the entire site.
The following is a simplifiedbase.htmlorheader.htmlcode snippet that demonstrates 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 the Anqi CMS, the process of obtaining and displaying these system configuration information is simple and clear. We just need to fill in or upload the corresponding content in the "Background Settings" -> "Global Function Settings" on the backend, and then use it in the frontend template.systema tag to specifynameParameters can be easily called. This approach not only improves the maintainability of the website, but also provides a solid foundation for the dynamic operation of content.
Common Questions (FAQ)
1. Why didn't the website logo show up on the front end even though I set it in the background?
First, make sure you are using it correctly in the front-end template.{% system with name="SiteLogo" %}Tag. Next, check if the tag is located in<img>Tagssrcthe attribute, 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 confirmed.TemplateUrlIs the label output correctly, or make sure that the image file itself has been successfully uploaded to an accessible path on 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.
2. How to configure different website names and Logos for multiple sites?
Auto CMS supports multi-site management, each site can have independent configurations.When you create a new site through the "Multi-site ManagementsystemWhen labeling, it is usually not necessary to specify an additional site ID. The system will automatically identify which site the currently visited domain belongs to and retrieve the corresponding configuration for that site. If you indeed need to display *other* site configurations within a certain site, you can...systemtag.siteIdparameters, such as{% system with name="SiteName" siteId="2" %}Get the website name of the site with ID 2.
**3. I am in the global function of the website backend