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

When using AnQiCMS to manage website content, the layout and display effects of the article detail page directly affect the user experience.AnQiCMS provides us with high flexibility, allowing us to customize the display layout of the detail page according to the needs of different types of content or specific articles, without being limited to a single template style.

To implement the personalized layout of the article detail page, we mainly use the template mechanism and content management function of AnQiCMS.The core idea is: define multiple layout structures in the template file, and then select the corresponding layout when editing articles in the background.

Flexible template files: the basis of custom layout

The template files of AnQiCMS are uniformly stored in the root directory of the website/templateIn the folder. Each template theme has its own independent directory. Here, the default template for the article detail page is usuallyyour_theme_name/{模型table}/detail.html. For example, if it is an article model, the default isyour_theme_name/article/detail.html.

However, if we need to customize a unique layout for an article or a category of articles, AnQiCMS allows us to create custom template files. These custom files can be placed withdetail.htmlIn the same directory ordetail.htmlwithin the folder of the model, named with more specific file names. For example, we can createarticle/download.htmlOrproduct/detail-product-showcase.htmland. AnQiCMS also supports a "folder organization mode", you can{模型table}create more detailed subdirectories to store templates, such asarticle/special/detail.html.

Implement the steps for customizing the article detail page layout

Let's go step by step to see how to operate:

Step 1: Plan the custom template file

First, consider what kind of unique layout your article or product needs.For example, you might need a special download page, a page with product parameter comparison, or an event registration page.

According to the plan, enter the theme folder of the template you are currently using (for exampletemplate/defaultIn the folder where you want to customize the layout of the model (for examplearticlefolder), create a new HTML file. You can name the file according to its purpose, for examplearticle/download.htmlUsed for the detail page of download articles orarticle/event.htmlUsed for event articles.

Step 2: Build the layout and content in the custom template

Open the new HTML file you created (for examplearticle/download.htmlHere you can design your exclusive layout just like any HTML page. The powerful template tag system of AnQiCMS is a tool for filling content.

In the custom detail page, the most core tag is{% archiveDetail %}. It can retrieve all the details of the current article. You can display the title, content, images, and so on of the article in this way:

{# 显示文章标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

{# 显示文章发布时间 #}
<p>发布时间：{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</p>

{# 显示文章内容，注意使用 |safe 过滤器确保HTML内容正确解析 #}
<div class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</div>

{# 如果文章有缩略图，可以这样显示 #}
{% archiveDetail articleThumb with name="Thumb" %}
{% if articleThumb %}
<img src="{{ articleThumb }}" alt="{% archiveDetail with name="Title" %}">
{% endif %}

In addition to the fields of the article itself, you can also use other tags to get more relevant information:

  • Get Category Information:{% categoryDetail with name="Title" %}It can display the name of the category to which the article belongs.
  • Get article tags: Use.{% tagList %}Tag loop displays the tags associated with the article.
  • Get custom parameters: If you add additional custom fields (such as "author", "product parameters", etc.) in the background for the article model, you can use{% archiveParams %}Tag to loop display these fields or use directly{% archiveDetail with name="你的自定义字段名" %}to retrieve the value of a specific field.
  • Navigation between articles:{% prevArchive %}and{% nextArchive %}Tags can help you create jump links between articles, enhancing the user browsing experience.
  • Global system information:{% system with name="SiteName" %}Can get the website name and other global settings.

Step 3: Associate the custom template in the background article editing page.

After completing the creation and content filling of the customized template file, the final step is to let AnQiCMS know which articles should use this new template.

When you enter the interface for editing or publishing articles in the background, in the "Other Parameters" section, you will find a field named "Document Template".Enter the relative path and filename of your custom template file.For example, if you create a file that istemplate/default/article/download.html, then enter it heredownload.htmlIf you placed it in a subfolder, for exampletemplate/default/article/special/detail.htmlThen fill inspecial/detail.html.

After saving the article, when you visit the details page of the article again, you will find that it has already used the customized layout you carefully designed.

Scenarios for applying customized layouts in bulk.

Sometimes, you may want all articles under a specific category to use a specific custom template instead of setting it individually for each article.AnQiCMS has also considered this. When editing a category in the "Document Category" management page on the backend, in the "Other Parameters" section, you will see a "Category Template" field.Enter the filename of the custom template, for exampledownload.html. Check the 'Apply to subcategories' option, so that this custom template will be used by default for articles in this category and all its subcategories, unless a single article specifies a template separately.

Through the above method, AnQiCMS provides various custom layout solutions for single articles to categorized articles, making our website content display more rich and personalized.

Frequently Asked Questions (FAQ)

  1. Ask: Where should the custom template file be placed in AnQiCMS? Answer:The custom template file should be placed in the directory of the template theme you are currently using, usually in/template/你的主题名/Below, then according to the content model (such as articlesarticle, productsproduct) place it in the corresponding model folder. For example, the custom template for the article detail page can be placed intemplate/default/article/directory.

  2. Ask: How can I use the same custom template for all articles under a specific category? Answer:You can go to the background and enter "Content Management" under "Document Category" to edit the target category. In the "Other Parameters" of the category, find the "Document Template" field and fill in your custom template filename (such ascustom_list.htmlIf you want the subcategories to inherit this setting, please check the 'Apply to subcategories' option.

  3. Ask: How can I retrieve other fields outside the article content in a custom template (for example, I added an 'author' field to the article model in the backend)? Answer:If you have customized fields in the article model in the background, you can directly use them in the custom template of the article detail page{% archiveDetail with name="你的字段名" %}to get their values. For example, if you add a field namedauthorthe field can be used{% archiveDetail with name="author" %}to display the author. If you want to cycle through all custom fields, you can use{% archiveParams params %}the tag.