如何在模板中显示网站的名称和Logo？

网站的名称和Logo，如同一个人的姓名和面容，是其不可或缺的标志。它们不仅是品牌形象的核心，更是提升网站专业度、增强用户信任感和方便记忆的关键元素。在AnQiCMS中，将这些重要的标识元素优雅地呈现在网站模板中，比您想象的要简单和灵活。

理解AnQiCMS中的网站基本设置

在AnQiCMS中，网站的名称和Logo等基础信息都集中在后台的“全局功能设置”中。 您可以通过登录后台，导航到 后台设置 -> 全局设置 页面进行配置。在这里，您可以找到“网站名称”和“网站LOGO”等选项。 “网站名称”通常是您的公司名称或品牌名，它将作为网站标题的重要组成部分。 “网站LOGO”则允许您上传用于网站头部的图片标识。 这些在后台完成的设置，是前端模板能够调用和显示这些信息的基石。一旦这些信息被保存，AnQiCMS系统就会将它们存储起来，供模板随时使用。

在模板中显示网站名称

要在您网站的模板中显示后台设置的网站名称，AnQiCMS提供了一个非常直观且强大的标签——system标签。 system标签专门用于获取各类系统配置信息，包括我们需要的网站名称。

您可以在模板文件的任何位置使用以下代码来调用网站名称：

{% system with name="SiteName" %}

这段代码会直接输出您在后台“全局功能设置”中填写的网站名称。

例如，如果您想在网站的 <title> 标签中显示网站名称，结合 tdk 标签，您可以这样写：

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

这里，{% tdk with name="Title" siteName=true %} 会智能地将当前页面的标题与您的网站名称（通过siteName=true参数）组合显示，例如“文章标题 - 您的网站名称”，这对于SEO来说是一个非常好的实践。

如果您只是想在页面内容中显示网站名称，例如在页脚版权信息旁边，可以这样：

<div>&copy; {{ "now"|date:"2006" }} {% system with name="SiteName" %}. All Rights Reserved.</div>

通过这种方式，网站名称能够动态地展现在您希望的任何地方。

在模板中显示网站Logo

与网站名称类似，显示网站Logo也通过system标签实现。后台上传的Logo图片地址可以通过SiteLogo这个name参数获取。

要在模板中插入网站Logo，您可以这样使用：

<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

这段代码会生成一个<img>标签，src属性指向您上传的Logo图片地址，而alt属性则巧妙地使用了我们之前获取的“网站名称”。这样做不仅保证了图片在加载失败时有文字替代，更重要的是，它为搜索引擎提供了关于这张图片内容的明确信息，是SEO优化的一个重要细节。

您通常会将这段代码放置在网站的头部（header区域），使其在每个页面上都能清晰地展现品牌标识。

**实践与SEO考量

1. Logo的Alt属性：始终为Logo图片添加alt属性，并使用网站名称作为其值。这有助于视障用户理解图片内容，也让搜索引擎更好地识别您的品牌。
2. 响应式设计：确保您的Logo图片在不同设备上都能良好显示。AnQiCMS在后台的“内容设置”中提供了图片自动压缩和WebP格式转换等功能，这有助于优化Logo图片的文件大小和加载速度，从而提升用户体验。在CSS中配合使用响应式规则，如max-width: 100%; height: auto;，能让Logo自适应布局。
3. 标题标签优化：正如前面提到的，将网站名称集成到<title>标签中是SEO的重要一环。通过{% tdk with name="Title" siteName=true %}这样的标签，您可以轻松实现这一目标。
4. 一致性：确保网站名称和Logo在整个网站上保持一致，无论是在页眉、页脚还是其他宣传材料上。品牌的一致性有助于建立强大的品牌形象。

通过AnQiCMS提供的便捷标签和灵活的设置，您可以轻松地将网站的名称和Logo集成到您的模板中，为用户提供一个专业、统一且优化的浏览体验。

常见问题解答 (FAQ)

Q1: 我在后台更新了网站Logo，为什么前台页面没有立即变化？

A1: 这可能是由于浏览器缓存或AnQiCMS的系统缓存造成的。您可以尝试清除浏览器缓存，或者在AnQiCMS后台点击“更新缓存”功能（通常在后台首页或系统设置下方）来刷新网站内容。

Q2: 我可以为PC端和移动端设置不同的Logo吗？

A2: AnQiCMS的“全局功能设置”中默认只提供一个网站Logo上传入口。如果您需要针对PC和移动端显示不同的Logo，可以在模板中通过判断当前设备类型，然后通过自定义字段或不同的图片路径来实现。例如，您可以上传两个Logo，一个命名为logo_pc.png，另一个为logo_mobile.png，然后在模板中根据设备加载不同的图片。

Q3: 网站名称在网页标题中显示时，我能控制它和页面标题之间的分隔符吗？

A3: 当然可以。在使用tdk标签显示标题时，您可以添加sep参数来指定分隔符。例如，{% tdk with name="Title" siteName=true sep=" | " %} 会将页面标题和网站名称用“ | ”分隔开。