How to display website name and Logo in AnQiCMS?

The website name and logo are like the face of a brand, they are not only the first impression visitors have of you, but also an important manifestation of the website's professionalism and recognition.In AutoCMS, setting and displaying your website name and logo is a straightforward and efficient process.Next, we will explore together how to perfectly present these key elements on your website.

Firstly, set the website name and Logo in the background

To make your website have a dedicated name and Logo, the first step is to configure it in the AnQi CMS backend management interface.

  1. Enter global settings:Login to your security CMS backend, you will see a series of function options in the left navigation bar. Find and click on “Backend Settings”, then select “Global Settings”.
  2. Configure website nameIn the global settings page, you will find an input box named "Website Name".Enter the name you want the website to display to the public, such as your company name, brand name, or personal blog name.This name is usually used as the suffix of the web page title and has a certain effect on Search Engine Optimization (SEO).
  3. Upload website Logo:Following the website name, there is usually an option to set a “website logo”.Click the upload button, select the Logo image file you have prepared in advance.The CMS supports various image formats and will automatically perform some optimization processing.After uploading successfully, the Logo image will be displayed in the preview area.
  4. Save Changes:After completing the entry of the website name and uploading the Logo, please be sure to click the "Save" or "Submit" button at the bottom of the page to ensure that your settings take effect.

By following these steps, your website name and Logo have already been configured in the system backend. But at this time, they will not be displayed on your website front-end immediately.

Next, call to display in the front-end template

Configuration completed, the next step is how to display this information on the website front-end.The security CMS adopts a template engine to control the display of the website, which means you need to edit the template files to call the data set by the backend.

  1. Locate the template file:The header area of a website is typically the ideal location to display the website name and logo. In AnQiCMS, commonly used common template files (such asbash.htmlorheader.htmlThese files may contain these general elements, the specific name may vary depending on the template.) They are usually located in/templatethe folder of the template you are currently using under the directory.

  2. Website name calledTo display the website name you set in the background, you can use the system tags provided by AnQiCMS. Insert the following code at the corresponding location in the template file:

    {% system with name="SiteName" %}
    

    This code will directly output the text you enter in the "Website Name" field on the back end. For example, you can place it in<title>tags, or some part of the page.<h1>Tags inside.

  3. Call the website logo:For website Logo, the system tag is used to call it. The Logo is usually embedded in the page in the form of tags, and it is recommended to add<img>标签的形式嵌入页面,并建议添加altThe attribute enhances accessibility and SEO-friendliness.

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

    Here,srcThe attribute points to the address of the Logo image you uploaded, whilealtThe attribute cleverly uses the website name as alternative text, ensuring that meaningful text descriptions are displayed even if the image cannot be loaded.

  4. Save template fileAfter modifying the template file, remember to save your changes. If you are editing the template code in the background, the system usually saves it automatically.

Through these two steps, your website name and Logo will be elegantly presented on the website front end according to your settings.The template system of AnQi CMS is flexible and powerful, allowing you to easily display these core elements without writing complex code.

Common Questions (FAQ)

  1. I have modified the website name or Logo, but it did not take effect immediately on the front end. Why is that?This is likely caused by caching.The AnQi CMS generates cache files to improve website access speed.When you modify the settings in the background, if the front end does not update immediately, you can try clearing the system cache.The translation of 'auto' to 'English' is 'English'. Please note that the actual translation was not provided, so I have used 'English' as a placeholder.In addition, your browser may also have cached old pages, try clearing the browser cache or accessing the website in incognito mode.

  2. Can I set different website names or Logos for different pages of the website?Pass{% system with name="..." %}The website name and Logo called by the tag, which is a system-level global setting, means they remain consistent throughout the entire website.If you need to set a unique name or Logo for a specific page, this usually requires advanced template customization.You can define custom fields to store different logo images or names in the page management for specific pages, and then call these custom fields in the page template using conditional judgment or page detail tags to override the global settings.This will increase the complexity of the template, and it is usually not recommended to frequently change the core identifiers to maintain the unity of the brand image.

  3. My logo image appears incorrectly in size or position after upload, how can I adjust it?The size and position of the logo are usually controlled by the CSS styles of your website template.When uploading images, the security CMS may perform compression or cropping, but the final display effect depends on the template style.You can try to use CSS code to adjust the width, height, or margin of the Logo image to meet the design requirements.If you are not familiar with CSS, you can seek help from the template developer or front-end designer, or check in the global settings in the background to see if there are any preset options for logo size.