How to display the website name and logo in the template?
The website's name and logo, like a person's name and face, are indispensable symbols.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, elegantly present these important identification elements in the website template, which is simpler and more flexible than you imagine.
Understanding the basic settings in AnQiCMS website
In AnQiCMS, the website's name and logo, as well as other basic information, are all concentrated in the "Global Function Settings" backend. You can log in to the backend and navigate toBack-end Settings -> Global SettingsPage is being configured. Here, you can find options such as 'Website Name' and 'Website Logo' and so on.The website name is typically your company name or brand, and it will be an important part of the website title. “The website logo allows you to upload an image identifier for the website header.”These settings completed in the background are the foundation for the front-end template to call and display this information.Once this information is saved, the AnQiCMS system will store it for the template to use at any time.
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 ——system.systemThe tag is used to obtain various system configuration information, including the website name we need.
You can use the following code to call the website name at any position in the template file.
{% system with name="SiteName" %}
This code will directly output the website name you entered in the background "Global Function Settings".
For example, if you want to display the website<title>name in the 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 current page title with your website name (throughsiteName=trueParameters) combination display, such as "Article Title - Your Website Name", which 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 copyright information in the footer, you can do it like this:
<div>© {{ "now"|date:"2006" }} {% system with name="SiteName" %}. All Rights Reserved.</div>
In this way, 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 throughsystemImplement the label. The address of the Logo image uploaded on the back-end can be obtained through parameters.SiteLogoThisname.
To insert the website Logo into 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>tag, srcThe attribute points to the address of the Logo image you uploaded, andaltThe attribute cleverly uses the 'website name' we obtained earlier.This ensures that there is text substitution if the image fails to load, and more importantly, it provides clear information about the content of the image to search engines, which is an important detail for SEO optimization.
You usually place this code in the header (header area) of the website so that it can clearly display the brand logo on each page.
**Practice and SEO considerations
- Logo's Alt attributeAlways add Alt attribute to Logo image
altProperties, and use the website name as its value. This helps visually impaired users understand the image content and also allows search engines to better identify your brand. - Responsive DesignMake sure your logo image displays well on different devices.AnQiCMS provides image auto-compression and WebP format conversion features in the "Content Settings" section of the backend, which helps optimize the file size and loading speed of the Logo image, thereby enhancing the user experience.Use responsive rules in CSS, such as
max-width: 100%; height: auto;It can make the Logo adapt to the layout. - Title Tag Optimization: As mentioned earlier, integrating the website name into
<title>the tag is an important aspect 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 site, whether in the header, footer, or other promotional materials.Brand consistency helps to build a strong brand image.
By using the convenient tags and flexible settings provided by AnQiCMS, you can easily integrate your website's name and logo into your template, providing users with a professional, unified, and optimized browsing experience.
Frequently Asked Questions (FAQ)
Q1: Why did the front page not change immediately after I updated the website logo in the background?
A1: This may be due to browser cache or the system cache of AnQiCMS.You can try clearing your browser cache, or click the 'Update Cache' feature in the AnQiCMS backend (usually located on the backend homepage or under system settings) to refresh the website content.
Can I set a different logo for the PC and mobile ends?
A2: AnQiCMS's "Global Function Settings" defaults to providing only one website logo upload entry.If you need to display different Logos for PC and mobile, you can achieve this by determining the current device type in the template and then using custom fields or different image paths.For example, you can upload two logos, one namedlogo_pc.png, another islogo_mobile.png, then load different images according to the device in the template.
Q3: When the website name is displayed in the page title, can I control the separator between it and the page title?
A3: Of course, you can. In usingtdkWhen the tag displays the title, you can addsepparameters to specify the separator. For example,{% tdk with name="Title" siteName=true sep=" | " %}it will separate the page title and website name with “|”.