How to display the current website's name and Logo in Anqi CMS template?

As an experienced website operation expert, I fully understand the importance of the website's name and logo for brand image and user recognition.In a powerful and flexible content management system like AnQiCMS, presenting these core brand elements in the website template not only enhances professionalism but also helps with search engine optimization (SEO).Today, I will give a detailed explanation of how to easily display the current website's name and logo in AnQiCMS templates, making your brand shine in the eyes of users.

Anqi CMS template: Display website name and Logo easily, create a professional brand image

In the digital age, a website is the 'front door' for a company or personal brand.The name of the website (Site Name) and Logo are its most intuitive identifiers, carrying the essence of the brand and influencing the first impression and long-term memory of users.An clear and professional website name and logo can not only enhance user experience but also occupy a favorable position in search engine results, enhancing brand recognition.

AnQiCMS as an efficient and customizable content management system fully considers these core needs.It provides a simple and powerful mechanism that allows you to easily manage and display the name and Logo of the website.This article will guide you from backend configuration to frontend template invocation, step by step mastering how to accurately display these key brand elements on your AnQiCMS website.

First part: Backend Configuration - The Source of Content

In AnQiCMS, the website's name and logo, etc., basic information, first needs to be set uniformly in the background. These settings are the 'source' of the data called by the front-end template.

  1. Log in to the AnQiCMS admin panel:Open your browser, enter the website backend address (usually your domain name followed by)/system/), log in with the administrator account and password.

  2. Go to "Global Function Settings":After logging in, find and click "Backend SettingsHere is gathered the core configuration items of your website, including the website name and Logo we are looking for today.

  3. Enter 'Website Name':In the "Global Feature SettingsPlease accurately fill in the brand name of your website here, for example, 'AnQiCMS Official Website' or 'Some Technology (AnQiCMS)'.This name will not only be displayed in the browser tab and search results, but is also an important part of your brand identity.

  4. Upload “Website Logo”:Here you will find the upload area for the "website logo".Click the upload button and select the logo image file you have carefully designed.Upload files in common and web-friendly image formats (such as PNG, JPG, or WebP), and ensure that the image dimensions are moderate and file sizes are as small as possible to ensure fast page loading.A clear and well-designed logo is the key to a professional image.

  5. Save settings:Complete the website name entry and upload the Logo, and then make sure to click the "Save" button at the bottom of the page to ensure that your changes are recorded by the AnQiCMS system.

The backend configuration of the website name and Logo is successfully completed. Next, we will discuss how to call this information in the front-end template.

Second part: Template invocation - Let the brand shine on the front end

AnQiCMS's template engine uses syntax similar to Django template engine, which makes content calls intuitive and easy to understand. We will mainly usesystemLabel to get the global information we set in the background.

  1. UnderstandingsystemTags: systemThe label is a general label provided by AnQiCMS, which is specifically used to obtain the global configuration information of the website. Its basic usage method is{% system 变量名称 with name="字段名称" %}.nameThe parameter is used to specify the specific configuration item you want to retrieve (for example,SiteNameorSiteLogo). If you do not need to assign the result to a variable, you can use it directly{% system with name="字段名称" %}To output.

  2. to display the website name in the template (SiteName):The website name usually appears on the page.<title>Within the tags, as well as in the website header (Header) or other locations where the brand name needs to be displayed.

    • In<title>Display within the tags:The website title is crucial for SEO. AnQiCMS provides a more convenienttdktag to handle page titles, which can automatically concatenate the website name.

      <title>{% tdk with name="Title" siteName=true %}</title>

      This code will intelligently concatenate the current page title with the 'website name' you set in the background to form a complete page title.For example, if the page title is “About Us”, and the website name is “AnQiCMS”, then the final title might be “About Us - AnQiCMS”.

    • Display in the page content:If you want to display the website name directly at other locations on the page (such as the navigation bar, footer), you can directly callSiteNameFields:

      <header>
    <h1>{% system with name="SiteName" %}</h1>
</header>
<footer class="site-info">
    <p>&copy; 2023 {% system with name="SiteName" %}. All Rights Reserved.</p>
</footer>

      You can also assign it to a variable first and then use it, which may be more convenient in some complex scenarios:

      {% system siteName with name="SiteName" %}
<header>
    <h1>{{ siteName }}</h1>
</header>

  3. Display the website logo in the template (SiteLogo):The website logo is usually in<img>The label is embedded in the page in the form of tags, carrying the visual identity of the website.

    • Basic display methods:

      <div class="logo">
    <a href="/">
        <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
    </a>
</div>

      Here,srcThe properties directly calledSiteLogoThe value of the field (i.e., the URL of the Logo image), andaltproperty is used toSiteNameThe field provides image descriptions, which are very important for SEO and accessibility.

    • Combined variable display:

      {% system siteLogo with name="SiteLogo" %}
{% system siteName with name="SiteName" %}
<div class="logo">
    <a href="/">
        <img src="{{ siteLogo }}" alt="{{ siteName }}" />
    </a>
</div>

      This way makes the code more readable and allows the reuse of defined variables multiple times within the same code block.

  4. Complete template example:The following is a common example of integrating the website name and Logo into the page header:

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 页面标题，结合了当前页标题和网站名称 -->
    <title>{% tdk with name="Title" siteName=true %}</title>
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="logo">
                <a href="{% system with name="BaseUrl" %}" title="返回首页">
                    <!-- 网站Logo及其alt文本 -->
                    <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
                </a>
            </div>
            <nav class="main-nav">
                <!-- 网站名称可作为辅助标题或隐藏文本 -->
                <span class="visually-hidden">{% system with name="SiteName" %}</span>
                <!-- 导航列表 -->
                {% navList navs %}
                    <ul>
                        {% for item in navs %}
                            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                        {% endfor %}
                    </ul>
                {% endnavList %}
            </nav>
        </div>
    </header>


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


    <footer class="site-footer">
        <div class="container">
            <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All Rights Reserved. </p>
            <p>{% system with name="SiteIcp" %}</p>
        </div>
    </footer>
</body>
</html>

Part three: Optimization and注意事项

Successfully displaying the website name and logo is just the first step. To achieve **effect, some details need to be paid attention to:

  1. Image Optimization:For the website logo, in addition to uploading a clear image, you should also consider its size and loading speed.AnQiCMS in the "Content Settings" provides features such as "Enable Webp image format" and "Compress large images automatically", which can effectively reduce the size of images.When uploading the logo, choosing an already optimized image file is**practical**.

  2. SEO-friendly: <img>Tagsalt属性是搜索引擎理解图片内容的重要依据。始终使用English{% system with name="SiteName" %}作为Logo图片的EnglishaltText that helps search engines better identify your brand and improve the ranking of relevant keywords.

  3. Multi-site environment:If you manage multiple sites on AnQiCMS and want to call a specific site's name or Logo in the template,systemtag supportsiteIdparameters. For example,{% system siteName with name="SiteName" siteId="2" %}Can obtain the name of the site with ID 2. But usually, it is not necessary to specify in the single-site template.siteIdThe system will automatically obtain the configuration of the current site.

  4. Cache update:After changing the website name or Logo in the background, if the front-end page does not update immediately