How to get and display the website's name and Logo in AnQiCMS templates?

As an experienced CMS website operation person, I am well aware of the importance of effectively displaying the brand information of the website in the template for user experience and brand recognition.The following article will detail how to obtain and display the website name and Logo in the AnQiCMS template.

In AnQiCMS template, get and display the website name and Logo practical guide

It is a key factor to attract users and establish trust to clearly display the brand logo in the operation of any website.The website's name and logo, as the core visual elements of the brand, need to be presented accurately and optimized on each page of the website.AnQiCMS provides a straightforward and flexible mechanism that allows operation personnel to easily obtain and display these important website information in templates, thereby enhancing brand image and user experience.

Back-end configuration of website name and Logo

AnQiCMS Template Syntax Overview

AnQiCMS's template system follows the syntax rules similar to Django template engine, which allows template creators to handle content in a structured way. Variable output in template files is usually done using double curly braces{{变量}}of the form to complete, while various logical judgments, loop operations, and data acquisition functions are wrapped in single curly braces and percent signs{% 标签 %}To implement. To obtain the system-level configuration information of the website in the template, we will mainly use the built-insystemLabel.

Display the website name

To display your website name at any location in the website template, you can usesystema tag to specifyname="SiteName"Parameter. This tag will directly return the website name you have preset in the "Global Function Settings" on the backend.

The following is an example of a template code that retrieves and outputs the website name directly.

<div>欢迎访问:{% system with name="SiteName" %}</div>

To improve the reusability and readability of template code, you can also assign the obtained website name to a custom variable. This approach is particularly useful when the website name needs to be referenced multiple times on the same template page:

{% system siteNameVar with name="SiteName" %}
<p>我们是 {{siteNameVar}},致力于提供优质服务。</p>
<p>了解更多关于 {{siteNameVar}} 的信息。</p>

Display the website Logo

The method to display the website Logo is similar to displaying the website name, both usingsystemtags, but this time you need tonameparameter settingsSiteLogoThis tag will directly output the URL address of the Logo image you uploaded and configured on the backend.

Since the Logo is essentially an image, we usually embed it into the HTML's<img>Labels. To optimize user experience, enhance website accessibility (Accessibility) and search engine optimization (SEO), it is strongly recommended to<img>Label addaltproperties.altThe value of the attribute is usually set to the name of the website, which not only provides alternative text when images fail to load, but also helps search engines understand the content of the images, playing a positive role in website ranking.

The following is a specific code example that displays the website logo in the template:

<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

Similar to the website name, you can also assign the URL of the Logo to a variable, and then use it together with the website name variable, making the code more flexible and maintainable. For example, wrap it in a link so that users can click the Logo to return to the website homepage:

{% system siteLogoUrl with name="SiteLogo" %}
{% system siteNameForAlt with name="SiteName" %}
<a href="/">
    <img src="{{siteLogoUrl}}" alt="{{siteNameForAlt}}" />
</a>

Considerations in a multi-site environment

The strength of AnQiCMS lies in its support for multi-site management. If you are running multiple independent websites under a single AnQiCMS instance, and in the template of a specific site, you need to obtain the website name or Logo that is not the current site,systemTags providesiteIdParameters to meet this requirement.By specifying the database ID of the corresponding site, you can accurately obtain the required information across sites.{% system with name="SiteName" siteId="2" %}.

**Practical Suggestions and Optimization**

In AnQiCMS template, when displaying the website name and Logo, in addition to correctly obtaining and outputting data, some practices should also be considered to further improve the performance and user experience of the website.

For Logo image, in addition to setting the necessaryaltProperties, you should also pay attention to its file size and loading speed.Optimizing images can significantly reduce page load time, especially important for mobile device users.At the same time, through external CSS stylesheets, you can flexibly control the size, position, and responsive behavior of the Logo, ensuring perfect display on different screen sizes and devices.

In addition, the website name in the page title (<title>Tags play a crucial role, directly affecting the display of the website on the search engine results page (SERP). CombinedtdkTagsname="Title"properties andsiteName=trueThe parameter can help you automatically append the site name after the page title, which not only strengthens brand awareness but also is an effective SEO strategy to improve the visibility and click-through rate of the website in search results.


Common Questions (FAQ)

问题:How to change the website name and Logo in AnQiCMS backend?You can find the "Background SettingsOn this page, you can directly modify the content of the 'Website Name' text box to update the website name, and click the upload button next to the 'Website Logo' field to change the logo image.After the modification is completed, please make sure to click the save button at the bottom of the page to ensure that your changes can be successfully applied.

问题:I uploaded a new Logo, but it did not display the update on the website front-end. What is the reason for this?If the background has updated the Logo or website name, but the front-end page does not immediately reflect these changes, this is usually due to browser caching or internal caching of the AnQiCMS system.You can try clearing the cache and cookies of the current browser, and then refresh the page.In addition, in the AnQiCMS backend, you can also find and click the "Update Cache" feature to clear the system-level cache, which helps to force the website to load the latest data.If the issue still exists, please check if the image has been successfully uploaded and the file path is correct.

问题:我能否在网站的不同页面使用不同的 Logo,而不是全局统一的 Logo? systemLabel defaults to the website configured in the “Global Function Settings”