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 important signs for visitors to identify the website but also key to conveying brand values and building 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 explore how to effectively use the background configuration of site name and Logo in AnQiCMS to make them vibrant on the frontend page.

一、Backend Configuration: Define the "front" for your website

In 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

  • Website NameThis field is the official name of your website, it will appear in the browser tab and page title (<title>Label) at multiple important positions. A clear and concise website name helps enhance brand recognition.
  • website logoHere you are allowed to upload the website's logo image.Suggest uploading 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 and is ready to be called in the frontend template at any time.

二、Front-end Call: Let brand elements leap onto the screen

Configure the background information first, and the next step is to display this information on the front page of the website.AnQiCMS's template system provides simple and powerful tags, which can easily achieve this.

1. Core Tools:systemtags

AnQiCMS is specially designed to obtain system configuration informationsystemLabel. Through 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 filled in the "Global Function Settings" in the background.

  • Get 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 logo image you upload.

2. In the template actually applied

usually, the site name and logo appear in the top navigation bar (header), bottom copyright information (footer) and the page<body>Tagged other key areas within. Additionally, the website name will also be used for the page title.titleTags are crucial for Search Engine Optimization (SEO).

Let's demonstrate how to integrate these elements in a template with 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 combined withtdktags to build more SEO-friendly page titles, and usednowLabel dynamically displays the current year, keeping the copyright information up to date.

3. Tips to improve user experience and SEO

  • Logo image optimization：Uploaded logo image should be moderately sized and compressed to speed up website loading.AnQiCMS in the "Background Settings" -> "Content Settings" provides the functions of "Whether to enable Webp image format" and "Whether to automatically compress large images", and reasonable use of 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 attribute: In<img>tag.altProperties (such asalt="{% system with name='SiteName' %}"）is a good Web practice. It not only helps search engines understand the content of the image, but also provides text descriptions when the image cannot be loaded, improving the accessibility of the website.
  • Name and Logo UniformityKeep the text in the Logo consistent with the "Website Name" set in the background, which helps to strengthen the brand impression.

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-identifiable website.Remember, these seemingly simple elements are an indispensable part of the website's brand image and user experience.

Common Questions (FAQ)

Q1: Why did the Logo image not display on the front end even though I set it in the backend?

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.Next, confirm whether the file path of the uploaded Logo image is correct. If CDN or image hosting is used, ensure that it is accessible.Finally, try to clear the browser cache and AnQiCMS system cache (there is an option '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 end and one for the mobile end?

A2：In the “Global Function Settings” of AnQiCMS网站LOGOFields usually correspond to only one Logo. If you need to display different Logos for PC and mobile ends, consider the following two methods:

  1. CSS Media QueriesIn the front-end template, reference two Logo images (one for PC and one for mobile), and then use CSS media queries (@media screen and (max-width: 768px)Control which Logo is displayed and which is hidden under specific screen sizes.
  2. Custom ParametersIn the 'Global Function Settings' of AnQiCMS backend, you can add custom parameters, such as creating a namedMobileLogoThe parameter to upload the mobile end Logo. Then in the template