如何在安企CMS模板中显示当前网站的名称和Logo？

作为一位资深的网站运营专家，我深知网站的名称与Logo对于品牌形象和用户识别度的重要性。在安企CMS（AnQiCMS）这样功能强大且灵活的内容管理系统中，将这些核心品牌元素呈现在网站模板中，不仅能提升专业度，更有助于搜索引擎优化（SEO）。今天，我就来详细解读如何在AnQiCMS模板中轻松显示当前网站的名称和Logo，让您的品牌在用户眼前熠熠生辉。

安企CMS模板：轻松显示网站名称与Logo，打造专业品牌形象

在数字化时代，网站是企业或个人品牌的“门面”。网站的名称（Site Name）和Logo是其最直观的标识，它们承载着品牌的精髓，影响着用户的首次印象和长期记忆。一个清晰、专业的网站名称和Logo不仅能提升用户体验，还能在搜索引擎结果中占据有利位置，增强品牌识别度。

AnQiCMS作为一款高效、可定制的内容管理系统，充分考虑了这些核心需求。它提供了一套简洁而强大的机制，让您能够轻松管理和展示网站的名称与Logo。本文将带领您从后端配置到前端模板调用，逐步掌握如何在您的AnQiCMS网站中准确无误地显示这些关键品牌元素。

第一部分：后端配置——内容的源头

在AnQiCMS中，网站的名称和Logo等基础信息，首先需要在后台进行统一设置。这些设置是前端模板调用数据的“源头”。

  1. 登录AnQiCMS后台： 打开您的浏览器，输入网站后台地址（通常是您的域名后加上/system/），使用管理员账号密码登录。

  2. 进入“全局功能设置”： 登录成功后，在左侧导航栏中找到并点击“后台设置”，接着选择“全局功能设置”。这里汇集了您网站的核心配置项，包括我们今天要寻找的网站名称和Logo。

  3. 填写“网站名称”： 在“全局功能设置”页面中，您会看到一个名为“网站名称”的输入框。请在这里准确填写您网站的品牌名称，例如“安企CMS官网”、“某某科技（AnQiCMS）”。这个名称不仅会在浏览器标签页、搜索结果中显示，也是您品牌身份的重要组成部分。

  4. 上传“网站LOGO”： 紧接着，您会找到“网站LOGO”的上传区域。点击上传按钮，选择您精心设计的Logo图片文件。上传时，建议使用常见且网络友好的图片格式（如PNG、JPG或WebP），并确保图片尺寸适中，文件大小尽量小，以保证页面加载速度。一个清晰且设计良好的Logo是专业形象的关键。

  5. 保存设置： 完成网站名称填写和Logo上传后，务必点击页面下方的“保存”按钮，确保您的更改被AnQiCMS系统记录。

至此，网站名称和Logo的后端配置就大功告成了。接下来，我们将探讨如何在前端模板中调用这些信息。

第二部分：模板调用——让品牌在前端绽放

AnQiCMS的模板引擎采用了类似于Django模板引擎的语法，这使得内容调用变得直观且易于理解。我们将主要使用system标签来获取我们在后台设置的全局信息。

  1. 理解system标签： system标签是AnQiCMS提供的一个通用标签，专门用于获取网站的全局配置信息。它的基本使用方式是{% system 变量名称 with name="字段名称" %}。其中，name参数用于指定您要获取的具体配置项（例如SiteName或SiteLogo）。如果您不需要将结果赋值给一个变量，可以直接使用{% system with name="字段名称" %}来输出。

  2. 在模板中显示网站名称 (SiteName)： 网站名称通常会出现在页面的<title>标签内，以及网站页头（Header）或其他需要展示品牌名称的位置。

    • 在<title>标签中显示： 网站标题对于SEO至关重要。AnQiCMS提供了一个更便捷的tdk标签来处理页面标题，它能自动拼接网站名称。

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

      上述代码会智能地将当前页面的标题与您在后台设置的“网站名称”拼接起来，形成完整的页面标题。例如，如果页面标题是“关于我们”，网站名称是“AnQiCMS”，那么最终标题可能是“关于我们 - AnQiCMS”。

    • 在页面内容中显示： 如果您想在页面的其他位置（如导航栏、页脚）直接显示网站名称，可以直接调用SiteName字段：

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

      您也可以先将其赋值给一个变量再使用，这在一些复杂场景下可能更方便：

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

  3. 在模板中显示网站Logo (SiteLogo)： 网站Logo通常以<img>标签的形式嵌入到页面中，它承载着网站的视觉标识。

    • 基本显示方法：

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

      这里，src属性直接调用了SiteLogo字段的值（即Logo图片的URL），而alt属性则利用SiteName字段来提供图片描述，这对于SEO和无障碍访问都非常重要。

    • 结合变量显示：

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

      这种方式让代码更具可读性，并且可以在同一代码块中多次使用已定义的变量。

  4. 完整的模板示例： 以下是一个将网站名称和Logo都集成到页面头部的常见示例：

    <!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>

第三部分：优化与注意事项

成功显示网站名称和Logo只是第一步，为了达到**效果，还需要注意一些细节：

  1. 图片优化： 对于网站Logo，除了上传清晰的图片，还应考虑其大小和加载速度。AnQiCMS在“内容设置”中提供了“是否启动Webp图片格式”和“是否自动压缩大图”等功能，可以有效减小图片体积。在上传Logo时，选择已经过优化的图片文件是**实践。

  2. SEO友好： <img>标签的alt属性是搜索引擎理解图片内容的重要依据。始终使用{% system with name="SiteName" %}作为Logo图片的alt文本，可以帮助搜索引擎更好地识别您的品牌，提升相关关键词的排名。

  3. 多站点环境： 如果您在AnQiCMS上管理多个站点，并且希望在模板中调用特定站点的名称或Logo，system标签支持siteId参数。例如，{% system siteName with name="SiteName" siteId="2" %}可以获取ID为2的站点的名称。但通常情况下，在单站点模板中无需指定siteId，系统会自动获取当前站点的配置。

  4. 缓存更新： 在后台更改网站名称或Logo后，如果前端页面没有立即更新