When using AnQiCMS to manage website content, the layout and display effect of the article detail page directly affects the user experience.AnQiCMS provides high flexibility for us, allowing us to customize the display layout of the detail page for different types of content or specific articles without being limited to a single template style.
To implement a personalized layout for article detail pages, we mainly use the template mechanism and content management features 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 foundation for custom layouts
AnQiCMS's template files are uniformly stored in the root directory of the website/templateIn the folder. Each template theme has its own 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 a specific article or a category of articles, AnQiCMS allows us to create custom template files. These custom files can be placed in the same directory asdetail.htmlIn the same directory, ordetail.htmlinside the folder of the model, with a more specific filename. For example, we can createarticle/download.htmlorproduct/detail-product-showcase.htmlEnglish.AnQiCMS also supports a "folder organization mode", you can create more detailed subdirectories under the directory to store templates, for example.{模型table}directory to create more detailed subdirectories to store templates, for example.article/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 may need a special download page, a page with product parameter comparison, or an event registration page.
According to the plan, enter the folder of the current theme template you are using (for exampletemplate/default). Within the model folder where you want to customize the layout (for examplearticleFolder), create a new HTML file. The filename can be named according to its purpose, such asarticle/download.htmlDetails page for articles of the type to download, orarticle/event.htmlFor event articles.
第二步：In the custom template, build the layout and content
Open the newly created HTML file (for examplearticle/download.html），在这里你可以像设计任何HTML页面一样，构建你的专属布局。AnQiCMS强大的模板标签体系是填充内容的利器。
In the custom detail page, the most core tag is{% archiveDetail %}. It can obtain all the detailed information of the current article. You can display the title, content, images of the article like this:
{# 显示文章标题 #}
<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 related information:
- Get category information:
{% categoryDetail with name="Title" %}Can display the name of the category to which the article belongs. - Get the tags of the article: Use
{% tagList %}Tag display cycle for associated articles. - Get custom parameters.：If you have added additional custom fields (such as "author
{% archiveParams %}Label to cycle through these fields, or use directly{% archiveDetail with name="你的自定义字段名" %}To get the value of a specific field - Navigation between previous and next 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 obtain the website name and other global settings.
Third step: Associate custom template in the background article editing page
Completed the creation and content filling of the custom template file, the final step is to let AnQiCMS know which articles should use this new template.
When you enter the background editing or publishing article interface, in the 'Other Parameters' section, you will find a field named 'Document Template'.Enter the relative path and filename of your custom template file in this field.template/default/article/download.html, then fill in heredownload.htmlIf you placed it in a subfolder, such astemplate/default/article/special/detail.htmlthen enterspecial/detail.html.
Save the article and then visit the article detail page again, and you will find that it has already used the customized layout you carefully designed.
Scenes for applying customized layouts in bulk
Sometimes, you might want all articles under a specific category to use a particular custom template, rather than setting it individually for each article.AnQiCMS also took this into consideration.In the background “Document Category” management page, when editing a category, in the “Other Parameters”, you will see a “Category Template” field.download.html.At the same time, if the option 'Apply to subcategories' is checked, all articles under this category and its subcategories will use this custom template by default, unless a single article specifies a template separately.
Through the above methods, AnQiCMS provides various custom layout schemes from single articles to categorized articles, making our website content display more abundant and personalized.
Common Questions (FAQ)
问：Custom template files should be placed in which directory of AnQiCMS? Answer:Custom template files should be placed in the directory of the currently used template theme, usually in
/template/你的主题名/Below, then based on 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/the directory.问：How can I use the same custom template for all articles under a specific category? Answer:You can go to "Content Management" under "Document Category" in the background to edit the target category. Find the "Document Template" field under the "Other Parameters" of the category, and fill in your custom template filename (such as
custom_list.htmlIf you want to apply this setting to its subcategories as well, please check the 'Apply to subcategories' option.问：How to get other fields besides 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 it in the custom template of the article detail page
{% archiveDetail with name="你的字段名" %}to get its value. 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 %}tags to achieve this.