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

As an experienced website operations expert, I know the importance of a website's name and logo to the brand image and user recognition.In AnQiCMS (AnQiCMS) such a powerful and flexible content management system, displaying these core brand elements on 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 name and logo of the current website in AnQiCMS templates, making your brand shine in the eyes of users.

AnQi CMS template: easily display the website name and logo, creating a professional brand image

In the digital age, a website is the 'face' of a company or personal brand.The name of the website (Site Name) and its logo are the most intuitive identifiers, carrying the essence of the brand and influencing the first impression and long-term memory of users.A clear and professional website name and logo can not only enhance the user experience but also occupy a favorable position in search engine results and strengthen 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.

Part one: Backend configuration - the source of content

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

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

  2. Enter "Global Function Settings":After successful login, find and click on "Background Settings" in the left navigation bar, and then select "Global Feature Settings".Here 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 Settings" page, you will see an input box named "Website Name."}Please accurately fill in the brand name of your website, for example, "AnQiCMS official website", "Some Technology (AnQiCMS)."}This name will not only display in the browser tab and search results but is also an important part of your brand identity.

  4. Upload "Website Logo":Next, you will find the upload area for the website logo.Click the upload button and select the logo image file you have carefully designed.When uploading, it is recommended to use common and web-friendly image formats (such as PNG, JPG, or WebP), and ensure that the image size is moderate and the file size is as small as possible to ensure the page loads quickly.A clear and well-designed logo is the key to a professional image.

  5. Save settings:After completing the website name entry and Logo upload, be 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 completed. Next, we will discuss how to call this information in the frontend template.

The second part: template invocation - let the brand shine on the front end

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

  1. UnderstandingsystemTags: systemThe tag is a general tag provided by AnQiCMS, which is specifically used to obtain the global configuration information of the website. Its basic usage is{% system 变量名称 with name="字段名称" %}. Among them,nameParameters are used to specify the specific configuration item you want to retrieve (for exampleSiteNameorSiteLogo). 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):Website names usually appear on the page.<title>Within tags, as well as in the page header (Header) or other locations where the brand name needs to be displayed.

    • In<title>Displayed in 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 title of the current page with the "site 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 may be “About Us - AnQiCMS”.

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

      <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 displayed with<img>The label is embedded in the page, 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 property directly invokedSiteLogoThe value of the field (i.e., the URL of the Logo image), andaltthe attribute usesSiteNameField to provide image description, which is very important for SEO and accessibility.

    • Display with variables:

      {% 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 can be used multiple times within the same code block.

  4. Complete template example:This 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 considerations

Successfully displaying the website name and logo is just the first step; to achieve **the effect, you still need to pay attention to some details:

  1. Image optimization:For the website logo, in addition to uploading a clear image, you should also consider its size and loading speed.AnQiCMS provides features such as 'Enable Webp image format' and 'Automatically compress large images' in the 'Content Settings', which can effectively reduce the size of images.It is**practical**to choose an optimized image file when uploading a Logo.

  2. SEO friendly: <img>label'saltProperties are an important basis for search engines to understand the content of images. Always use{% system with name="SiteName" %}As a logo imagealtText that can help 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 the name or Logo of a specific site,systemTag supportsiteIdthe parameters. For example,{% system siteName with name="SiteName" siteId="2" %}You can retrieve the name of the site with ID 2. But usually, in a single-site template, it is not necessary to specifysiteIdThe system will automatically retrieve 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