在网站运营中,我们经常需要展示一些独立的、内容相对固定不变的页面,例如“关于我们”、“联系方式”或者某些政策说明等。在安企CMS中,这些被称为“单页面”。有效管理和展示这些单页面,不仅能让网站结构更清晰,也能提升用户体验。
接下来,我们将一起探讨如何在网站上灵活地展示所有或部分单页面列表。
一、理解单页面的创建与管理(后台操作)
在开始前端展示之前,首先要确保已经在安企CMS的后台创建并完善了相应的单页面内容。
- 进入页面管理: 登录安企CMS后台,您可以在左侧导航栏找到“页面资源”下的“页面管理”选项。
- 创建或编辑单页面: 在这里,您可以添加新的单页面,也可以编辑已有的单页面。每个单页面都包含以下核心信息:
- 页面名称: 这是单页面的标题,也会直接显示在前端。
- 自定义URL: 为了SEO友好和链接美观,建议为每个单页面设置一个简洁有意义的自定义URL(例如,
about-us、contact)。当您的伪静态规则中包含{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的多站点管理功能,并且希望调用其他站点的数据,可以在
pageList或pageDetail标签中添加siteId参数来指定(例如{% pageList pages with siteId="2" %})。
通过上述方法,您可以灵活地在安企CMS网站上展示所有或特定部分的单页面列表,满足不同场景下的展示需求。
常见问题(FAQ)
如何调整单页面在列表中的显示顺序? 您可以在安企CMS后台的“页面资源”->“页面管理”中,编辑每个单页面,找到“显示顺序”字段。通过设置不同的数字来控制排序,数字越小,该单页面在列表中就会越靠前显示。
我的单页面内容包含HTML代码,但前端显示时被转义了怎么办? 当您在前端模板中输出单页面内容(例如
{{ item.Content }}或{% pageDetail with name="Content" %})时,如果内容中包含HTML标签,为了安全考虑,系统默认会对其进行转义。如果您确认这些HTML内容是安全的,并希望它们正常解析显示,请在输出时添加|safe过滤器,例如:{{ item.Content|safe }}。我想为某个单页面设计完全不同的布局,安企CMS能实现吗? 当然可以。在后台编辑该单页面时,有一个“单页面模板”字段。您可以在这里填写一个自定义的模板文件路径(例如
about_us_custom.html),并确保这个文件存在于您的模板page目录下(例如template/default/page/about_us_custom.html)。这样