如何在网站首页展示系统配置的名称和Logo？

网站的名称和Logo是品牌形象的基石，它们不仅能够快速传达网站的身份，还能增强用户的信任感和识别度。在AnQiCMS中，将这些重要的品牌元素呈现在网站首页是一项直接且灵活的任务。AnQiCMS提供了直观的后台设置和强大的模板标签功能，让这项工作变得非常简单。

后台配置：统一管理品牌信息

首先，所有希望在网站前端展示的信息，都需要在AnQiCMS的后台进行统一管理。这样可以确保品牌信息的一致性，并且方便运营人员随时调整。

要设置网站的名称和Logo，您可以：

  1. 进入AnQiCMS的后台管理界面：这是所有网站配置的起点。
  2. 导航至『后台设置』：在左侧的菜单栏中，找到并点击“后台设置”选项。
  3. 选择『全局功能设置』：在“后台设置”的子菜单中，点击进入“全局功能设置”。这里汇集了网站的基础信息配置。

在“全局功能设置”页面，您会看到几个关键的配置项：

  • 网站名称：这是一个文本输入框，用于填写您的网站或品牌的名称。这个名称通常会作为网站标题的后缀，也会在很多地方作为文本标识出现。请在此处填写您希望用户在首页看到的网站名称。
  • 网站LOGO：此处提供了一个图片上传区域。您可以点击上传按钮，将您的品牌Logo图片上传到服务器。AnQiCMS支持多种图片格式，并且上传后会自动进行管理。上传完成后，Logo图片就会与您的网站关联起来。

完成这些配置后，请记得点击保存，使您的修改生效。AnQiCMS的后台设计让这些关键信息的管理变得非常便捷，所有在后台的更新都会迅速反映到网站前端。

如果您有一些独特的品牌标语或辅助信息也想在首页展示，可以在“全局功能设置”页面的『自定义设置参数』中添加。您可以为这些自定义参数命名（例如 BrandSlogan）并赋予它们相应的值（例如“让内容管理更简单”），稍后就可以在模板中灵活调用。

模板调用：让品牌信息呈现在首页

后台信息配置妥当后，下一步就是将这些数据通过AnQiCMS的模板标签，准确地呈现在网站首页上。AnQiCMS的模板系统采用了类似Django模板引擎的语法，使用双花括号 {{变量}} 来输出变量，使用单花括号和百分号 {% 标签 %} 来调用功能标签。

AnQiCMS提供了一个名为 system 的专用标签，用于获取所有在『全局功能设置』中配置的信息。

展示网站名称

要将配置的网站名称显示在首页上，您可以这样使用 system 标签：

{% system with name="SiteName" %}

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

为了更好地组织代码，并允许在模板中多次引用同一数据，您可以将获取到的网站名称赋值给一个变量：

{% system siteName with name="SiteName" %}
<!-- 在这里，您可以多次使用 {{siteName}} 来显示网站名称 -->
<h1>欢迎来到 {{siteName}}</h1>
<p>&copy; {{siteName}} 版权所有</p>

这段代码首先通过 {% system siteName with name="SiteName" %} 将后台配置的网站名称存储到名为 siteName 的变量中，然后您就可以在页面的不同位置通过 {{siteName}} 来引用它。

展示网站Logo

与网站名称类似，展示网站Logo也通过 system 标签实现。您需要获取Logo图片的URL，并将其作为 <img> 标签的 src 属性值。

{% system with name="SiteLogo" %}

同样，我们建议将其赋值给一个变量以便管理：

{% system siteLogo with name="SiteLogo" %}
{% system siteName with name="SiteName" %}

<a href="/">
    <img src="{{siteLogo}}" alt="{{siteName}} Logo" class="website-logo">
</a>

在这里，{{siteLogo}} 会输出Logo图片的完整URL。值得注意的是，我们还同时获取了 siteName，并将其用作 <img> 标签的 alt 属性值。这是一个良好的实践，不仅有助于SEO优化，还能在图片无法加载时提供有意义的文本替代，提升用户体验。class="website-logo" 这样的样式类可以方便您通过CSS控制Logo的显示效果。

自定义参数的调用

如果您在后台的“全局功能设置”中添加了自定义参数（例如 BrandSlogan），同样可以使用 system 标签来调用：

{% system brandSlogan with name="BrandSlogan" %}
<p>{{brandSlogan}}</p>

这将把您自定义的标语内容呈现在页面上。

部署与文件位置

这些模板代码需要放置在您的网站模板文件中。通常情况下，Logo和网站名称会出现在网站的公共头部区域。在AnQiCMS中，模板文件统一存放在 /template 目录下，每个主题有自己的独立文件夹。

您需要找到当前使用的模板文件夹，然后编辑其中的 index.html（网站首页模板）或者公共的头部文件（例如 partial/header.html），将上述代码片段插入到合适的位置。如果您的网站使用了公共的 bash.html 或 partial/header.html 来构建页面头部，那么将这些标签放置在这些公共文件中，可以确保网站所有页面都能统一显示名称和Logo，而无需在每个页面中重复编写。

总结

通过AnQiCMS简洁直观的后台配置和强大的模板标签功能，您可以轻松地将网站的品牌名称和Logo等核心标识呈现在首页上，并保持所有页面的一致性。这种设计不仅提升了内容管理的效率，也为网站的品牌展示提供了灵活可靠的支撑。

常见问题 (FAQ)

  1. 为什么我在后台修改了网站名称或Logo，但首页没有立即更新？ 这可能是由于系统缓存导致的。AnQiCMS为了提高网站访问速度，会启用缓存机制。当您在后台修改了配置后，可能需要手动清除系统缓存才能让前端页面立即显示最新内容。您可以在后台管理界面的左侧菜单中找到“更新缓存”功能，点击执行即可。
  2. 除了网站名称和Logo，我还能在首页展示其他自定义的文本或图片吗？ 当然可以。在AnQiCMS后台的“全局功能设置”页面，您可以利用『自定义设置参数』来添加任何您希望展示在首页或其他页面的文本或图片链接。为每个自定义参数设置一个唯一的“参数名”（例如ServiceHotline），并在模板中通过 {% system with name="ServiceHotline" %} 的方式进行调用。
  3. 如果我的Logo图片文件过大，会影响网站加载速度吗？AnQiCMS有处理方案吗？ 图片大小确实会影响网站加载速度。AnQiCMS在『后台设置』->『内容设置』中提供了多项图片优化功能。您可以选择“是否启动Webp图片格式”来自动将上传的图片转换为更小的WebP格式，或者开启“是否自动压缩大图”并设置指定的宽度，系统会在图片上传时自动进行压缩，以优化网站性能。