In Anqi CMS, in order to make single pages such as "About Us" and "Contact Us" have unique display effects, rather than following the unified page layout of the website, we can customize independent display templates for them.This customized capability is a reflection of Anqi CMS's flexibility, which can help us better shape the brand image or provide a more suitable display form for specific content.
Overview of AnQi CMS template mechanism
The Anqi CMS template system is designed to be very intuitive and powerful, based on syntax similar to the Django template engine, which separates the presentation of content from logical control, allowing even users not familiar with programming to achieve rich page effects through simple editing. All template files are stored in the root directory of the website./templateIn a folder. For a single page, the system usually has a default display template, such aspage/detail.htmlBut the exquisite part of AnQi CMS is that it allows us to specify any single page to call a completely independent, custom template file.
How to customize an independent display template for a single page
The goal is mainly achieved in three steps: understanding the structure of the template file, creating and editing a custom template file, and associating the template file with a specific single page in the background.
First step: Understand the Anqi CMS template file structure
Firstly, we need to understand the storage location and naming rules of the single-page template. Usually, there will be a named folder in your Anqicms template theme directory.pageThe folder. By default, the display of all single pages may be shared.page/detail.htmlThis file. Anqi CMS supports a very flexible custom naming method: You can create names for specific single pages likepage/{单页面ID}.htmlorpage/{自定义URL别名}.htmlSuch a template file. For example, if you have a "About Us" page, its custom URL alias isaboutThen you can create a file namedpage/about.htmltemplate file.
Step two: Create and edit independent custom template files
Copy the basic template as a starting point:For convenience, it is recommended that you first copy the default single-page detail template
page/detail.htmlto the same onepageIn the directory, and rename it to the custom name you want, for examplepage/about-us.htmlThe benefit of doing this is that the new template already includes all basic page structure and data call logic, you just need to modify and adjust it on this basis, without starting from scratch.Edit the template content:Open with a text editor
page/about-us.htmlFile. In this file, you can freely use HTML, CSS, and JavaScript to build the visual effects of the page.In terms of content presentation, Anqi CMS provides a rich set of template tags to call back-end data.For a single-page, the most commonly used ispageDetailA tag that can help us get the page title, content, and description information. For example, to display the page title, you can write it like this:<h1>{% pageDetail with name="Title" %}</h1>To display the detailed content of the page, this is the core part, which usually contains HTML code generated by a rich text editor, so it must be used
|safeA filter to ensure that HTML code is parsed and displayed correctly, rather than being escaped:<div class="content-area"> {% pageDetail pageContent with name="Content" %} {{ pageContent|safe }} </div>Moreover, you can also call other page elements such as thumbnails, Banner images, etc., according to your design needs. Don't forget to include the common header (header) and footer (footer), usually using
{% include "partial/header.html" %}and{% include "partial/footer.html" %}To implement, in order to maintain the consistency of the overall style of the website.Important reminder:Please make sure that your template file is saved using UTF-8 encoding to avoid Chinese garbled characters.
Step 3: Associate the custom template with the single page in the background
This is a critical step, binding the custom template you have meticulously created with a specific single page
Log in to the Anqi CMS backend:Access your Anqicms CMS background management interface.
Enter 'Page Management':In the left navigation bar, find and click on 'Page Resources' under 'Page Management'. Here is a list of all single pages on your website.
Edit the target single page:Find the single page (such as "About Us") you want to apply the custom template to, and click the "Edit" button next to it.
Specify the "Single Page Template":In the single-page editing page, you will see a text box named "Single Page Template".Here, you need to enter the relative path and filename of your custom template file.For example, if the file you create is
page/about-us.htmlEnter in this input boxpage/about-us.html.Save and view the effect:After filling in, click the "OK" button at the bottom of the page to save changes.Then, you can visit the "About Us" page on the website's front desk, refresh the browser cache, and you will be able to see the effect of the custom template you created.
Application scenarios of custom templates
This ability to customize independent templates for single pages greatly expands the display possibilities of Anqi CMS:
- Unique Brand Story Page:Allow you to display the company's history, culture, or team members in a more creative and attractive way.
- Interactive Contact Page:In addition to basic contact information, maps, online forms, or social media entries can be integrated to provide a richer user experience.
- Special topic or event landing page:Design a dedicated page for specific marketing activities or thematic content to avoid distraction and improve conversion rates.
- Download center or information display page:Efficiently display file lists, document previews, and other functions with a specific layout.
By following these steps and thinking, you will be able to skillfully navigate the single-page display in Anqi CMS, making your website content more personalized and attractive.
Frequently Asked Questions (FAQ)
Q1: I have set a custom template for the single page, but why is the front-end page displaying a blank screen or an error?A1: This is usually due to an incorrect template file path, a missing template file, or a syntax error in the template file content.Please first check that the path you have filled in the "Single Page Template" field in the background is exactly the same as the actual file path (including case).Then, make sure the file really exists in your template theme directory.If the path is correct, please check for missing end tags, incorrect variable names, or incorrect usage of tags in the template file content.Finally, try to clear the website and browser cache.
Q2: How can I prevent the custom template from inheriting the common header and footer?A2: Of course, you can. When creating a custom template, you can avoid using{% extends "base.html" %}This inheritance label. Instead, start writing the HTML structure from scratch, only containing the exclusive content of your single page.However, usually to maintain the overall style and consistency of the website navigation, we tend to inheritbase.html, and only overwrite{% block content %}Include the content area. If you do not inherit at all, you need to manually include all necessary HTML structures in the custom template, including<head>metadata, CSS, and JS references for the part.
Q3: How do I call the custom fields added in my custom template on a single page (such as the 'Honor Qualifications' list)?A3: If your single-page model includes custom fields, you can call them usingpageDetailtags. For example, if you add a namedhonor_listA custom field that stores a list of images, you can call it in the template like this:
“`twig
{% pageDetail honorImages with name=“honor_list” %}
{% if honorImages %}
<div class="honor-section">
<h3>荣誉资质</h3>
<ul>
{% for imgUrl in honorImages %}
<li><img src="{{ imgUrl }}" alt="荣誉图片"></li>
{% endfor %}
</ul>