The name and logo of a website, like a person's name and face, are indispensable signs.They are not only the core of brand image, but also the key elements to enhance the professionalism of the website, increase user trust, and facilitate memory.In AnQiCMS, it's simple and flexible to elegantly present these important identification elements in the website template, which is easier than you imagine.
Understanding the basic settings in AnQiCMS
In AnQiCMS, the website's name and logo, and other basic information are all concentrated in the "Global Function Settings" on the backend. You can log in to the backend and navigate toBackground settings -> Global settings
Display website name in template
To display the website name set in the background of your website template, AnQiCMS provides a very intuitive and powerful tag —systemLabel.systemTags are used specifically to retrieve various system configuration information, including the website name we need.
You can use the following code to call the website name at any location in the template file:
{% system with name="SiteName" %}
This code will directly output the website name you filled in the "Global Function Settings" on the backend.
For example, if you want to display the website name in the website's<title>tag, combinetdkLabel, you can write it like this:
<title>{% tdk with name="Title" siteName=true %}</title>
Here,{% tdk with name="Title" siteName=true %}Will intelligently match the title of the current page with your website name (throughsiteName=trueParameters combination display, for example “Article Title - Your Website Name”, this is a very good practice for SEO.
If you just want to display the website name in the page content, for example, next to the footer copyright information, you can do it like this:
<div>© {{ "now"|date:"2006" }} {% system with name="SiteName" %}. All Rights Reserved.</div>
Through this method, the website name can dynamically appear anywhere you wish.
Display the website logo in the template
Similar to the website name, displaying the website logo also goes throughsystemLabel implementation. The address of the Logo image uploaded on the backend can be obtained through parameters.SiteLogoThisnameParameters.
To insert the website Logo in the template, you can use it like this:
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
This code will generate a<img>tags,srcThe attribute points to the address of the Logo image you uploaded, whilealtThe attribute cleverly uses the 'website name' we obtained earlier.This not only ensures that there is text as a substitute when the image fails to load, but more importantly, it provides explicit information about the content of this image to search engines, which is an important detail for SEO optimization.
You usually place this code in the header area of the website, so that it can clearly display the brand logo on each page.
**Practice and SEO Considerations
- Logo的Alt属性：始终为Logo图片添加
altProperties, and use the website name as its value. This helps visually impaired users understand the image content and also enables search engines to better identify your brand. - Responsive DesignEnsure your logo image displays well on all devices.AnQiCMS in the background "Content Settings" provides image auto-compression and WebP format conversion features, which helps optimize the file size and loading speed of Logo images, thereby enhancing the user experience.
max-width: 100%; height: auto;, enabling the Logo to adapt to the layout. - Title Tag Optimization: As mentioned earlier, integrating the website name into
<title>the tags is an important part of SEO. Through{% tdk with name="Title" siteName=true %}such tags, you can easily achieve this goal. - ConsistencyEnsure that the website name and Logo are consistent throughout the entire website, whether in the header, footer, or other promotional materials.Brand consistency helps to build a strong brand image.
Through the convenient tags and flexible settings provided by AnQiCMS, you can easily integrate the website's name and Logo into your template, providing users with a professional, unified, and optimized browsing experience.
Common Questions and Answers (FAQ)
Q1: I updated the website logo in the background, why didn't the front page change immediately?
A1: This may be due to browser cache or AnQiCMS system cache.You can try clearing the browser cache, or click the "Update Cache" feature in the AnQiCMS backend (usually located at the bottom of the backend homepage or system settings) to refresh the website content.
Q2: Can I set a different logo for the PC and mobile end?
A2: AnQiCMS's “Global Function Settings” provides a default single website logo upload entry.If you need to display different Logos for PC and mobile devices, you can achieve this by determining the current device type in the template and then using custom fields or different image paths.logo_pc.png，another one islogo_mobile.pngThen, based on the device, different images are loaded in the template.
Q3: Can I control the separator between the website name and the page title when it is displayed in the page title?
A3: Of course you can. When usingtdkLabel display title, you can addsepparameters to specify the separator. For example,{% tdk with name="Title" siteName=true sep=" | " %}the page title and website name will be separated by “ | ”.