In web design, the logo is not only a symbol of the brand, but also the core of the website's recognition.For content management systems like AnQiCMS, being able to flexibly call and display the website logo in templates is crucial for improving operational efficiency and maintaining brand consistency.The good news is that AnQiCMS provides a very intuitive and powerful way to dynamically retrieve and display the image address of your website's logo, allowing you to easily manage your brand image without touching the core code.
Background settings: Logo position and management
In AnQiCMS backend, the management of website logo is very convenient. Usually, you can select it in the left navigation bar'sBackend settingsand[en] Global function settings. In this settings page, you will findWebsite Logo
Dynamically call the Logo address in the template
When you need to display the website Logo in the AnQiCMS template, the system provides{% system %}Label. This label is specifically used to obtain system-level configuration information for the website. To get the address of the Logo image, you can usename="SiteLogo"this parameter. The specific format is{% system with name="SiteLogo" %}.
For example, if you want to display the Logo at the top of the web page, you can write it like this:
<div><img src="{% system with name="SiteLogo" %}" /></div>
This code will dynamically retrieve and render the image address of your website's Logo from the AnQiCMS backend configuration, ensuring that the latest Logo is always displayed on the page.
Combine website name (Alt attribute) to improve SEO
Not just displaying the Logo image is enough, in order to better enhance the website's search engine optimization (SEO) effects and user experience, we should addaltproperties.altThe attribute can not only provide alternative text when the image cannot be loaded, but also help search engines understand the content of the image.
AnQiCMS also provides dynamic retrieval of the website name.{% system %}Label, you can usename="SiteName"parameters to get. Combine these two to generate a perfectalttext.
For example, you can write it like this in the altproperties to reference the website name:
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
So, when your Logo displays, it will include the dynamic website name asaltThe attribute value is very beneficial for improving the website's accessibility and search engine ranking.At the same time, in order for the Logo image to have navigation functionality, we usually wrap it in a link tag and point it to the homepage of the website.{% system with name="BaseUrl" %}retrieved.
Complete template code example
Below is a complete example of dynamically displaying a Logo in a website template, which includes the Logo image address andaltThe dynamic acquisition of properties, as well as a link to the homepage:
<header class="main-header">
<a href="{% system with name="BaseUrl" %}" class="logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="site-logo">
</a>
<!-- 其他头部内容，如导航菜单、搜索框等 -->
</header>
Through this method, no matter how your Logo or website name changes in the background, the front-end page will automatically keep up to date without manual modification of the template code.This not only simplifies the daily maintenance of the website, but also ensures the consistency and efficiency of the brand image and SEO strategy, keeping your website professional and easy to manage.
Common Questions (FAQ)
1. Why is my Logo not displaying in the template?
If your logo does not display, please first confirm whether you have uploaded an effective logo image in the "Global Function Settings" of the AnQiCMS backend. Then, check the template file.{% system with name="SiteLogo" %}Is the spelling of the label completely correct.Sometimes, browser cache may also cause the page content to not be updated in time. Try clearing the browser cache or force refresh the page (Ctrl + F5 or Cmd + Shift + R).
2. Can I display different Logos on different pages?
{% system with name="SiteLogo" %}The label is used to obtain the global settings website Logo.If you need to display a different Logo on a specific page, you may need to add a custom field to that page or article to store the address of its exclusive Logo image.{% archiveDetail %}or{% pageDetail %}Tag to get and display the Logo of the custom field.Another method is, if your website structure allows it, you can use AnQiCMS's multi-site management feature to configure independent Logos for different sub-sites.
3. What specific impact does the Alt attribute of the Logo image have on SEO?
Logo image'saltProperties are crucial for the website's SEO and user experience. From an SEO perspective,altThe property provides text description for the image, helping search engines understand the content of the image, thereby improving the visibility of the image in search results. If the image is in a link format (such as a logo linking to the homepage),altText can also be used as the anchor text for this link. From the perspective of user experience, for visually impaired users who use screen readers,altThe attribute can describe the content of the image, enhancing the accessibility of the website. Therefore, it is recommended thataltThe attribute includes the website name or brand keywords to strengthen brand recognition and SEO effect.