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

In website operation, the article detail page is like the "face" of the content, not only carrying the core information, but also a key point for users to deeply understand and resonate.A well-designed, logically laid out detail page that highlights the value of the content, can significantly improve the reading experience of users, effectively convey information, and even promote further interaction or conversion.Aq CMS knows its importance and therefore provides highly flexible and customizable features, allowing us to easily create exclusive article detail pages with unique styles.

The foundation of customizing the article detail page of Anqi CMS

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

FirstlyFlexible content model. AnQi CMS allows us to customize the data structure of articles, products, and other content according to different business needs.This means we can add dedicated fields for different content types, such as adding 'price', 'stock', etc. for products, and 'author', 'source', etc. for articles.These custom fields will directly become the data elements we can call on the detail page.

Next isPowerful template design features. Anqi CMS provides full open template editing permissions, not only can we modify existing template files, but we can also create brand new templates.By editing the template file, we can fully control the HTML structure, CSS style, and JavaScript interaction of the detail page, thus achieving comprehensive personalization from overall layout to the display of micro elements.

Finally, AnQi CMS is built-in withRich template tags and filtersThese tags are the bridge between us and the background data, allowing us to easily obtain the title, content, classification, 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

After understanding these features, we can start customizing the layout of the article detail page.This process usually involves editing template files and cleverly using the tags and filters provided by AnQi CMS.

Step 1: 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 choose the corresponding template according to the content model. For example, if it is the default "article" model, the detail page template file is usually locatedarticle/detail.htmlWe can find and edit these files through the 'Template Design' feature in the background.

In addition, Anqi CMS also provides more detailed template control options.When publishing or editing a document, you can find the 'Document Template' setting under 'Other Parameters'.Here, you can specify a particular template filename (such asmy_custom_article.html). As long as this file exists in your template directory, this specific article will be rendered with this custom template first to achieve personalized layout for a single article.

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

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

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

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

To display the article content correctly (which may contain HTML tags), we need to usesafeA filter to prevent 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>

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