How to set up an independent display layout and elements for the single page of AnQiCMS, such as the 'About Us' page?

In AnQiCMS, setting independent display layouts and elements for single pages like "About Us" can make the website content more distinctive and professional.AnQiCMS with its flexible template engine and modular design makes this process intuitive and efficient.

Why do you need to customize a dedicated layout for the single page?

When using AnQiCMS to build websites, we often encounter such needs: some specific pages, such as "About Us

  1. Improve user experience:A unique layout can better guide users to focus on core information, provide a clearer reading path, and avoid information overload.
  2. Strengthen brand image:Exclusive design can better convey corporate culture and brand characteristics, making the "About Us" page more than just a pile of text and becoming a vivid carrier of the brand story.
  3. Optimize SEO performance:By customizing the content structure and element arrangement, it can better highlight the key keywords on the page, improving the search engine's crawling and understanding efficiency.
  4. To implement specific functions:For example, integrating maps and forms on the "Contact Us" page; displaying team member photo walls and company development timeline on the "About Us" page, all of which require specific layout support.

How to implement a single-page custom layout in AnQiCMS?

AnQiCMS is developed based on Go language, but the front-end template uses syntax similar to Django's template engine, files are usually stored with.htmlsuffixes stored in/templateUnder the directory. This design makes template development intuitive and efficient.

The core lies inCustom template filesandBackground association.

First, we need to create a file named specifically for the "About Us" page under the current template directory.page/about.htmlThisabout.htmlIt is the exclusive layout file for the "About Us" page.

AnQiCMS is very flexible in template design, and it supports several single-page template naming conventions by default:

  • page/detail.htmlThis is the universal default template for all single pages.
  • page/detail-{单页ID}.htmlIf you want to customize according to the page ID, you can use this format.
  • page/{自定义URL别名}.htmlThis is the most flexible way, you can specify a recognizable name for the page, for example, create a "About Us" pagepage/about.html.

Next, log in to the AnQiCMS backend, navigate to 'Page Resources' under 'Page Management'. Find or create your 'About Us' single page, and enter the name of the template file you just created in the 'Single Page Template' field on the editing page.about.htmlAfter saving, when you visit the "About Us" page, the system will automatically loadpage/about.htmlfile as its layout.

Add page elements in the custom layout

Once you have a dedicated one,page/about.htmlTemplate file, we can use various template tags (tags) provided by AnQiCMS to fill in content and dynamic elements.

  1. Get the core content of a single page:Inabout.htmlIn Chinese, you can pass throughpageDetailEasily get the title, text, description, thumbnail, etc. of the “About Us” page with tags.

    • Get page title:{% pageDetail with name="Title" %}
    • Get page content:{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}(Note that you need to|safeFilter to ensure that HTML content renders correctly
    • Get page description:{% pageDetail with name="Description" %}
    • Get uploaded Banner image or group image:{% pageDetail pageImages with name="Images" %}(usually usedpageImages[0]Get the first image as a Banner)

  2. Display the general information of the website: systemLabels can help you call the website name, Logo, filing number, and other settings from the global settings.

    • Website Name:{% system with name="SiteName" %}
    • Website Logo:<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

  3. Display contact information: contactThe label can conveniently display the information in the background "Contact Information Settings", which is very suitable for the part that contains contact information on the "About Us" page.

    • Contact Phone:{% contact with name="Cellphone" %}
    • Contact Email:{% contact with name="Email" %}
    • Company Address:{% contact with name="Address" %}

  4. SEO Optimization Elements: tdkThe tag is used to set the page's Title, Keywords, Description, and Canonical URL, which is crucial for search engine optimization.

    • Page Title:<title>{% tdk with name="Title" siteName=true %}</title>(siteName=trueCan automatically append website name)
    • Page Keywords:<meta name="keywords" content="{% tdk with name="Keywords" %}">
    • Page Description:<meta name="description" content="{% tdk with name="Description" %}">
    • Standard Link:{%- tdk canonical with name="CanonicalUrl" %}{%- if canonical %}<link rel="canonical" href="{{canonical}}" />{%- endif %}

  5. Integrate other content (such as the latest article list):Although it is a single page, you might want to display some related content on the "About Us" page, such as company news.archiveListTags can achieve this.

    • Display the latest 3 articles:
      
{% archiveList latestArticles with type="list" moduleId="1" limit="3" %}
    {% for article in latestArticles %}
        <p><a href="{{ article.Link }}">{{ article.Title }}</a></p>
    {% endfor %}
{% endarchiveList %}
      HeremoduleId="1"Assuming the article model ID is 1, you can adjust according to the actual situation.

Build a layout example for the "About Us" page.

Combine the above tags, a basicpage/about.htmlmight look something like this:

{% block title %}

{# 调用TDK标签，设置页面标题、关键词