作为一位深谙AnQiCMS运作之道的网站运营人员,我理解您希望为特定单页面(例如“关于我们”)创建和应用独立模板的需求。这不仅能让页面内容展示更具个性化,也能有效满足特定的设计和功能要求。AnQiCMS提供了灵活的模板机制,使得这一过程直观而高效。
为安企CMS特定单页面创建与应用独立模板的详细指南
AnQiCMS以其高度可定制性和灵活性,使得网站运营人员能够轻松满足多样化的内容展示需求。对于“关于我们”这类具有独特风格或结构要求的单页面,创建和应用独立模板是提升用户体验和品牌形象的有效方式。本指南将详细阐述如何在AnQiCMS中为特定单页面创建并应用自定义模板。
第一步:创建自定义模板文件
在AnQiCMS中,所有的模板文件都存放在网站根目录下的 /template 文件夹中。首先,您需要进入当前使用的模板主题目录。在该主题目录下,根据AnQiCMS的约定,单页面的自定义模板通常存放在 page/ 子目录中。
您可以在 template/[您的主题目录]/page/ 路径下创建一个新的HTML文件,例如,如果您想为“关于我们”页面创建独立模板,可以将其命名为 about.html。因此,完整的文件路径可能是 template/[您的主题目录]/page/about.html。
这个新的HTML文件将作为您“关于我们”页面的专属模板。在文件中,您可以根据设计需求,引入基础布局(通过{% extends 'base.html' %}或{% include 'partial/header.html' %}等方式),并定义内容区域的结构。AnQiCMS规定,模板用到的样式、JS脚本、图片等静态资源,应单独存放在 /public/static/ 目录,并在模板中正确引用。
第二步:编写模板内容
在 page/about.html 文件中,您可以开始编写具体的页面结构和动态内容。AnQiCMS支持Django模板引擎语法,让您能够轻松地插入页面标题、内容、图片以及其他系统信息。
例如,要获取“关于我们”页面的标题、描述和主要内容,您可以使用pageDetail标签。同时,您也可以调用全局系统信息、联系方式或导航列表等。
这里是一个示例模板代码片段:
{% extends 'base.html' %} {# 继承您的基础模板,确保页面包含统一的头部、底部等元素 #}
{% block title %}
{# 获取页面的SEO标题,并附加网站名称,提升搜索引擎友好性 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取页面的SEO关键词 #}
<meta name="keywords" content="{% tdk with name="Keywords" %}">
{# 获取页面的SEO描述 #}
<meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}
{% block content %}
<div class="about-us-container">
{# 使用pageDetail标签获取当前单页面的标题 #}
{%- pageDetail pageTitle with name="Title" %}
<h1>{{ pageTitle }}</h1>
{# 使用pageDetail标签获取当前单页面的主要内容 #}
{%- pageDetail pageContent with name="Content" %}
<div class="about-content">
{# 输出内容时,使用safe过滤器防止HTML标签被转义,确保页面样式正确渲染 #}
{{ pageContent|safe }}
</div>
{# 示例:集成系统预设的联系方式,避免在模板中硬编码 #}
<div class="contact-info">
<h2>联系我们</h2>
<p>电话: {% contact with name="Cellphone" %}</p>
<p>邮箱: {% contact with name="Email" %}</p>
<p>地址: {% contact with name="Address" %}</p>
</div>
</div>
{% endblock %}
在这个示例中,pageDetail 标签用于动态获取当前单页面的标题和内容。tdk 标签用于设置页面的SEO标题、关键词和描述,而 contact 标签则用于显示预设的联系方式。请注意,当输出包含HTML标签的内容(如 pageContent)时,务必使用 |safe 过滤器,以确保HTML内容能够正确渲染而非被转义。
第三步:在后台应用自定义模板
模板文件创建并编写完成后,下一步是在AnQiCMS后台将此模板应用到您的“关于我们”单页面。
登录AnQiCMS管理后台,导航至 页面资源 -> 页面管理。
在这里,您可以找到或新建您的“关于我们”页面。点击编辑进入页面详情页。
在页面编辑表单中,向下滚动找到名为 “单页面模板” 的字段。在这个输入框中,填入您刚才创建的自定义模板文件的相对路径,例如 page/about.html。AnQiCMS的系统会根据这个路径寻找并渲染您的自定义模板。
确认所有信息无误后,点击保存按钮。AnQiCMS会根据您填写的路径,将此自定义模板与“关于我们”单页面关联起来。
第四步:预览与优化
完成上述步骤后,您可以通过浏览器访问“关于我们”页面