How to display a custom page template independently on a specific page (such as About Us)?

Hello! During the process of building a website with Anqi CMS, we often encounter such needs: certain specific pages, such as "About Us", "Contact Us", or some special topic pages, require a layout and design that is completely different from the rest of the website.Fortunately, AnQi CMS provides a very flexible solution for this, allowing you to easily specify independent custom templates for these pages.

AnQi CMS, with its efficient features based on the Go language and support for Django template engine syntax, brings great convenience and customizability to content display.This means that even if you do not have a deep background in development, you can easily take simple steps to make your specific page have a unique visual style.

Why do we need independent page templates?

Imagine that most of the article pages on your website may follow a unified layout, with modular display of modules such as sidebars, content areas, and comment sections.When visitors click on This may include large background images, multi-column team introductions, specially designed milestone timelines, or embedded video content.Standard templates often fail to meet these personalized needs, at this point, an independent custom template can make your 'About Us' page stand out, and better convey brand information.

Overview of Anqi CMS template mechanism

In Anqi CMS, all front-end template files are stored in/template/the directory, and.htmlwith a suffix. Each template folder usually represents a set of themes. The system defaults to providing a generic template file for a single page, typicallypage/detail.htmlBut the powerful aspect of Anqie CMS is that it allows for more detailed template specifications for individual pages.

Next, we will take the "About Us" page as an example and guide you step by step on how to set up an independent custom template for it.

Step 1: Create your exclusive template file

Firstly, you need to find or create a subfolder namedpagein the directory of the template you are currently using. For example, if your template name isdefault, then the path is/template/default/page/. In thispageInside the folder, you can create a new HTML file namedabout.html. This file will contain all the unique design of your "About Us" page.

If you have already familiarized yourself with HTML and CSS, you can now start designingabout.htmlThe structure and style. You can design it to be completely different from the rest of the website, or make minor adjustments to the existing layout.

Second step: Design the template content and reference the page data

Inabout.htmlIn the file, you can use the template tags provided by Anqi CMS to dynamically refer to the content set in the background "Page Management".This way, you can still easily modify the page title, description, and main content information through the background, without having to directly change the template code.

For example, yourabout.htmlIt may include the following basic structure:

{% extends 'base.html' %} {# 假设您的主题有一个基础骨架模板 #}

{% block title %}
    {# 调用页面标题，并可选地附加网站名称 #}
    <title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}

{% block content %}
    <article class="about-us-section">
        {# 显示后台设置的页面标题 #}
        <h1 class="page-main-title">{% pageDetail with name="Title" %}</h1>

        {# 显示后台设置的页面描述 #}
        {% pageDetail pageDescription with name="Description" %}
        {% if pageDescription %}
            <p class="page-intro">{{ pageDescription }}</p>
        {% endif %}

        {# 显示后台设置的页面正文内容，记得使用 |safe 过滤器以正确渲染HTML格式 #}
        <div class="page-rich-content">
            {%- pageDetail pageContent with name="Content" %}
            {{ pageContent|safe }}
        </div>

        {# 您可以在这里添加更多自定义的HTML结构和内容 #}
        <div class="team-showcase">
            <h2>我们的团队</h2>
            <div class="team-members">
                {# 这里可以硬编码团队成员信息，或者通过自定义字段在后台管理 #}
                <div class="member">
                    <h3>张三</h3>
                    <p>创始人 & CEO</p>
                    <img src="/public/static/images/zhangsan.jpg" alt="张三" />
                </div>
                <div class="member">
                    <h3>李四</h3>
                    <p>市场总监</p>
                    <img src="/public/static/images/lisi.jpg" alt="李四" />
                </div>
            </div>
        </div>
    </article>
{% endblock %}

Please note,{% extends 'base.html' %}This line assumes that your theme has a namedbase.htmlThe basic template, which includes the common header, footer, and other elements of the website. This helps maintain the overall consistency of the website while allowing you to focus only on the unique content of specific pages.

Step three: Link the page with the custom template in the background

Design it wellabout.htmlAfter designing the template file, the key step is to link it with your "About Us" page.

1. Log in to the AnQi CMS background.
2. Find and click in the left navigation bar"Page Resources"and then select“Page Management”.
3. Find the page you want to apply the new template in the single-page list, such as “About Us”, and click the rightEditbutton.
4. After entering the page editing interface, scroll down and you will see a page namedSingle page templateInput box. Here, you just need to fill in the name of the custom template file you just created, for exampleabout.html.
5. Click the bottom of the page.“OK”Button to save your changes

Step 4: Preview and adjust

After completing the above steps, you can access your "About Us" page on the front end. At this point, you should be able to see that the page has applied your designabout.htmlTemplate. If you find anything unsatisfactory, you can go back toabout.htmlModify in the file, then refresh the front-end page to see the real-time effect. The template system of Anqi CMS usually supports instant updates without complex compilation or restart operations.

Summary

By using the custom template feature provided by Anqi CMS, you can easily create a unique user experience for any specific page on the website.In order to meet brand stories, product introductions, or any other special needs, this flexibility greatly enhances the efficiency and effectiveness of content operation.Remember, the key is to create the correct template file path and specify the corresponding file name in the background, and Anqin CMS will take care of the rest of the rendering work.

Frequently Asked Questions (FAQ)

1. Where should the custom page template file be placed so that it can be recognized by Anqie CMS?The custom template file you created should be placed in the theme currently being used.templateUnder the directorypageIn the folder. For example, if your theme name ismythemethen the file path should be/template/mytheme/page/您的模板名.html.

2. What should I do if I modified the custom template file but the front page did not change?The template update of AnQi CMS is usually effective immediately. If you do not see any changes, please try clearing your browser cache first, or click the "Update Cache" feature in the AnQi CMS background.If it is still invalid, please check whether the path and file name of the template file are consistent with the name of the "Single Page Template" filled in the "Page Management" on the backend, including case sensitivity.

3. How can I get the content filled in the background 'Page Management' in a custom page template, such as page title, text, etc?You can use{% pageDetail %}Template tags to retrieve this information. For example, to get the page title is{% pageDetail with name="Title" %}, to get the main content is{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }}.|safeThe filter is very important, it ensures that HTML content is rendered correctly rather than displayed as plain text.