如何使用`system`标签在页面上显示网站名称和Logo？

轻松搞定：在AnQiCMS页面上如何优雅地显示你的网站名称和Logo

在运营网站时，品牌标识的展示至关重要。网站名称和Logo不仅是访客识别您品牌的关键元素，也是提升网站专业度和信任感的基石。AnQiCMS提供了一套直观而强大的模板标签系统，让您能够轻松地在网站的任何页面上调用并显示这些核心信息。其中，system标签就是专为获取这类全局站点配置而设计的。

接下来，我们将一起探索如何灵活运用system标签，让您的网站名称和Logo在页面上熠熠生辉。

认识system标签：网站信息的“数据管家”

system标签是AnQiCMS模板引擎中一个非常实用的内置标签，它的主要职责是帮助我们获取网站的各项全局配置信息。这些信息通常在后台的“设置”模块中统一管理，例如网站名称、Logo图片地址、备案号、版权信息等。通过system标签，您可以将这些信息动态地呈现在网站前台页面上，而无需硬编码，大大提升了模板的复用性和可维护性。

使用system标签的基本语法是这样的：{% system 变量名称 with name="字段名称" %}。 在这里，“变量名称”是一个可选的临时别名，如果您定义了它，就可以在后续的代码中通过这个别名来引用获取到的数据。而“字段名称”则是最核心的部分，它决定了您想要从系统设置中获取哪一项具体的数据，比如SiteName（网站名称）或SiteLogo（网站Logo）。

显示您的网站名称

网站名称是品牌最直接的体现。在AnQiCMS中，您可以轻松地将其显示在页眉、页脚或者任何您希望访客看到的地方。

首先，您需要在后台的“设置”菜单下，找到“全局功能设置”。在这里，您可以填写您的“网站名称”，这个名称通常是您的品牌全称。

在模板文件中，您可以这样使用system标签来获取并显示它：

<!-- 直接输出网站名称 -->
<div>欢迎来到：{% system with name="SiteName" %}</div>

<!-- 或者，先赋值给一个变量，再使用变量输出 -->
{% system siteTitle with name="SiteName" %}
<div>当前网站名称是：{{siteTitle}}</div>

通过这简单的几行代码，您的网站名称就会准确地呈现在页面上。如果您想让网站名称作为页面标题（<title>标签）的一部分，通常我们会结合tdk标签的siteName=true属性来自动附加网站名称，这对于SEO也是很有帮助的。

让您的Logo闪耀登场

Logo是品牌的视觉标志，一张精心设计的Logo能够瞬间吸引访客的注意力。在AnQiCMS中，将您的Logo呈现在网站上同样简单。

与网站名称类似，您需要在后台“设置”中的“全局功能设置”里找到“网站LOGO”这一项。在这里上传您的Logo图片文件，系统会自动存储并准备好供模板调用。

在您的模板文件中，您可以通过以下方式将Logo图片显示出来：

<!-- 直接在图片标签中使用system标签获取Logo地址和网站名称作为alt属性 -->
<a href="{% system with name="BaseUrl" %}">
    <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
</a>

<!-- 或者，先赋值给变量，再构建图片标签 -->
{% system logoUrl with name="SiteLogo" %}
{% system siteName with name="SiteName" %}
<a href="{% system with name="BaseUrl" %}">
    <img src="{{logoUrl}}" alt="{{siteName}}" />
</a>

请注意，在<img>标签中添加alt属性是一个非常重要的**实践。它不仅提供了图片内容的文字描述，对视障用户更为友好，也有助于搜索引擎理解图片内容，从而优化您的网站SEO。将system with name="SiteName"嵌套在alt属性中，可以确保alt文本始终与您的网站名称保持一致，既动态又省心。同时，href="{% system with name="BaseUrl" %}"则确保点击Logo能够正确跳转回网站首页。

活用system标签：获取更多自定义信息

除了网站名称和Logo，system标签还能获取后台“全局功能设置”中所有预设的参数，例如“网站备案号”（SiteIcp）、“版权内容”（SiteCopyright）等。更强大的是，您还可以在后台的“全局功能设置”里自定义额外的参数，并通过system标签来调用它们。

例如，您在后台“自定义设置参数”中添加了一个名为ServiceHotline的参数，并将其值设置为“400-888-8888”。那么在模板中，您可以这样获取并显示它：

{% system servicePhone with name="ServiceHotline" %}
<div>客服热线：{{servicePhone}}</div>

这种灵活性让您可以根据网站的具体需求，轻松管理和展示各种动态信息。

综合运用示例

为了让您对system标签的实际应用有更直观的理解，下面是一个简单的页眉区域代码示例，它结合了网站名称和Logo的显示：

<header class="main-header">
    <div class="header-container">
        <div class="logo-area">
            <a href="{% system with name="BaseUrl" %}" class="site-logo-link">
                <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="site-logo" />
            </a>
        </div>
        <nav class="main-nav">
            <!-- 这里可以放置您的导航菜单，例如使用navList标签 -->
            {% navList navs %}
                <ul>
                    {% for item in navs %}
                        <li><a href="{{ item.Link }}">{{item.Title}}</a></li>
                    {% endfor %}
                </ul>
            {% endnavList %}
        </nav>
        <div class="site-title">
            <h1><a href="{% system with name="BaseUrl" %}">{% system with name="SiteName" %}</a></h1>
        </div>
    </div>
</header>

请记住，以上代码片段主要关注标签的运用，实际的布局和样式还需要结合CSS来进行美化和响应式调整。

通过`