AnQi CMS brings great convenience and customization to content display with its efficient features based on the Go language and support for Django template engine syntax.This means that even if you do not have a strong development background, you can easily have a unique visual style for your specific page.
Why do you need an independent page template?
Imagine that most article pages on your website may follow a unified layout, with modular display of modules such as sidebars, content areas, and comment sections.But when visitors click on "About Us", they may expect a design that is more brand story-telling, more vividly showcases the team's style or corporate culture.This may include large background images, multi-column team introductions, specially designed milestone timelines, or embedded video content.The standard template is often difficult 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.
Auto CMS Template Overview
All front-end template files are stored in Auto CMS/template/directory, and named with.htmlEnglish suffix. Each template folder usually represents a set of themes. The system will provide a generic template file for a single page by default, which is usuallypage/detail.htmlBut the powerful feature of AnQi CMS is that it allows you to make more detailed template specifications for individual pages.
Next, we will take the "About Us" page as an example and step by step guide you on how to set up an independent custom template for it.
First step: 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 thispageIn the folder, you can create a new HTML file, for example namedabout.html. This file will carry all the unique design of your "About Us" page.
If you are already familiar with HTML and CSS, you can start designing nowabout.htmlThe structure and style. You can design it to be completely different from the other parts of the website, or make fine adjustments based on the existing layout.
第二步：Design template content and reference page data
Inabout.htmlIn the file, you can use the template tags provided by the Security CMS to dynamically reference the content set in the "Page Management" section on the backend.Thus, your page title, description, and content information can still be conveniently modified through the backend, without directly altering the template code.
For example, yourabout.htmlMay 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.html的基础模板，它包含了网站的公共头部、底部等元素。这有助于保持网站整体的一致性，同时让您只需关注特定页面的独特内容。
Third step: Associate the background page with the custom template
Design itabout.htmlAfter the template file, the critical step is to associate it with your 'About Us' page.
- Log in to the Anqi CMS backend.
- Find and click on it in the left navigation bar.“Page Resources”then select"Page Management".
- Find the page you want to apply the new template in the single-page list, such as “About Us”, and click the right side of it.“Edit”button.
- After entering the page editing interface, scroll down and you will see a name called“Single Page Template”The input box. Here, you just need to fill in the name of the custom template file you just created, for example
about.html. - Click the bottom of the page.“OK”button to save your changes.
Step 4: Preview and Adjust
After completing these 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 design.about.htmlTemplate. If you find anything unsatisfactory, you can go back toabout.htmlModify in the file, and 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
Through the custom template feature provided by Anqi CMS, you can easily create a unique user experience for any specific page on the website.Whether it is for brand story, product introduction, 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 filename in the background, and Anqi CMS will handle the rest of the rendering work.
Common Questions (FAQ)
The custom page template file should be placed in which directory to be recognized by Safe CMS?The custom template file you created should be placed in the theme you are currently using.
templatethe directory.pageIn the folder. For example, if your theme name ismytheme, then the file path should be/template/mytheme/page/您的模板名.html.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 no changes are seen, please try clearing the browser cache first, or click the "Update Cache" feature in the AnQi CMS backend.If it still does not work, please check whether the path and filename of the template file are exactly the same as the "Single Page Template" name filled in the "Page Management" on the background, including the case.
How can I retrieve the content filled in the 'Page Management' section on the backend in a custom page template, such as the page title and main content?You can use
{% pageDetail %}The template tag is used to obtain 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 }}. Among them|safeFilter is very important, it ensures that HTML content is rendered correctly rather than displayed as plain text.