Managing website content in AnQiCMS, the document detail page is undoubtedly the core interface for users to obtain information.How to make this page both beautiful and informative is a concern for many website operators.Today, let's talk about how to elegantly display the title, category, publishing time, and other key information of an article on the document detail page of AnQiCMS.

AnQiCMS uses a syntax similar to Django's template engine, which makes it very intuitive to call various data when customizing templates. For document detail pages, the system usually provides a default template namedarchiveThe global variable, which contains all the detailed data of the current document. This means that we can directly access and display the required information.archive.字段名in a way, easily obtain and display the necessary information.

Retrieve and display the document title

Firstly, the title of the document is the soul of the page. In your document detail template file (usually)detail.htmlor a template customized by content model) you can use it directly.{{archive.Title}}to display the title. Usually, we would place it in the)<h1>tag to highlight its importance and make it search engine friendly:

<h1>{{archive.Title}}</h1>

If your document is set with SEO title and you want it to be displayed on the page<title>you can use it in the tagtdkThe tag can automatically obtain:

<title>{% tdk with name="Title" siteName=true %}</title>

HeresiteName=trueThis means that the website name will be automatically added to the end of the titlesepProperty (default as)-) can be used to define separators.

Show the category of the document

The category of the article can help readers quickly understand the归属 of the article, and it is convenient for them to browse similar content. ThrougharchiveVariable, we can also easily obtain the category information:

<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a>

Here,archive.CategoryIt is an object that contains detailed information about the current document's category, such as the category linkLinkand the category nameTitleClick on the category name, and readers can jump to the list page of that category.

Display the document publication and update time.

Time information is particularly important for news, technical articles and other content, as it allows readers to understand the timeliness of the information. AnQiCMS providesCreatedTime(Publish time) andUpdatedTimeUpdate Time: two fields. These fields store timestamps and we need to usestampToDatea function to format them into a readable date and time.

For example, show the publish time:

<span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>

Here are the"2006-01-02 15:04"It is the Go language's time formatting standard, which represents specific year, month, day, hour, and minute. You can adjust this format as needed, for example, to only display the date.("2006-01-02")or more detailed time("2006-01-02 15:04:05"). If the article is updated, you can also show the update time in a similar manner{{stampToDate(archive.UpdatedTime, "2006-01-02")}}.

Enrich page information: page views and tags

To make the detail page content richer, you can also display the number of views and related tags.

Number of views: {{archive.Views}}It can directly display the number of times the article has been read, increasing the attractiveness of the article.

Document tags:Tags can help readers quickly understand the main keywords of the article and discover more related content. AnQiCMS usestagListtags to get the list of tags associated with the article and it needs to be combined withforLoop to traverse and display:

{% tagList tags with itemId=archive.Id limit="10" %}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

HereitemId=archive.IdMake sure to get the current document's tags,limit="10"which limits the maximum display to 10 tags.

Integrated code example

Combine the above content, and your document detail page template may look like this (CSS styles are omitted for brevity):

{% extends 'base.html' %} {# 继承基础模板，通常包含头部、底部等公共部分 #}

{% block content %}
<article>
    {# 文档标题 #}
    <h1>{{archive.Title}}</h1>

    <div class="meta-info">
        {# 分类信息 #}
        <span class="category">
            所属分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a>
        </span>
        
        {# 发布时间 #}
        <span class="publish-time">
            发布日期：{{stampToDate(archive.CreatedTime, "2006年01月02日")}}
        </span>
        
        {# 更新时间（如果需要显示） #}
        {% if archive.UpdatedTime > archive.CreatedTime %} {# 仅在更新时间晚于发布时间时显示 #}
        <span class="update-time">
            更新日期：{{stampToDate(archive.UpdatedTime, "2006年01月02日")}}
        </span>
        {% endif %}
        
        {# 浏览量 #}
        <span class="views">
            阅读量：{{archive.Views}}
        </span>
    </div>

    {# 文档标签 #}
    <div class="tags">
        标签：
        {% tagList tags with itemId=archive.Id limit="10" %}
            {% for item in tags %}
                <a href="{{item.Link}}">{{item.Title}}</a>
            {% endfor %}
        {% endtagList %}
    </div>

    {# 文档内容 #}
    <div class="article-content">
        {{archive.Content|safe}}
    </div>
</article>
{% endblock %}

Please note,{{archive.Content|safe}}of|safeis a very important filter, it tells AnQiCMS to render HTML content (such as the content output by the rich text editor) as safe HTML directly, rather than escaping it. If your article content contains images, links, and other HTML tags, be sure to add|safe[en] Otherwise, these tags may be displayed as plain text.

Practical Suggestions and Tips

  • Template Location:The template file for the document details page is usually located in your template directory.{模型table}/detail.htmlFor example, if it is an article model, it might bearticle/detail.html.
  • Custom field:If you add custom fields (such as "author", "source") in the backend for the content model, you can also do so{{archive.你的自定义字段名}}[en] Show. If you want to cycle through all custom parameters, you can usearchiveParamsLabel.
  • [en] SEO Optimization:[en] Besides displaying the title and keywords in the page content, don't forget to usetdkTags in<head>[en] to set the page correctly<title>/<meta name="keywords">and<meta name="description">This will have a positive impact on search engine inclusion and ranking.
  • Debug variable:If you are uncertain during template development processarchiveYou can use it to see what data is in the variable.{{archive|dump}}The filter prints out all its structure and values, which is very helpful for debugging.

With these simple yet powerful tags and techniques, you can easily display all core information on the document detail page of AnQiCMS, providing your readers with a clear and comprehensive reading experience.

Common Questions (FAQ)

How to adjust the display order and style of information such as titles, categories, and time?The display order of this information is entirely dependent on the order in which you write the template HTML code.You can freely adjust their positions according to the design requirements.<h1>/<span>/<a>Then, by using a CSS file, you can control their font size, color, spacing, and other appearance styles.

2. Besides the article title, category, time, and view count, what other information can I display? archiveThe variable includes many built-in fields of the document, such asDescription[Summary],Logo(cover first image),Thumb[Thumbnail],Images[Image set] et al. In addition, if you have customized additional fields for the content model in the background