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, provide contact information, but also are the key windows 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 a standalone page in the backend
The process of creating a standalone page such as "About Us" or "Contact Us" is very straightforward. You just need to log in to the Anqi CMS backend and complete it through a few simple steps.
- Enter page managementFirst, find "Page Resources" in the left menu of the background, then click "Page Management". Here will display all the single page lists you have created.
- Add a new pageIn the page management interface, you will see a 'Add Single Page' button. Click it to enter the editing interface of the new page.
- Fill in the page information:
- Page NameThis is the title displayed on your page in the front end, such as "About Us" or "Contact Us".
- Single page contentHere is the core content area of the page.AutoCMS provides a rich text editor with a variety of features, allowing you to easily edit text, insert images, videos, and even code, just like you would with Word.
- Custom URL
- SEO title, keywords, single page introductionThese fields are crucial for search engine optimization. Please fill them according to 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 Template：This is a very flexible setting. By default, all single pages will use your template directory
page/detail.htmlThis file is used to render. But if you want the "About Us" page to have a unique layout, you can create a template file namedabout.html(The storage path is usually/template/{您的模板目录}/page/about.html），then enter this fieldabout.html. This page will use the unique template you specify - Banner image, thumbnailIf your page needs to display a large header image (Banner) or a representative thumbnail, you can upload it here.
Complete the above fill-in and then click the "OK" button to create a new independent page.
Step 2: How to display the content of an independent page in the template
The next step after the page is created is to ensure that they can be displayed normally on the website front-end. The template system of Anqi CMS is very flexible, allowing you to call page content through simple tags.
The application of the default template
As mentioned earlier, if you have not specified a specific template for the single page, the system will use the default onepage/detail.htmlThis will render. This means that as long as you maintain the generality of this template file, all single-page applications can display through it.
Inpage/detail.htmlYou can use in such a template file.pageDetailTo get detailed data of the current page, you can label it like this. 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>
It should be noted that,name="Title"It is used to get the page title, whilename="Content"Then get the main content of the page. Since the page content usually contains HTML format, we have usedpageContent|safeFilter, ensure that the HTML code can be correctly parsed by the browser rather than being displayed as escaped.
If your single page uploads a Banner image or thumbnail, it can also be called in a similar way:
{% 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]Indicates to get the first Banner image, becauseImagesThe returned is an array of image addresses.
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.
- Create a custom template file：Based on the name you fill in the 'Single Page Template' field on the backend, create the corresponding HTML file in your template directory.
page/folder. For example, if you fill inabout.html，then the file path is/template/{您的模板目录}/page/about.html. - Write custom template content: In this
about.htmlfile, you can freely design the layout, and usepageDetailLabel to call the title, content, images, and any other required data for the page, method is similar topage/detail.htmlThis method allows you to provide a unique visual experience for each important independent page.
Third step: Add independent pages 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. The most common practice is to add these standalone pages to the website navigation.
- Enter the navigation settingsIn the Anqi CMS backend, go to 'Backend Settings', and then click 'Website Navigation Settings'.
- Add Navigation LinkIn the navigation list interface, find and click the 'Add Navigation Link' button.
- Configure navigation information:
- Display NameThis is the text displayed in the navigation menu, for example, 'About Us'.
- Link TypeHere, you need to select the 'Category Page Link'.
- Select page：Click to display a list of 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 of a main menu, you can select the corresponding parent navigation here.
- Navigation description, sub-title nameThese are optional fields that can provide more information for navigation items to adapt to complex template designs.
Save your navigation settings and refresh the website front-end, 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.
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 functions of Anqi CMS will help you efficiently build and maintain a content-rich, user-friendly website.
Common Questions (FAQ)
**Q1: I created a single page and set a custom URL, but on the website front-end