How to use the `system` tag to display the website name and logo on the page?
Ease the task: How to elegantly display your website name and logo on the AnQiCMS page
It is crucial to display brand identity when operating a website. The website name and logo are not only key elements for visitors to recognize your brand but also the foundation for enhancing the professionalism and trust of the website.AnQiCMS provides a直观而强大的template tag system that allows you to easily call and display these core information on any page of the website. Among them,systemTags are designed specifically to obtain this type of global site configuration.
Next, we will explore how to flexibly usesystemTags, let your website name and Logo shine on the page
Get to knowsystemTag: The 'data butler' of website information
systemThe tag is a very practical built-in tag in the AnQiCMS template engine, its main responsibility is to help us obtain various global configuration information of the website.This information is usually managed in the "Settings" module in the background, such as website name, logo image address, filing number, copyright information, etc. ThroughsystemLabel, you can dynamically display this information on the website front page without hardcoding, which greatly enhances the reusability and maintainability of the template.
UsesystemThe basic syntax of the tag is like this:{% system 变量名称 with name="字段名称" %}.
Here, the"变量名称An optional temporary alias, if you define it, you can refer to the data obtained later in the code through this alias. And that is “字段名称This is the most core part, which determines which specific data you want to obtain from the system settings, such asSiteName(Website name) orSiteLogo(Website Logo).
Display your website name
The website name is the most direct manifestation of a brand. In AnQiCMS, you can easily display it in the header, footer, or any place you want visitors to see.
First, you need to find the "Global Function Settings" under the "Settings" menu in the background.Here, you can fill in your 'website name', which is usually your brand name.
In the template file, you can use it like thissystemTag to retrieve and display it:
<!-- 直接输出网站名称 -->
<div>欢迎来到：{% system with name="SiteName" %}</div>
<!-- 或者，先赋值给一个变量，再使用变量输出 -->
{% system siteTitle with name="SiteName" %}
<div>当前网站名称是：{{siteTitle}}</div>
By this simple few lines of code, your website name will be accurately displayed on the page. If you want the website name to be part of the page title (<title>tag) as a part, we usually combinetdklabel'ssiteName=trueAttributes are automatically appended to the website name, which is also very helpful for SEO.
Let your logo shine on stage.
Logo is the visual symbol of a brand, a well-designed logo can attract visitors' attention instantly.In AnQiCMS, displaying your logo on the website is just as simple.
Similar to the website name, you need to find the item "Website Logo" in the "Global Function Settings" under the background "Settings".Upload your logo image file here, the system will automatically store and prepare it for template use.
In your template file, you can display the Logo image in the following way:
<!-- 直接在图片标签中使用system标签获取Logo地址和网站名称作为alt属性 -->
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
</a>
<!-- 或者，先赋值给变量，再构建图片标签 -->
{% system logoUrl with name="SiteLogo" %}
{% system siteName with name="SiteName" %}
<a href="{% system with name="BaseUrl" %}">
<img src="{{logoUrl}}" alt="{{siteName}}" />
</a>
Please note that,<img>the tag withaltAn attribute is a very important **practice**. It not only provides text descriptions of the image content, making it more friendly for visually impaired users, but also helps search engines understand the image content, thereby optimizing your website's SEO. Tosystem with name="SiteName"inaltIn the properties, you can ensurealtThe text should always be consistent with your website name, dynamic and convenient. At the same time,href="{% system with name="BaseUrl" %}"make sure that clicking the logo can correctly jump back to the homepage of the website.
UsefulsystemLabel: Get more custom information
In addition to the website name and Logo,systemThe label can also obtain all preset parameters in the background "Global Function Settings", such as "Website filing number" (SiteIcp） “Copyright Content”（SiteCopyright） And more. What's even stronger is that you can also customize additional parameters in the background “Global Function Settings” and pass throughsystemLabels to call them.
For example, you added a parameter named in the background 'Custom settings'.ServiceHotlineThe parameter, and its value is set to "400-888-8888". Then in the template, you can get and display it like this:
{% system servicePhone with name="ServiceHotline" %}
<div>客服热线：{{servicePhone}}</div>
This flexibility allows you to easily manage and display various dynamic information according to the specific needs of the website.
Comprehensive application examples
In order for you to understandsystemThe actual application of the tag has a more intuitive understanding, here is a simple example of a header area code that combines the display of the website name and Logo:
<header class="main-header">
<div class="header-container">
<div class="logo-area">
<a href="{% system with name="BaseUrl" %}" class="site-logo-link">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="site-logo" />
</a>
</div>
<nav class="main-nav">
<!-- 这里可以放置您的导航菜单，例如使用navList标签 -->
{% navList navs %}
<ul>
{% for item in navs %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
<div class="site-title">
<h1><a href="{% system with name="BaseUrl" %}">{% system with name="SiteName" %}</a></h1>
</div>
</div>
</header>
Remember, the above code snippet mainly focuses on the use of tags, and the actual layout and style still need to be combined with CSS for beautification and responsive adjustments.
Through