How to display the title, category, time, and other core information on the AnQiCMS document detail page?

Manage 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, publication time, and other key information on the document detail page of AnQiCMS.

AnQiCMS uses a concise syntax similar to the Django template engine, which makes it very intuitive to call various data when customizing templates. For the document detail page, the system usually provides a default namedarchiveThe global variable, which contains all the detailed data of the current document. This means that we can directly accessarchive.字段名in a simple way to obtain and display the required 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 (usuallydetail.htmlOr you can use a template customized according to the content model{{archive.Title}}to display the title. Usually, we would place it in<h1>tags to highlight their importance and be SEO-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 the tag totdkTag to automatically obtain:

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

HeresiteName=trueIt will automatically add the website name at the end of the title,sepProperty (default as-) can be used to define a delimiter.

Display the document's category

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

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

here,archive.CategoryIt is an object that contains detailed information about the classification of the current document, such as the classification linkLinkand the classification nameTitle. Click on the category name, and readers can jump to the list page of that category.

Show the document publishing and update time

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

For example, display the publication time:

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

Here"2006-01-02 15:04"It is the time formatting standard of Go language, which represents specific year, month, day, hour, and minute. You can adjust this format as needed, such as displaying only the date.("2006-01-02")Or more detailed time("2006-01-02 15:04:05"). If the article is updated, you can also similarly display the update time{{stampToDate(archive.UpdatedTime, "2006-01-02")}}.

Enrich page information: View count and tags

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

Views: {{archive.Views}}It can directly display the number of reads of the article, increasing the attractiveness of the article.

Document Tag:Tags can help readers quickly understand the main keywords of the article and find more related content. AnQiCMS goes throughtagListTags to get the list of related tags of the article and need to be combined withforloop to iterate 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 tags of the current document,limit="10"which limits the maximum number of tags displayed to 10.

Integration of code examples

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

{% 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|safeIt is a very important filter that tells AnQiCMS to render HTML content (such as the output from a 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|safeThese tags may be displayed as plain text if not specified.

Practical suggestions and tips

• Template location:The template files for the document detail page are usually located in your template directory.{模型table}/detail.htmlFor example, if it is an article model, it may bearticle/detail.html.
• Custom field:If you add custom fields (such as "author", "source") in the background for the content model, you can also do so by{{archive.你的自定义字段名}}Display. If you want to loop through all custom parameters, you can usearchiveParams.
• SEO optimization:Don't forget to use in addition to displaying titles and keywords in the page contenttdkThe tag is in<head>to set up 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 unsure during template development processarchiveYou can use to see what data is in the variable.{{archive|dump}}The filter prints out all its structures 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.

Frequently Asked Questions (FAQ)

How to adjust the display order and style of titles, categories, time, and other information?The display order of this information is entirely dependent on the order you write in the template HTML code.You can freely adjust their positions according to design requirements. As for the style, AnQiCMS front-end template is essentially HTML and CSS, you just need to add the corresponding HTML tags to this information in the template file (such as<h1>/<span>/<a>)，then control their font size, color, spacing, and other appearance styles through the CSS file.

2. Besides the article title, category, time, and view count, what other information can I display? archiveVariables include many built-in fields of the document, such asDescription(Summary),Logo(Cover main image),Thumb(thumbnail),Images(Group image) etc. Moreover, if you have customized additional fields for the content model in the background