How to retrieve and display detailed content of a specific independent page?

Our Aiqi CMS offers great flexibility in content management, especially for pages that need to display independent, static information such as 'About Us', 'Contact Information', or 'Terms of Service'.These are called "independent pages" or "single pages", their content is usually relatively fixed, but they also need to be independently displayed and have search engine-friendly features.How can we efficiently retrieve and display the detailed content on these specific independent pages in AnQi CMS?This usually involves creating pages in the background and calling their content in the front-end template, these are the two main steps.

Create and manage independent pages

First, we need to create and edit these independent pages in the Anqi CMS backend system.After logging in, you can usually find the 'Page Management' feature under the menus related to 'Page Resources' or 'Content Management'.Here, you can add, modify, and delete independent pages like managing articles.

When adding or editing a standalone page, there are several key pieces of information that you need to pay attention to:

• Page NameThis is the main title of the page, also the name displayed to the user on the front end.
• Single page contentThis is the main content of the page, you can use a rich text editor or Markdown editor to enrich the content, including text, images, videos, and more.
• Custom URL: To better optimize search engine optimization (SEO) and provide a clear page path, you can set a concise and clear custom URL alias for independent pages, such as setting the URL of the "About Us" page to/about.html.
• Single page templateThis is a very powerful feature. Anqi CMS will apply a universal template to all independent pages by default (usuallypage/detail.html）。But if you want a specific page to have a unique layout or style, such as the “Contact Us” page that needs to include a map and a form, you can specify a custom template, such aspage/contact.html. The system will first look for the template file you specified, and if it does not exist, it will fall back to the default template.
• SEO-related fieldsTo improve the search ranking of the page, you can fill in the SEO title, keywords, and description of the page in detail.
• Visual elements: You can also upload exclusive Banner images and thumbnails for independent pages to enhance the visual appeal of the page.

With these detailed settings, your independent page is equipped with rich content and flexible display potential in the background.

Display independent page content in the front-end template.

After completing the backend settings, the next step is to display the detailed content of these independent pages in the website's frontend template.AnQi CMS provides concise and powerful template tags, making it very direct to call independent page content.

UsepageDetailRetrieve the details of a single page tag

pageDetailThe tag is specifically used to obtain detailed content of a single independent page.This tag is very flexible, it can retrieve information about the independent page currently being accessed, and can also retrieve the content of any independent page by specifying an ID or a custom URL alias.

If you want to display the title and main content of the current independent page in a page template, you can write the code like this:

<h1>{% pageDetail with name="Title" %}</h1>
<div class="page-content">
    {% pageDetail pageContent with name="Content" render=true %}
    {{ pageContent|safe }}
</div>

Herename="Title"It will get the title of the page, whereasname="Content"it will get the main content of the page. It should be noted that if the content of your independent page is written in Markdown format, you need toContentField plusrender=trueParameters so that the system can render it as HTML. At the same time, in order to ensure that the HTML content is displayed correctly rather than being escaped, we usually use|safefilter.

Sometimes, you may need to call information from a specific independent page at a fixed location on a website (such as the footer), such as displaying part of the 'About Us' page or its link. In this case, you can accurately retrieve it by specifying the page ID or a custom URL alias.

<p>
    了解更多关于我们的信息：
    <a href="{% pageDetail with name="Link" id="5" %}">{% pageDetail with name="Title" id="5" %}</a>
</p>

This code will retrieve the link and title of a standalone page with ID 5 and display it. You can also usetokenparameters, for exampletoken="about-us"assuming you have set up the "About Us" page in the backgroundabout-usAs a custom URL.

Display images and groups

Independent pages often require images to enrich the display. Anqi CMS provides the 'thumbnail (Logo)' and 'slideshow (Images)' fields for independent pages, and you can easily call them:

If you have set a single cover image for the page, you can useLogoField:

<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}">

If your page contains multiple images as slides or a gallery display, you can useImagesfield. Due toImagesIt returns an array of image addresses, you need to useforloop to iterate and display:

<div class="page-gallery">
    {% pageDetail pageImages with name="Images" %}
    {% for img in pageImages %}
        <img src="{{ img }}" alt="页面图片">
    {% endfor %}
</div>

Apply Custom Template

As mentioned earlier, by setting the 'single-page template' in the background, you can apply a dedicated template file to a specific standalone page. For example, if you create a page namedcontact.htmlthe template file and place it in the theme you are currently usingtemplate/your_theme_name/page/directory, then in the background set the 'Contact Us' page's 'Single Page Template' field tocontact.htmlThen when the user visits the "Contact Us" page, the system will automatically loadcontact.htmlto render content, thus realizing personalized page layout and functions

UsepageListtags list multiple independent pages

In addition to displaying the detailed content of individual independent pages, sometimes you may need to list all the independent pages in one place, such as in the footer navigation or sidebar of a website. At this time, you can usepageListTags:

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

This code will iterate over all published standalone pages and display their titles and links, which is very suitable for building static page navigation.

By using the above method, you can flexibly create, manage, and display detailed content of various independent pages in Anqicms, whether it is a simple text page, or a page containing complex text and images, even a custom layout page, all can be easily realized through the functions and template tags provided by Anqicms.

Frequently Asked Questions (FAQ)

Q1: How to make my 'Contact Us' page have a unique layout instead of using the default page template?A1: You can edit the "Contact Us" standalone page in the background, and fill in a custom template filename in the "Single Page Template" field (for example, `contact_us.html')}]