How to customize the display layout of the article detail page in Anqi CMS?

The foundation for customizing the article detail page in Anqi CMS

To flexibly control the display layout of the article detail page, we need to understand the core features provided by Anqi CMS, which are the solid foundation for personalized customization:

FirstlyFlexible Content Model

ThenPowerful template design features

Finally, Safe CMS is built-in withRich template tags and filters.These tags are the bridge between us and the background data, allowing us to easily obtain the title, content, category, images, and other data of the articles.And various filters can further process these data, such as formatting date and time, truncating text length, and safely outputting HTML content, making the content display more refined and professional.

Step by step create your exclusive article detail page

Understood these features, we can then start customizing the article detail page layout.This process usually involves editing template files and skillfully using the tags and filters provided by the Safe CMS.

第一步：Identify and select the article detail page template file

The template files of AnQi CMS are usually organized in/templateUnder the directory. For the article detail page, the system will select the corresponding template based on the content model. For example, if it is the default "article" model of the system, the detail page template file is usually located inarticle/detail.html. We can find and edit these files through the "template design" feature of the backend.

In addition, the Anqi CMS also provides more detailed template control options.When publishing or editing a document, you can find the 'Document Template' setting in the 'Other Parameters'.my_custom_article.html）。This specific article will be rendered with this custom template first if the file exists in your template directory, thus achieving personalized layout for a single article.

Step 2: Use template tags to call the core data of the article.

The core of the article detail page is to display various data of the article. The Anqi CMS providesarchiveDetailtags, which are the main tools for obtaining detailed information of a single article.

For example, to display the title of the article on the detail page:

<h1>{% archiveDetail with name="Title" %}</h1>

To display the article content correctly (which may contain HTML tags), we need to usesafeFilter to avoid content from being escaped, ensuring that HTML code can be parsed normally by the browser:

<div class="article-content">
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|safe}}
</div>

Here are thesafeThe filter is very important, it tells the template engine that this HTML content is safe and can be output directly.