How to get and display the website name and logo in AnQiCMS template?

As an experienced CMS website operation person of an enterprise, I know the importance of effectively displaying brand information in templates for user experience and brand recognition.The following article will provide a detailed guide on how to obtain and display the website name and logo in the AnQiCMS template.

How to obtain and display the website name and Logo in AnQiCMS template guide

It is a key element to clearly display the brand identity in the operation of any website, attracting users and building trust.The website's name and logo are the core visual elements of the brand and need to be presented accurately and optimized on all pages of the website.AnQiCMS provides a直观且灵活的 mechanism, allowing operation personnel to easily obtain and display these important website information in templates, thereby enhancing the brand image and user experience.

Backend configuration of website name and Logo

First, we need to understand how the core information such as website name and Logo is configured and managed in the AnQiCMS backend.You can find the 'Global Function Settings' option under the 'Background Settings' menu in the Anqi CMS backend.On this page, you can clearly see the "Website Name" field, which is used to define the brand name or company name of your website;Next is the "Website Logo" field, which allows you to upload and set the logo image for your website.Ensure that this critical information is set accurately in the background, which is the basic premise for its correct and consistent display in the front-end template.

AnQiCMS Template Syntax Overview

The AnQiCMS template system follows the syntax rules similar to the Django template engine, which allows template creators to handle content in a structured manner. Variable output in template files is usually done using double curly braces{{变量}}The task is to translate the content of the "value" field into English While various logical judgments, loop operations, and data acquisition functions are wrapped in single curly braces and percent signs{% 标签 %}To implement. To obtain system-level configuration information for the website in the template, we will mainly use built-insystem.

Display website name

To display your website name at any location in the website template, you can usesystemlabel and specifyname="SiteName"Parameters. This tag will directly return the website name you have preset in the background "Global Function Settings".

Here is an example of the template code to retrieve and directly output the website name.

<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 website Logo

The method to display the website Logo is similar to displaying the website name, which is also usingsystemtags, but this time you need tonamethe parameter toSiteLogo. This tag executes and directly outputs the URL address of the Logo image you uploaded and configured on the backend.

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

The specific code example for displaying the website logo in the template is as follows:

<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 the website name variable together with it, making the code more flexible and maintainable. For example, wrap it in a link to make it convenient for users to click on the Logo and return to the homepage of the website:

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

Consideration under a multi-site environment

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

**Practical Recommendations and Optimization**

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

For the Logo image, in addition to setting the necessaryaltAttribute, you should also pay attention to its file size and loading speed. Optimizing images can significantly reduce page loading time, especially 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 a perfect display on different screen sizes and devices.

In addition, the website name is in the page title (<title>Labels play a crucial role, directly affecting the display of websites on search engine result pages (SERP). Combinedtdklabel'sname="Title"attributes andsiteName=trueThe parameter can help you automatically append the website name to the page title, which not only strengthens brand recognition but also is an effective SEO strategy, helping to improve the visibility and click-through rate of the website.

Frequently Asked Questions (FAQ)

Question: How to change the website name and Logo in the AnQiCMS backend?You can find the 'Background Settings' menu in the left navigation bar of the AnQiCMS admin interface, and then click to enter the 'Global Function Settings' page.On 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 be sure to click the save button at the bottom of the page to ensure that your changes can be successfully applied.

Question: 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 logo or website name is updated on the back-end but the changes are not immediately reflected on the front-end page, 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 refreshing the page.In addition, in the AnQiCMS backend, you can also find and click the "Update Cache" feature to clear the cache at the system level, which helps to force the website to load the latest data.If the problem still exists, please check if the image has been successfully uploaded and the file path is correct.

Question: Can I use different Logos on different pages of the website instead of a unified Logo? systemThe tag defaults to retrieving the website configured in the "Global Feature Settings"}