轻松搞定：在AnQiCMS页面上如何优雅地显示你的网站名称和Logo
It is crucial to display the brand logo when operating a website.The website name and logo are not only the key elements for visitors to identify your brand, but also the foundation for enhancing the professionalism and trustworthiness of the website.AnQiCMS provides a user-friendly and powerful template tag system that allows you to easily call and display these core information on any page of your website.system标签就是专为获取这类全局站点配置而设计的。
Next, we will explore how to flexibly usesystemtags to make your website name and logo shine on the page.
KnowsystemTag: the 'Data Butler' of website information
systemThe tag is a very practical built-in tag in AnQiCMS template engine, whose main responsibility is to help us obtain all the 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.systemTags, you can dynamically display this information on the front page of the website 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，“变量名称An optional temporary alias is available. If you define it, you can refer to the data obtained later in the code by this alias.字段名称The most core part is, it determines which specific data you want to get from the system settings, for exampleSiteName(Website Name) orSiteLogo(Website Logo).
Display your website name
The website name is the most direct representation of the brand. In AnQiCMS, you can easily display it in the header, footer, or any place you want visitors to see.
Firstly, you need to find the "Global Feature Settings" under the "Settings" menu in the background.Here, you can fill in your 'website name', which is usually your brand's full name.
In the template file, you can use it like thissystemto retrieve and display it:
<!-- 直接输出网站名称 -->
<div>欢迎来到：{% system with name="SiteName" %}</div>
<!-- 或者，先赋值给一个变量，再使用变量输出 -->
{% system siteTitle with name="SiteName" %}
<div>当前网站名称是：{{siteTitle}}</div>
Through these simple 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 part of it, we usually combinetdkTagssiteName=trueThe attribute is automatically appended with the website name, which is also very helpful for SEO.
Let your logo shine on the stage
The Logo is the visual symbol of the brand, a well-designed Logo can instantly attract the attention of visitors.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 "Settings" in the background.Upload your logo image file here, the system will automatically store and prepare it for template usage.
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 in<img>tag.altThe attribute is a very important **practice**.It not only provides text descriptions of image content, but is also more friendly to visually impaired users, and helps search engines understand the content of images, thus optimizing your website's SEO.system with name="SiteName"nested inaltYou can ensure in the properties,altThe text should always be consistent with your website name, dynamic and convenient at the same time,href="{% system with name="BaseUrl" %}"and make sure that clicking on the logo can correctly jump back to the homepage of the website.
Versatilesystem标签：Get more custom information
In addition to the website name and Logo,systemTags can also obtain all preset parameters in the background "Global Function Settings", such as "Website filing number" (SiteIcp), "Copyright content" (SiteCopyright）etc. What's more powerful is that you can also customize additional parameters in the "global feature settings" on the backend and call them through tags.system标签来调用它们。
For example, you added a setting parameter namedServiceHotlineThe parameter, and its value is set to “400-888-8888”. Then, in the template, you can retrieve 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 label has a more intuitive understanding, and below is a simple header area code example 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>
Please remember that the above code snippet mainly focuses on the use of tags, and the actual layout and style need to be combined with CSS for beautification and responsive adjustments.
Through`