How to create and display independent pages such as 'About Us' and 'Contact Us' in a single-page management?

In website operation, independent pages such as "About Us" and "Contact Us" are essential basic content.They can not only help visitors quickly understand the company and provide contact information, but are also a key window for building trust and showcasing the brand image.AnQiCMS (AnQiCMS) provides us with a straightforward and powerful single-page management feature, making it easy and efficient to create and maintain these pages.

Next, we will explore how to create, display these independent pages, and integrate them into the website navigation in Anqi CMS.

Step 1: Create independent single pages in the background.

The process of creating a standalone page such as "About Us" or "Contact Us" is very direct. You just need to log in to the Anqi CMS backend and complete it through a few simple steps.

1. Manage PageFirst, find "Page Resources" in the left menu of the background, then click "Page Management". Here will display your list of all single page lists created.
2. Add a new page: You will see a 'Add Single Page' button in the page management interface. Click it to enter the editing interface of the new page.
3. Enter page information:
   • Page NameThis is the title displayed on your page in the front-end, for example 'About Us' or 'Contact Us'.
   • Single page contentThis is the core content area of the page. Anqi CMS provides a rich-text editor with many features, allowing you to easily edit text, insert images, videos, and even code as if you were using Word.
   • Custom URL: Suggest setting a concise and meaningful English alias here to make your page link more readable and SEO-friendly, such as "about-us" or "contact".If left blank, the system will automatically generate based on the page name.
   • SEO title, keywords, single page summaryThese fields are crucial for search engine optimization. Please fill them based on the page content to help search engines better understand and index your page.
   • Display orderIf you have multiple single pages that need sorting, you can set the number here, the smaller the number, the earlier the page is displayed.
   • Single page templateThis is a very flexible setting. By default, all single pages will use your template directory inpage/detail.htmlThis file to render. But if you want the "About Us" page to have a unique layout, you can create a template file namedabout.htmlThe template file location is usually/template/{您的模板目录}/page/about.htmlFill in this fieldabout.htmlThis page will use the unique template you specify
   • Banner image, thumbnailIf your page needs to display a header banner or a representative thumbnail, you can upload it here.

After completing the above entries, click the "Confirm" button, a new independent page will be created.

Step 2: How to display independent page content in the template.

After the page is created, the next step is to ensure that they can be displayed normally on the website front end. The Anqi CMS template system is very flexible, allowing you to call page content through simple tags.

The default template is used

As mentioned before, if you have not specified a specific template for the single page, the system will use the default onepage/detail.htmlRender. This means you just need to maintain the universality of this template file, and all single-page applications can display it through it.

Inpage/detail.htmlYou can use in such a template file.pageDetailTag to get detailed data of the current page. For example, to display the title and content of the page, you can write it like this:

<h1>{% pageDetail with name="Title" %}</h1>

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

This is something that needs to be noted,name="Title"It is used to get the title of the page, andname="Content"The main content of the page is obtained. Since the page content usually contains HTML format, we usepageContent|safeA filter that ensures HTML code is parsed correctly by the browser rather than being displayed as escaped.

If you have uploaded a Banner image or thumbnail on your single page, you can also call it similarly:

{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
<div class="page-banner">
    <img src="{{ pageImages[0] }}" alt="{% pageDetail with name='Title' %}">
</div>
{% endif %}
{% endpageDetail %}

HerepageImages[0]It means to get the first Banner image becauseImagesReturns an array of image URLs.

Flexible application of custom templates.

When you need to design a completely different layout for a specific page (such as "About Us"), custom templates come in handy.

1. Create a custom template file: According to the name you fill in the "Single Page Template" field in the background, create the corresponding HTML file in your template directory.page/For example, if you fill in the nameabout.html, then the file path is/template/{您的模板目录}/page/about.html.
2. Write custom template contentIn thisabout.htmlfile, you can freely design the layout and usepageDetailtags to call the title, content, images, and any other required data on the page, the method is the same aspage/detail.htmlSimilar. This way, you can provide a unique visual experience for each important independent page.

Step 3: Add an independent page to the website navigation

Even if the page content has been created and can be displayed correctly, visitors still need a way to find them. Adding these standalone pages to the website navigation is the most common practice.

1. Enter navigation settingsIn AnQi CMS backend, go to 'Backend Settings', then click 'Website Navigation Settings'.
2. Add navigation linksIn the navigation list interface, find and click the 'Add Navigation Link' button.
3. Configure navigation information:
   • display name: This is the text displayed in the navigation menu, for example, "About Us".
   • Link Type: Here, you need to select the "Category Page Link".
   • Select pageAfter clicking, the system will pop up a list displaying all the single pages and categories you have created. Find and select the independent page you just created.
   • Display order: Set the position of this navigation item in the menu.
   • Parent navigation: If you want this page to be a submenu under a main menu, you can select the corresponding parent navigation here.
   • Navigation description, subheading nameThese are optional fields, which can provide more information for navigation items to adapt to complex template design.

Save your navigation settings after, refresh the website front-end, and you will see the new added independent page link in the navigation menu.Click these links, visitors can easily access the carefully prepared content you have prepared.

By following these steps, you not only mastered the method of creating and managing independent pages in Anqi CMS, but also learned how to flexibly display content through template tags and seamlessly integrate them into the website navigation.The powerful features of AnQi CMS will help you efficiently build and maintain a rich and user-friendly website.

Frequently Asked Questions (FAQ)

**Q1: I created a single page and set a custom URL, but on the website front-end