How to call and display the website logo image in AnQiCMS template?

In website operation, Logo is not only the visual identification of the brand, but also an important part of the website's professionalism and user experience.AnQiCMS (AnQiCMS) provides an intuitive and simple way to manage and call the website logo, allowing you to easily display your brand image in every corner of the website.

This article will thoroughly introduce how to set your website logo in the Anqi CMS backend, and guide you to accurately and flexibly call it and display it in the frontend template, ensuring that your brand image is presented perfectly.

一、In the security CMS background, set the website logo

First, you need to upload the Logo image to the Anqi CMS system and specify it as the website's Logo. This process is very simple:

1. Log in to the backend:Log in to your Anqi CMS backend management interface.
2. Go to global settings:In the left navigation bar, find and click on theBackend settings" option, then select "[en] Global function settings.
3. Upload or select Logo:In the global feature settings page, you will see a name called “website logoThe configuration item.Click the upload or select button next to it, upload a Logo image file from your computer, or select an image that has already been uploaded to the media library.Suggest to choose a logo image with moderate size and high resolution.
4. Save settings:After confirming that the picture selection is correct, click the “Save” button to apply the settings to the system.

Complete these steps and your website logo has been successfully uploaded and configured in the Anqi CMS backend.

Part two: Call and display the logo in the website template

Logo image has been configured, the next step is how to display it in the website's frontend template.The template syntax of AnQi CMS is concise and clear, similar to the Django template engine, which can be easily realized with specific tags.

To call the website logo, we need to use the Anqi CMS provided.systemThis tag is specifically used to obtain various system configuration information of the website.

1. Basic calling method:The most direct way is to<img>Tagssrccall directly in the attribute.SiteLogoThis is a predefined system variable.SiteLogoIt is used to store the URL address of the website logo you set in the background.

   <img src="{% system with name="SiteLogo" %}" alt="网站Logo" />
   

   This code will directly output the URL of the Logo image and use it as<img>TagssrcThe property value. At the same time, to better comply with SEO standards and improve accessibility, it is recommended to addaltProperty. Here we temporarily used "Website Logo" as a placeholder.

2. Optimize with the website namealtProperties:In order toaltProperty is more descriptive, we can make use ofsystemGet the website name and use it as the Logo image name.altThe website name is insystemthe parameter corresponding to the tag inSiteName.

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

   Now, when the browser cannot load the Logo image, or for users using screen readers, they will see the name of the website, which greatly enhances the website's user experience and SEO performance.

3. Use variables to make code cleaner:If you need to call Logo at multiple places in the template or want a clearer code structure, you can first assign the Logo URL and website name to custom variables, and then use these variables. Anqi CMS'ssystemThe label allows you to directly assign the value obtained at the call to a variable.

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

   Here,siteLogoUrlThe variable now stores the URL of the Logo image,websiteNameThe variable stores the name of the website. You can directly use it in subsequent code.{{ siteLogoUrl }}and{{ websiteName }}to refer to them.

Chapter three: Further Thinking and Practice

In practical applications, in addition to simply displaying the Logo, we usually combine other features and **practicality to enhance the user experience.

1. Make the Logo clickable and jump to the homepage:The website logo usually carries the function of returning to the homepage. By combiningsystemtags obtainedBaseUrl(the homepage address of the website), this interaction can be easily achieved.

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

   So that visitors can smoothly return to the homepage of the website when they click on the Logo.

2. Handling the case where the Logo has not been uploaded:Sometimes, at the beginning of website construction or in specific situations, the Logo may not have been uploaded yet. IfSiteLogothe variable is empty,<img>TagssrcThe property will be empty, which may cause the page to display abnormally. You can use conditional judgment to handle this situation:

   {% system siteLogoUrl with name="SiteLogo" %}
   {% system websiteName with name="SiteName" %}
   {% system baseUrl with name="BaseUrl" %}
   
   
   <a href="{{ baseUrl }}">
       {% if siteLogoUrl %}
           <img src="{{ siteLogoUrl }}" alt="{{ websiteName }}" />
       {% else %}
           <span class="site-title">{{ websiteName }}</span> {# 如果没有Logo，则显示网站名称作为文本Logo #}
       {% endif %}
   </a>
   

   This code will checksiteLogoUrlDoes it exist.If it exists, display the Logo image; otherwise, display the website name as text Logo (you can style it with CSS), thus avoiding display issues caused by the missing Logo.

3. Suggestions for optimizing the Logo:To ensure the website loads quickly and provides a good user experience, make sure your logo image is properly optimized. This includes:

   • File format:优先使用WebP格式（安企CMS内容设置中支持自动转换为WebP），其次是PNG或SVG。
   • 文件大小：Compress the file size as much as possible and avoid using large Logo images.
   • Responsive design:Ensure that the logo image is clear and fits on devices of different sizes (mobile, tablet, desktop).

Through these detailed steps and practical skills, you can fully master the setting and display of the website logo in the Aanqi CMS, making your brand image shine on the website.

---

Common Questions (FAQ)

Q1: I have uploaded the Logo, but the front-end of the website does not display it. Why is that?A1: There may be several reasons.Firstly, please confirm that you have saved the Logo settings in the "Global Feature Settings" on the backend.{% system with name="SiteLogo" %}This label is used to call Logo. Additionally, browser cache may also cause display delay, you can try to clear the browser cache or access in incognito mode.

Q2: How can I display a different Logo on a specific page of the website instead of the global Logo?A2: The 'Website Logo' of SafeCMS is a global setting.If you need to display different Logos on specific pages, you may need some custom template logic.systemLabel calls the global logo, but instead directly introduces a link to a specific logo image.<img>Label.The more advanced approach is to set a Logo field for a specific page in the custom parameters at the backend, and then judge and call this custom Logo in the template of that page. If the custom Logo does not exist, fall back to the global Logo.