How to create and display custom single-page content (such as About Us, Contact Information)?

In website operation, content such as 'About Us', 'Contact Information', and 'Privacy Policy' is usually displayed in the form of independent pages. This content is relatively fixed and plays an important role in the website structure.AnQiCMS provides an intuitive and powerful function for creating and managing these custom single-page websites, allowing you to easily publish and update without writing code.

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 back-end management interface.

1. Enter Page Management:Log in to the AnQi CMS backend, find the "Page Resources" option in the left navigation bar, expand it, and select "Page Management".This will list all the single pages created, you can add, edit, delete, and other operations.

2. Add a 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 the content and related configuration of your single page.

   • Page name:This is the title of a single page, which is also the main name displayed on the front end, such as 'About Us', 'Contact Us'.
   • Custom URL:This is a very important setting that determines the URL format of your single page.The AnQi CMS will automatically generate a pinyin URL alias based on the page name you enter, for example, “About Us” may generate “guanyu-wome.html”.If you are not satisfied with the automatically generated URL, you can manually edit it to a more concise and descriptive English or Pinyin combination, such as 'about-us' or 'contact'.Custom URLs not only make website addresses more aesthetically pleasing, but also help with search engine optimization (SEO), but make sure it is unique throughout the site.
   • SEO title, keywords, description:To improve the single-page performance in search engines, it is recommended that you fill in these SEO-related fields carefully.The SEO title will be the title of the page in the browser tab and search results, the keywords are the words you want the page to be searched for, and the summary is the content abstract below the title in the search results.
   • Single page content:This is the main part of a single page. Anqi CMS provides a rich text editor with various features, allowing you to edit text, insert images, add links, and even embed videos like using Word.If you are familiar with Markdown syntax, Anqi CMS also supports Markdown editors, making content formatting more convenient.
   • Single page template: By default, Anqi CMS will use a name calledpage/detail.htmlThe general template is used 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.For example, if you designed a page namedabout.htmlThe template file (usually located in the template directorypage/folder), just fill in hereabout.htmland it is. The system will prioritize loading the template you specify
   • Other optional settings:You can also set the page display order according to your needs, upload a "Banner image" for the top visual display of the page, or set a "thumbnail" for use in the page list or sharing.

Fill in and save, your custom single page will be created.

Display custom single page content

After the single-page content is created, how to display it on the website front-end is the key step. Anqi CMS provides various flexible ways.

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 of the "About Us" page toabout-usthen users can access it through您的域名/about-us.htmlThe page was accessed. By default, AnQi CMS will use the template package you are currently using.page/detail.htmlFile to parse and 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 the specified page in the template:Most of the time, you may need to display part of a specific page on other pages of the website (such as the homepage sidebar or footer), or link to these pages in the navigation menu. Anqi CMS provides convenient template tags for this:

   • pageDetailLabel (Get details of a single page):If you want to display the details of a specific single page in a template, you can usepageDetailLabel. For example, display a short introduction of 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 on 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 retrieve various fields on a single page, such asId(ID),Title(Title),Link(Link),Description(Description),Content(Content) and so on.

   • pageListTag (to get a list of multiple pages):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>
     

     In this way, you can easily build a single-page navigation list.

3. Add a single-page link to the navigation menu:The most common practice is to add single pages such as 'About Us', 'Contact Information', and others to the top or bottom navigation menu of the website.In the Anqi CMS backend, under 'Background 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.Thus, when the user clicks on the navigation item, they can directly jump to the corresponding single page.

By following these 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 custom single-page pages efficient and convenient.

Frequently Asked Questions (FAQ)

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

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