Create custom single-page content

Creating a single page in AnQi CMS is a simple and direct process. First, you need to log in to the admin management interface.

  1. Enter Page Management:Log in to the Aiqi CMS backend, find the 'Page Resources' option in the left navigation bar, click to expand, and select 'Page Management'.Here is a list of all single-page applications created, where you can perform operations such as add, edit, and delete.

  2. Add New Page:Click the 'Add Single Page' button to enter the page editing interface. You will see a series of fields that need to be filled out, which together make up your single page content and related configurations.

    • Page Name:This is the title of the single page, which is also the main name displayed on the front end, such as 'About Us', 'Contact Us'.
    • Customize URL:
    • SEO title, keywords, description:To improve the performance of a single-page in search engines, it is recommended that you fill in these SEO-related fields carefully.The SEO title will be the title displayed in the browser tab and search results, the keywords are the terms you want the page to be searched for, and the summary is the content abstract displayed below the title in the search results.
    • Single page content:
    • Single Page Template:By default, the Anqi CMS will use a template file namedpage/detail.htmlThe universal template to render all single pages.If you want a single page to have a unique design or layout, you can specify a custom template file for it.about.html(usually stored in the template directorypage/folder), you just need to fill in hereabout.htmlIt is. The system will prioritize loading the template you specify.
    • Other optional settings:You can also set the 'display order' of the page according to your needs, upload a 'Banner image' for the top visual display of the page, or set a 'thumbnail' for use in page lists or sharing.

After filling and saving, your custom single page has been created.

Display custom single page content

How to display the content on the website front-end after the single-page content is created is the key to the next step. Anqi CMS provides various flexible methods.

  1. Access directly through the URL:The most direct way is to access it through its custom URL. For example, if you set the custom URL for the "About Us" page toabout-us, then users can access it through您的域名/about-us.htmlAccessed the page. By default, Anqi CMS will use the template package you are currently using.page/detail.htmlParse the file to display the content of the page. If you specified a custom template (such asabout.html), the system will automatically load the file for rendering.

  2. Call the content of a specified page in the template:At many times, you may need to display part of the information from a specific page on other pages of the website (such as the home page sidebar or footer), or link to these pages in the navigation menu. Aoki CMS provides convenient template tags for this.

    • pageDetailLabel (Get single page details):If you want to display the details of a specific single page in a template, you can use:pageDetailTag. For example, display a brief introduction to the "About Us" page on the homepage:

      {% pageDetail aboutPage with id="1" %} {# 假设“关于我们”的页面ID是1，或者您可以使用 token="about-us" #}
    <h3>{{ aboutPage.Title }}</h3>
    <p>{{ aboutPage.Description }}</p> {# 显示页面的简介 #}
    <a href="{{ aboutPage.Link }}">了解更多</a>
{% endpageDetail %}

      Or, if you are in the template of the current single page, directly obtain the content of the current page:

      <h1>{{ pageDetail with name="Title" }}</h1>
<div>{{ pageDetail with name="Content" | safe }}</div>
{# 注意：pageDetail with name="Content" 后通常需要使用 | safe 过滤器来解析HTML内容，否则可能会原样输出HTML标签。 #}

      pageDetailThe tag can obtain various fields of a single page, such asId(ID),Title(Title),Link(Link),Description(description),Content(Content), etc.

    • pageListTag (to obtain multiple pages list):If you need to list all single-page or partial single-page links in a certain area of the website (such as the footer or sidebar),pageListtags are very suitable.

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

      You can easily build a single-page navigation list in this way.

  3. Add a single-page link in the navigation menu:The most common practice is to add single-page sections such as 'About Us', 'Contact Information', etc., to the top or bottom navigation menu of the website.In the Anqi CMS backend, under 'Backend Settings' -> 'Website Navigation Settings', you can select the 'Category Page Link' type, and then choose the single page you want to add to the navigation menu from the created pages.So, the user can directly jump to the corresponding single page by clicking on the navigation item.

By following the above steps, whether it is the creation of content, the selection of display methods, or the integration of website structure, Anqi CMS provides you with clear and flexible solutions, making the operation of customized single pages efficient and convenient.

Common Questions (FAQ)

1. How to set different template styles for the "About Us" and "Contact Information" pages?You can specify different template filenames for each page when creating or editing a single page in the 'Single Page Template' field. For example, fill in the 'About Us' page.about.htmlContact information page fill incontact.htmlThe system will automatically load the corresponding template files when rendering these pages. Of course, you need to ensure that these customabout.htmlandcontact.htmlThe file already exists in your current template directory.page/In the subfolder.

2. Does the single-page content support Markdown format?Yes, AnQi CMS is built-in with Markdown editor support.