How to display the system configured name and Logo on the website homepage?

The website name and logo are the cornerstone of the brand image, they not only convey the identity of the website quickly but also enhance the user's sense of trust and recognition.In AnQiCMS, presenting these important brand elements on the homepage is a direct and flexible task.AnQiCMS provides an intuitive backend setup and powerful template tag features, making this task very simple.

Back-end configuration: unified management of brand information

Firstly, all information that is expected to be displayed on the website front end needs to be centrally managed in the AnQiCMS backend.This ensures consistency of brand information and makes it convenient for operations personnel to adjust at any time.

To set the website name and logo, you can:

  1. Enter the AnQiCMS backend management interface: This is the starting point for all website configurations.
  2. Navigate to 'Backend Settings'In the left menu bar, find and click the "Backend Settings" option.
  3. Select the "Global Feature Settings".In the submenu of "Background Settings", click to enter "Global Function Settings". Here are the basic information configurations of the website.

On the "Global Feature Settings" page, you will see several key configuration items:

  • Website NameThis is a text box for entering the name of your website or brand.This name is usually used as a suffix for website titles and also appears as text identification in many placesPlease enter the website name you want users to see on the homepage.
  • Website LOGO：Here is a picture upload area. You can click the upload button to upload your brand logo image to the server.AnQiCMS supports various image formats and manages them automatically after uploading.After the upload is complete, the Logo image will be associated with your website.

After completing these configurations, please remember to click Save to make your changes effective.The AnQiCMS backend design makes it very convenient to manage these key information, all updates in the background will be quickly reflected on the front end of the website.

If you have some unique brand slogans or auxiliary information that you also want to display on the homepage, you can do so on the page of “Global Function Settings”,『Custom Setting Parameters』Add. You can name these custom parameters (for exampleBrandSlogan) and assign them corresponding values (for example "Make content management simpler"), and then you can flexibly call them in the template.

Template call: Display brand information on the homepage

After the background information is configured, the next step is to display these data accurately on the homepage of the website through AnQiCMS template tags. The AnQiCMS template system uses syntax similar to the Django template engine, with double curly braces{{变量}}To output variables, use single curly braces and percent signs{% 标签 %}To call function tags.

AnQiCMS provides a namedsystemThe dedicated tag used to retrieve all information configured in the 'Global Function Settings'.

Display the website name

To display the configured website name on the homepage, you can use it like this.systemTags:

{% system with name="SiteName" %}

This label will directly output the website name you fill in the "Global Function Settings" on the backend.

In order to better organize the code and allow the same data to be referenced multiple times in the template, you can assign the obtained website name to a variable:

{% system siteName with name="SiteName" %}
<!-- 在这里，您可以多次使用 {{siteName}} 来显示网站名称 -->
<h1>欢迎来到 {{siteName}}</h1>
<p>&copy; {{siteName}} 版权所有</p>

This code first goes through{% system siteName with name="SiteName" %}Store the website name configured in the background under the variable namedsiteName, and then you can display it in different locations on the page{{siteName}}to refer to it.

to show the website logo

Similar to the website name, displaying the website logo also passes throughsystemtag implementation. You need to obtain the URL of the logo image and use it as<img>label'ssrcProperty value.

{% system with name="SiteLogo" %}

Likewise, we recommend assigning it to a variable for management:

{% system siteLogo with name="SiteLogo" %}
{% system siteName with name="SiteName" %}

<a href="/">
    <img src="{{siteLogo}}" alt="{{siteName}} Logo" class="website-logo">
</a>

Here, {{siteLogo}}It will output the complete URL of the Logo image. It is worth noting that we also obtained it at the same time:siteNameand used it as<img>label'saltProperty value. This is a good practice, not only helps SEO optimization, but also provides meaningful text alternatives when images cannot be loaded, enhancing user experience.class="website-logo"This style class can make it convenient for you to control the display effect of the Logo through CSS.

Custom parameter call

If you add custom parameters (such as in the "Global Feature Settings" backendBrandSlogan), you can also usesystemtag to call:

{% system brandSlogan with name="BrandSlogan" %}
<p>{{brandSlogan}}</p>

This will display your custom slogan content on the page.

Deployment and file location

These template codes need to be placed in your website template file.In most cases, the Logo and website name appear in the public header area of the website.In AnQiCMS, template files are stored in a unified location/templateEach topic has its own independent folder under the directory.

You need to find the template folder currently in use and then edit the contents ofindex.html(Homepage template) or a common header file (such aspartial/header.html), insert the above code snippet at the appropriate position. If your website uses a commonbash.htmlorpartial/header.htmlTo build the page header, then place these tags in these common files, it can ensure that all pages of the website can display the name and Logo uniformly, without repeating the code on each page.

Summary

Through AnQiCMS' simple and intuitive backend configuration and powerful template tag functions, you can easily display the brand name and Logo of your website on the homepage and maintain consistency across all pages.This design not only improves the efficiency of content management, but also provides flexible and reliable support for the brand display of the website.

Frequently Asked Questions (FAQ)

  1. Why did the homepage not update immediately after I modified the website name or Logo in the background?This may be due to system caching. AnQiCMS will enable caching to improve website access speed.After you modify the configuration in the background, you may need to manually clear the system cache to immediately display the latest content on the front-end page.You can find the 'Update Cache' feature in the left menu of the admin interface, click to execute it.
  2. Can I display other custom text or images on the homepage besides the website name and Logo?Of course you can. On the "Global Function Settings" page of AnQiCMS backend, you can use the "Custom Setting Parameters" to add any text or image link you want to display on the homepage or other pages.Set a unique "parameter name" for each custom parameter (for exampleServiceHotlineAnd it is passed through the template by{% system with name="ServiceHotline" %}method.
  3. Will my Logo image file size affect the website loading speed? Does AnQiCMS have a solution?The size of the image indeed affects the website loading speed. AnQiCMS provides multiple image optimization features in the 'Background Settings' -> 'Content Settings'.You can choose to "enable Webp image format" to automatically convert uploaded images to smaller WebP format, or turn on "auto-compress large images" and set the specified width, the system will automatically compress the images when uploading to optimize website performance.