In website operation, we often need to create some relatively fixed and information-rich independent pages, such as "About Us", "Contact Us", "Terms of Service", or "Privacy Policy" and so on.These pages are usually called single-page content, they are an indispensable part of the website, used to provide core information to visitors, build trust, or guide operations.

AnQiCMS provides an intuitive and flexible solution for managing and displaying this type of single-page content.It treats a single page as a special content type, allowing us to easily create, edit, and publish it like articles or products, and realize diverse display effects through templates.

One, AnQiCMS Overview of Single Page Content Management

AnQiCMS manages the single-page content in the background "Page Resources" module, where you can find the "Page Management" feature.After opening, you will see a clear list showing all the single pages created, as well as their basic information.This is the starting point for creating, editing, and deleting single-page content, and the entire process is very smooth and convenient.

The main difference between a single-page and a regular article or product is that they usually do not have a category concept, or they themselves represent a kind of independent "category".This makes the management logic of a single page simpler, we do not need to set up a complex classification structure for them.

Two, Creating and Editing Single Page Content: Field Details and Practice

When you click on "Add single page" or edit an existing page in "Page Management", you will see a series of intuitive fields that together make up the complete information of a single page:

  1. Page name:This is the most direct identifier for a single page, such as "About Us." It is displayed in the background management list and is also an important source for the title or navigation name on the front-end page.
  2. Custom URL:To facilitate user memorization and search engine optimization (SEO), AnQiCMS allows you to set a friendly, static URL for a single page. For example, set the URL of the "About Us" page to/about.html. The system will automatically generate a pinyin URL based on the page name, but you can also manually modify it to ensure its uniqueness.A clear and concise URL helps improve the accessibility and SEO performance of a page.
  3. Single page content:This is the core of a single-page, a feature-rich rich text editor that allows you to easily edit text, insert images, embed videos, set formats, and more.Even, AnQiCMS also supports Markdown editors, which means you can conveniently use Markdown syntax to write content and beautifully render it on the front end.For a static information page, this is where you display all the details.
  4. SEO title, keywords and description:These fields are crucial for search engine optimization.
    • SEO titleUsed to inform search engines of the core topic of the page, which is often displayed in search results.
    • KeywordsThe words you hope to search for on this page, separated by English commas.
    • Single page introductionProvide a summary description of the page, which is often used by search engines as a summary of search results. Filling in this information can effectively improve the visibility of a single page in search engines.
  5. Banner image and thumbnail:These are the visual elements of the page.
    • Banner imageApplicable to situations where a large background image or carousel needs to be displayed at the top of the page, adding visual appeal.
    • ThumbnailIt may be used as a preview image on some list pages or when shared on social media.
  6. Display order:When you need to display multiple single pages in a specific order on the front-end (such as in the footer navigation), this field can help you adjust their order, with smaller numbers appearing earlier.
  7. Single page template: This is a powerful and flexible feature of AnQiCMS on single-page display. By default, all single pages will usepage/detail.htmlThis template file is displayed. However, if a single page (such as "Contact Us") requires a unique layout or style, you can:
    • Create a folder named under your template directory.page/contact.html(Assuming your custom URL alias iscontactorpage/{单页ID}.htmltemplate file.
    • Then edit the single page in the background, fill in the "Single Page Template" field withcontact.html. This page will automatically load and use the one you specifiedcontact.htmltemplate instead of the default onepage/detail.htmlThis provides designers and developers with great freedom, allowing for customized appearances for each important single-page design.

3. Display Strategy of Single-Page Content and Template Call

In the AnQiCMS front-end template, you can call and display these single-page contents through specific tags. This mainly depends onpageDetailandpageListtwo tags.

  1. Display detailed content of a single page (pageDetail):This is the most commonly used method, usually forpage/detail.htmlor in a custom single-page template. For example, to display the title and content of the "About Us" page:

    <h1>{% pageDetail with name="Title" %}</h1>
<div class="page-content">
    {# 注意：如果内容是HTML格式，需要使用 |safe 过滤器防止被转义 #}
    {% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}
</div>

    You can also go throughidortokenThe parameter specifies the content of a specific single page, not just the content of the current page. For example, calling the introduction of "About Us" on the homepage of the website: 

    {% pageDetail aboutUs with name="Description" token="about-us" %}
<p>{{ aboutUs }}</p>

  2. List multiple single-page information (pageList):When you need to list multiple single-page links in the footer, sidebar, or other navigation areas of a website,pageListThe tag comes in handy. For example, show links to "About Us", "Contact Us", and "Privacy Policy" in the footer:

    <ul>
{% pageList pages %}
    {% for item in pages %}
        {# 可以根据页面ID或自定义URL别名排除不需要的页面 #}
        {% if item.Id != 999 and item.Link != "/some-excluded-page.html" %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

    This label will retrieve all the single pages created, you can filter and sort according toitem.Idoritem.Linkthese fields to meet the needs of the front-end display.

Through the above management and call methods, AnQiCMS provides us with a powerful and flexible platform that can efficiently handle various single-page content of the website, whether it is a simple information display or a special page requiring unique design, it can handle it with ease.

Frequently Asked Questions (FAQ)

1. Can I design a completely different layout for each single page?Yes, AnQiCMS offers high flexibility. You can specify a custom template file (for exampledownload.htmlormy-unique-about-page.html）。Just as long as this template file exists in your theme directory (such astemplate/your_theme/page/my-unique-about-page.htmlThe single page will load and use the template you specify for rendering. This allows you to achieve fully customized design for each important single page.

2. Does the single-page content editor support image upload and formatting?Of course, it supports. The single-page content editor in AnQiCMS backend is a feature-rich rich text editor.You can directly upload images, insert videos, and format text with bold, italic, lists, quotes, and more in the editor.In addition, if the Markdown editor is enabled, you can also use Markdown syntax to quickly write and format content.The editor also supports referencing images uploaded in the image resource management.

3. If my single-page content is not displayed correctly or the style is messed up, what should I check?First, confirm that the template name you have entered in the "Single Page Template" field in the background is correct, and that the template file actually exists in your theme directory. Second, if the content is in HTML format, make sure to use it in the template.{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}This way of calling, among other things|safeThe filter is required, it tells AnQiCMS not to escape the content with HTML.If the style is chaotic, it is likely that the CSS file has not been loaded correctly, check whether the reference path of the CSS file in the template is correct, or whether there are conflicting rules with the global style in the custom template.