在网站运营中,我们经常需要展示一些独立的、内容相对固定不变的页面,例如“关于我们”、“联系方式”或者某些政策说明等。在安企CMS中,这些被称为“单页面”。有效管理和展示这些单页面,不仅能让网站结构更清晰,也能提升用户体验。

接下来,我们将一起探讨如何在网站上灵活地展示所有或部分单页面列表。

一、理解单页面的创建与管理(后台操作)

在开始前端展示之前,首先要确保已经在安企CMS的后台创建并完善了相应的单页面内容。

  1. 进入页面管理: 登录安企CMS后台,您可以在左侧导航栏找到“页面资源”下的“页面管理”选项。
  2. 创建或编辑单页面: 在这里,您可以添加新的单页面,也可以编辑已有的单页面。每个单页面都包含以下核心信息:
    • 页面名称: 这是单页面的标题,也会直接显示在前端。
    • 自定义URL: 为了SEO友好和链接美观,建议为每个单页面设置一个简洁有意义的自定义URL(例如,about-uscontact)。当您的伪静态规则中包含{filename}字段时,这个自定义URL就会生效。
    • 单页面内容: 这是页面的主体内容,您可以利用富文本编辑器进行编辑,支持图文混排。
    • SEO信息(标题、关键词、描述): 针对每个单页面,您可以单独设置其SEO标题、关键词和描述,以帮助搜索引擎更好地理解和收录页面内容。
    • 显示顺序: 通过调整显示顺序的数字,可以控制单页面在列表中的默认排列。数字越小,越靠前。
    • 单页面模板: 这是一个非常强大的功能。默认情况下,单页面会使用page/detail.html这个通用模板。但如果您希望某个单页面拥有独特的设计,可以在后台指定一个自定义模板文件(例如,为“关于我们”页面指定about.html,只要该文件存在于您的模板page目录下)。

完成单页面的创建和内容填充后,我们就可以着手在网站前端展示它们了。

二、在网站上展示所有单页面列表

如果您希望在一个区域(比如页脚导航或者侧边栏)展示所有已发布的单页面,安企CMS提供了简洁的模板标签pageList来实现。

pageList标签会获取您所有已创建的单页面数据。在模板文件中,您可以这样使用它:

<ul>
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endpageList %}
</ul>

代码解读:

  • {% pageList pages %}:这是核心标签,它会从数据库中获取所有单页面数据,并将这些数据赋值给名为pages的变量。
  • {% for item in pages %}:我们使用一个for循环来遍历pages变量中的每一个单页面,每个单页面的数据都会在循环中通过item变量访问。
  • {{ item.Link }}:这会输出当前单页面的访问链接。
  • {{ item.Title }}:这会输出当前单页面的标题。

通过这个简单的代码片段,您的网站就能动态地展示所有单页面的列表。

三、灵活展示部分单页面列表

有时候,我们并不需要展示所有的单页面,或者希望对某些单页面进行特殊的处理。安企CMS提供了多种灵活的方式来实现这一目的。

1. 通过模板逻辑进行筛选和排除

您可以在for循环中使用if条件判断来筛选或排除特定的单页面。例如,如果您想排除ID为1的单页面:

<ul>
{% pageList pages %}
    {% for item in pages %}
    {% if item.Id != 1 %} {# 假设ID为1的单页面不想展示 #}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

您还可以根据标题或其他字段进行筛选:

<ul>
{% pageList pages %}
    {% for item in pages %}
    {# 仅展示标题包含“关于”的单页面 #}
    {% if item.Title|contain:"关于" %} 
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}

这里我们使用了contain过滤器(参考filter-contain.md),它能判断字符串是否包含特定关键词。

2. 展示特定单页面的详情内容

如果您想在网站的某个特定区域直接展示某个单页面的内容,而不是列表链接,可以使用pageDetail标签。这个标签允许您通过ID或自定义URL别名精确获取单个单页面的详细信息。

例如,在首页直接展示“关于我们”页面的简介:

<div class="about-us-summary">
    <h2>{% pageDetail with name="Title" token="about-us" %}</h2>
    <p>{% pageDetail with name="Description" token="about-us" %}</p>
    <a href="{% pageDetail with name="Link" token="about-us" %}">了解更多</a>
</div>

代码解读:

  • {% pageDetail with name="Title" token="about-us" %}:通过自定义URL别名about-us获取该单页面的标题。
  • {% pageDetail with name="Description" token="about-us" %}:获取该单页面的描述。
  • {{ item.Content|safe }}:如果需要显示完整的内容(可能包含HTML),请务必使用|safe过滤器,以防止HTML内容被转义(参考filter-safe.md)。

3. 利用后台的“单页面模板”功能实现特定设计

如前文所述,在后台编辑单页面时,您可以为它指定一个独立的模板文件。这意味着,当用户访问这个单页面时,系统会自动加载您指定的模板,从而实现完全个性化的设计。

例如,为ID为5的“联系我们”页面指定模板文件contact.html,那么您只需要确保template/你的模板目录/page/contact.html文件存在,并且在后台的“页面管理”中,该单页面的“单页面模板”字段填写为contact.html即可。

四、重要提示与**实践

  • 模板文件位置: 默认的单页面详情模板是template/你的模板目录/page/detail.html。如果您自定义了单页面模板(例如contact.html),它应该放在template/你的模板目录/page/目录下。
  • 伪静态规则: 确保您的网站伪静态规则包含了单页面的规则,通常是page===/{filename}.html或类似的形式,这样才能生成友好的URL(参考help-plugin-rewrite.md)。
  • SEO优化: 充分利用后台单页面的SEO标题、关键词和描述字段,为每个单页面做好独立的SEO优化。
  • 显示顺序: 在后台的“页面管理”中,通过调整“显示顺序”字段,可以方便地控制单页面在列表中的默认排序。
  • 多站点支持: 如果您使用了安企CMS的多站点管理功能,并且希望调用其他站点的数据,可以在pageListpageDetail标签中添加siteId参数来指定(例如{% pageList pages with siteId="2" %})。

通过上述方法,您可以灵活地在安企CMS网站上展示所有或特定部分的单页面列表,满足不同场景下的展示需求。


常见问题(FAQ)

  1. 如何调整单页面在列表中的显示顺序? 您可以在安企CMS后台的“页面资源”->“页面管理”中,编辑每个单页面,找到“显示顺序”字段。通过设置不同的数字来控制排序,数字越小,该单页面在列表中就会越靠前显示。

  2. 我的单页面内容包含HTML代码,但前端显示时被转义了怎么办? 当您在前端模板中输出单页面内容(例如{{ item.Content }}{% pageDetail with name="Content" %})时,如果内容中包含HTML标签,为了安全考虑,系统默认会对其进行转义。如果您确认这些HTML内容是安全的,并希望它们正常解析显示,请在输出时添加|safe过滤器,例如:{{ item.Content|safe }}

  3. 我想为某个单页面设计完全不同的布局,安企CMS能实现吗? 当然可以。在后台编辑该单页面时,有一个“单页面模板”字段。您可以在这里填写一个自定义的模板文件路径(例如about_us_custom.html),并确保这个文件存在于您的模板page目录下(例如template/default/page/about_us_custom.html)。这样