How to get and display the detailed content and Banner image of a single page in the AnQiCMS template?
In Anqi CMS, to retrieve and display the detailed content of a specific single page and its associated Banner image, it mainly involves understanding the management method of single pages and mastering the flexible application of template tags.AnQiCMS provides an intuitive backend management interface and a powerful template engine, making this task simple and efficient.
Deeply understand the single-page in Anqi CMS
The 'Single Page' feature of AnQi CMS is designed for pages with a fixed structure, relatively independent content, and no frequent updates, such as 'About Us', 'Contact Information', 'Service Introduction', and so on.In the background, you can create and edit these single pages under 'Page Resources'.Banner image.
It is worth noting that AnQiCMS also allows you to specify a unique template file for a single page. By default, the content of a single page will usepage/detail.htmlThe template is rendered. But if you need a specific single page (such as the "About Us" page with ID 5) to have a completely different layout, you can createpage/detail-5.htmlFor example, even in the "Single Page Template" field in the backgroundabout_us.htmlThen place the file intemplate/您的模板目录/page/Under the path. This flexibility allows each single page to have a highly customized display effect.
Get the detailed content of a single page.
In the template, the 'core tool' to get the content of a single page ispageDetailthe tag. This tag can help you pull various information from the specified single page.
To get the content of the single page you are currently visiting, you do not need to specify any ID or alias,pageDetailTags will be automatically recognized:
{# 假设您正在访问ID为1的“关于我们”页面 #}
{# 获取单页面标题 #}
<h1>{% pageDetail with name="Title" %}</h1>
{# 获取单页面描述 #}
<p>{% pageDetail with name="Description" %}</p>
{# 获取单页面内容，需要注意安全输出 #}
<div class="page-content">
{% pageDetail pageContent with name="Content" %}
{{ pageContent|safe }}
</div>
Key points explanation:
with name="字段名称"This is the parameter that specifies which specific field content you want to obtain. For example,"Title"Get the title,"Description"Get the description,"Content"Get the main content.pageContent with name="Content": We will assign the single-page content we obtain to a variable namedpageContent. The benefit of doing this is that you can{% pageDetail ... %}Outside the tag, use this variable multiple times or in a more flexible way.{{ pageContent|safe }}This point is very important!The "content" field on a single page typically contains HTML code generated by a rich text editor.|safeFilter. If you forget to use it, the HTML tags on the page will be displayed directly, causing style confusion.
If you need to retrievenot the current pagespecific single page content, you can achieve this by specifying its ID or a custom URL alias(token)
{# 获取ID为2的单页面的标题 #}
<h2>{% pageDetail with name="Title" id="2" %}</h2>
{# 获取自定义URL别名为“contact-us”的单页面内容 #}
<div class="contact-info">
{% pageDetail contactPageContent with name="Content" token="contact-us" %}
{{ contactPageContent|safe }}
</div>
Display the Banner image of a single page
The single page of AnQi CMS supports uploading multiple Banner images. These images can also be retrieved through tags and displayed in a loop.pageDetailTags can be used to retrieve these images and display them in a loop.
pageDetailThere is a tag namedImagesThe field, it will return an array containing all the uploaded Banner image URLs.
{# 假设您正在访问的单页面上传了多张Banner图 #}
<div class="page-banner-slider">
{% pageDetail pageBanners with name="Images" %}
{% if pageBanners %} {# 检查是否有Banner图上传 #}
{% for imageUrl in pageBanners %}
<div class="banner-item">
<img src="{{ imageUrl }}" alt="单页面Banner" />
</div>
{% endfor %}
{% else %}
{# 如果没有上传Banner图，可以显示一个默认图片或者不显示 #}
<img src="/static/images/default_banner.jpg" alt="默认Banner" />
{% endif %}
</div>
Tips for getting the first Banner image:
In some designs, you may only need to display the first Banner image uploaded on a single page. In this case, you can directly access the first element of the array:
<div class="page-header-banner" style="background-image: url('{% pageDetail firstBanner with name="Images" %}{% if firstBanner %}{{ firstBanner[0] }}{% endif %}');">
{# 这里可以放置标题等内容 #}
<h1>{% pageDetail with name="Title" %}</h1>
</div>
In this example, we first attempt to retrieveImagesfield and assign it tofirstBannervariable. Then, by{% if firstBanner %}{{ firstBanner[0] }}{% endif %}to ensure that it outputs the URL of the first elementfirstBannerwhen the array exists and is not empty.
Combine an example: Build a complete single-page display template
Assuming we have a single-page "About Us", with ID 5, in HTML format, and multiple Banner images uploaded. Here is a simplified template snippet showing how to combine these tags:
`twig {% extends ‘base.html’ %} {# Inherit base layout template #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}
{% block content %}
<div class="container">
{# 面包屑导航，让用户了解当前位置 #}
{% breadcrumb crumbs %}
<ul class="breadcrumb">
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
{# 单页面Banner区域 #}
<div class="page-banner-area">
{% pageDetail pageBanners with name="Images" id="5" %} {# 获取ID为5的单页面Banner图 #}
{% if pageBanners %}
<div class="owl-carousel owl-theme"> {# 假设您使用Owl Carousel来展示轮播图 #}
{% for imageUrl in pageBanners %}
<div class="item">
<img src="{{ imageUrl }}" alt="关于我们Banner" class="img-fluid"/>
</div>
{% endfor %}
</div>
{% else %}
<div class="default-banner">
<img src="/public/static/images/default_about_banner.jpg" alt="默认关于我们Banner" class="img-fluid"/>
</div>