如何为某个特定的单页面(如“关于我们”)创建和应用独立模板?

作为一位深谙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会根据您填写的路径,将此自定义模板与“关于我们”单页面关联起来。

第四步:预览与优化

完成上述步骤后,您可以通过浏览器访问“关于我们”页面