How to effectively display the site name and Logo configured in the AnQi CMS backend on the front-end page?

In website operation, the name and logo of the site are the cornerstone of the brand image, they are not only an important sign for visitors to identify the website, but also a key to conveying brand value and establishing trust.AnQiCMS as a powerful content management system fully considers this need and provides an intuitive and convenient way to configure and display these core brand elements.Next, let's discuss how to effectively use the site name and Logo configured in AnQiCMS to bring vitality to the front-end page.

One, background configuration: Define the 'front' for your website

On the AnQiCMS backend management interface, the process of setting the site name and logo is very simple and intuitive. This is like setting a unique identity for your website.

First, you need to log in to the AnQiCMS backend, then find the "Background Settings" in the left menu bar, click to enter, and select "Global Function Settings". Here, you will see several key configuration items that are directly related to the brand display of the website:

  • Website NameThis field is the formal name of your website, it will appear in the browser tab, page title (<title>Label) at multiple important locations. A clear and concise website name helps to enhance brand recognition.
  • Website LOGO: You are allowed to upload the website's logo image. It is recommended to upload a high-resolution, appropriate format (such as PNG with transparent background) logo file.A good logo design can attract visitors at a glance and enhance professionalism.

After completing these settings and saving, this information has already been stored in the AnQiCMS system, ready to be called from the front-end template.

Second, front-end call: Make brand elements leap to the screen

After configuring the background information, the next step is to display this information on the front page of the website.The AnQiCMS template system provides a simple and powerful tag, which can easily achieve this.

1. Core Tool:systemTag

AnQiCMS is specially designed to obtain system configuration informationsystemLabel. By this label, we can conveniently obtain the 'website name' and 'website logo' set in the background.

  • Get site nameTo display the website name, you can use the following tag in the template:

    {% system with name="SiteName" %}

    This tag will directly output the website name you entered in the background "Global Function Settings".

  • Get the website logo: To display the image address of the website logo, you can use:

    {% system with name="SiteLogo" %}

    This tag will output the complete URL of the uploaded logo image.

2. In the template application

As a rule, the site name and logo appear in the top navigation bar (header), footer, and page<body>Tags within the other key areas. Moreover, the website name will also be used in the page title.titleTags are crucial for Search Engine Optimization (SEO).

Let's demonstrate how to integrate these elements in a common HTML structure example:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# 使用tdk标签获取页面标题，并附加网站名称，这更有利于SEO #}
    <title>{% tdk with name="Title" siteName=true %}</title>
    <!-- 其他CSS、JS引入 -->
</head>
<body>
    <header>
        <div class="container">
            <a href="/" class="brand-link">
                {# 调用后台设置的Logo，并用网站名称作为alt文本，提升可访问性和SEO #}
                <img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}" class="site-logo">
            </a>
            <span class="site-name">{% system with name='SiteName' %}</span>
            <!-- 导航菜单等其他头部内容 -->
        </div>
    </header>

    <main>
        <!-- 页面主要内容 -->
    </main>

    <footer>
        <div class="container">
            {# 结合系统年份和网站名称，展示版权信息 #}
            <p>&copy; {% now "2006" %} {% system with name='SiteName' %} 版权所有.</p>
            {# 后台设置的备案号，如果需要也可以展示 #}
            {%- system siteIcp with name="SiteIcp" %}
            {%- if siteIcp %}
            <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{{siteIcp}}</a></p>
            {%- endif %}
        </div>
    </footer>
</body>
</html>

In the above example, we not only demonstrated how to call the site name and Logo, but also combinedtdktags to build more SEO-friendly page titles, and usednowThe label dynamically displays the current year, keeping the copyright information up to date.

3. Tips for improving user experience and SEO

  • Logo image optimizationThe uploaded logo image size should be moderate and compressed to speed up website loading.AnQiCMS provides the function of enabling Webp image format and automatically compressing large images in the 'Background Settings' -> 'Content Settings'. Reasonably using these settings can further optimize the image loading performance.
  • Responsive DesignEnsure that the Logo displays well on different devices (PC, tablet, mobile). Different sizes or styles can be set for the Logo using CSS media queries.
  • The importance of the Alt attributeIn<img>the tag withalt(for examplealt="{% system with name='SiteName' %}"This is a good web practice. It not only helps search engines understand the content of images, but also provides text descriptions when images cannot be loaded, improving the accessibility of the website.
  • Uniformity of site name and LogoTry to keep the text in the Logo consistent with the "site name" set in the background, which helps to strengthen the brand image.

Summary

AnQiCMS makes it very easy to display the site name and logo configured in the backend on the front-end page.Through intuitive backend configuration and powerful template tags, you can quickly and effectively build a professional, brand-distinguishing website.Remember, these seemingly simple elements are an indispensable part of the website's brand image and user experience.

Frequently Asked Questions (FAQ)

Q1: Why did the logo image I set on the back end not display on the front end?

A1: This usually has several reasons. First, please check if the tag calling the Logo in your template file is correct, for example{% system with name='SiteLogo' %}ofSiteLogoIs the spelling correct? Secondly, confirm that the file path of the uploaded Logo image is correct. If a CDN or image hosting service is used, ensure its accessibility.Finally, try to clear the browser cache and AnQiCMS system cache (there is an option for "Update Cache" at the bottom of the left menu in the background management interface), because the browser may cache old images or templates.

Q2: Can I use different logos on the front end? For example, one for the PC端 and one for the mobile端?

A2: In AnQiCMS 'Global Function Settings'网站LOGOFields usually correspond to only one Logo. If you need to display different Logos for desktop and mobile, you can consider the following two methods:

  1. CSS Media Queries: Refer to two Logo images (one for PC and one for mobile) in the front-end template, and then use CSS media queries (@media screen and (max-width: 768px)Use) to control which Logo is displayed at a specific screen size and which is hidden.
  2. Custom parameterIn the AnQiCMS backend "Global Function Settings", you can add custom parameters, such as creating a namedMobileLogoThe parameter is used to upload the mobile logo. Then in the template.