In the display of website content, the release time of the article and the number of views are important elements in conveying information to readers and enhancing the value of the content.A clear publication time allows readers to understand the immediacy or timeliness of the content, while the number of views can reflect the popularity of the content.AnQiCMS with its flexible template mechanism allows us to easily customize the display of this key information to adapt to the design style and user needs of different websites.

This article will delve into how to use the template tags provided by AnQiCMS to accurately control the display of article publishing time and page views, helping you create a more attractive and professional content page.

Understand the basics of AnQiCMS template tags

In AnQiCMS, the design philosophy of template tags is simple and powerful, similar to the syntax of Django template engine. When we want to display specific information of an article, we mainly use two types of tags: one is the double curly braces used to output variable content{{ 变量 }}A single curly brace followed by a percentage sign is used to control logic and functional implementation.{% 标签 %}For the core data related to the article,archiveDetailandarchiveListThey are the two tags we are most familiar with, used respectively to obtain detailed information about a single article and the data of article lists. In addition, AnQiCMS also provides a special time formatting feature.stampToDateTags, it can convert complex timestamps into readable dates and times.

Precisely customize the display of article publishing time.

The publication time of an article often carries the timeliness of the content, in AnQiCMS, the publication time of an article is indicated byCreatedTimethe field.

The publication time is displayed on the article detail page

When readers visit the detail page of an article, they usually pay attention to when the article was published. We can usearchiveDetailtags to get the current article'sCreatedTime. It is worth noting that,CreatedTimeThe label directly outputs a timestamp (for example1609470335such a numeric sequence), which is not intuitive for ordinary users. To solve this problem, we need to usestampToDateFormat labels.

stampToDateThe usage of the label is very flexible, it accepts two parameters: a timestamp and a target format string. This format string follows the GoLang time format specification, for example2006-01-02Represents year-month-date,15:04:05Represents hour:minute:second. You can combine these elements to create any date and time format as needed.

For example, if you want to display "Published on: August 15, 2023, 14:30" on the article detail page, you can write the template code like this:

<p>
    发布于：{% archiveDetail with name="CreatedTime" format="2006年01月02日 15:04" %}
</p>

This code first goes througharchiveDetail with name="CreatedTime"Get the current article creation time, thenformat="2006年01月02日 15:04"Parameter indicationarchiveDetailThe tag will directly format it into the display effect we want.

Display the publication time on the article list page

On the article list page, you may need to display the publish time for multiple articles. In this case, we will usearchiveListtags to traverse the article data. Inside the loop, the data of each article is represented by aitemVariables represent.

Assuming you have passed.archiveListObtained the list of articles, and in.forLoop through them, you can display the publication time of each article like this inside the loop:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>
                发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}
            </p>
            {# 其他文章内容展示 #}
        </article>
    {% endfor %}
{% endarchiveList %}

Here, item.CreatedTimeDirectly pass the timestamp tostampToDatethe function and display it in the format of "Year-Month-Day". This method is very efficient and concise on the list page.

flexibly display the article views

The number of page views of an article is a direct indicator of the popularity of the content, AnQiCMS stores it inViewsin the field.

Display the number of page views on the article detail page

On the article detail page, displaying the current article's view count is usually a way to enhance the interactivity of the page and the reader's trust. UsearchiveDetailtag to obtainViewsfield is very direct:

<p>
    浏览量：{% archiveDetail with name="Views" %} 次
</p>

This code will directly output the number of page views of the current article and add the word 'times' to make it more readable.

Display page views on the article list page

On the article list page, displaying the viewing volume of each article can help readers quickly filter out popular content.archiveListIn the loop, you can directly accessitem.Viewsto display it:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>
                发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }} | 阅读：{{ item.Views }} 次
            </p>
            {# 其他文章内容展示 #}
        </article>
    {% endfor %}
{% endarchiveList %}

Such that, the publication date and reading times of each article will be clearly displayed below the title.

Integrated application and **practice

Combine the publish time and views to provide richer context on the page.Whether it is an article detail page or a list page, you can place this information in the appropriate position according to your design requirements.For example, a common layout is to place them on a line below the article title or at the bottom of the article card.

An example of a common article detail page header information:

<article class="article-detail">
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
    <div class="article-meta">
        <span class="meta-item">
            <i class="fa fa-calendar"></i> 发布于：{% archiveDetail with name="CreatedTime" format="2006年01月02日 15:04" %}
        </span>
        <span class="meta-item">
            <i class="fa fa-eye"></i> 阅读：{% archiveDetail with name="Views" %} 次
        </span>
        {# 您还可以在这里添加作者、分类、标签等信息 #}
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }} {# 注意：当输出HTML内容时，使用 |safe 过滤器防止转义 #}
    </div>
</article>

By using the above method, you can very flexibly control the article posting time and the display of page views, making your AnQiCMS website content more vivid and professional.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I setCreatedTime, but the page shows a string of numbers instead of a date format?Answer:CreatedTimeThe label directly returns a UNIX timestamp, which is a computer-readable numeric format. To convert it to human-readable date and time, you need to use in conjunction withstampToDateLabel, and provide a GoLang formatted time string as the second parameter, for example{{ stampToDate(item.CreatedTime, "2006-01-02") }}.
  2. Ask: Can I display different formats of the publish time on different pages (such as the homepage, list page, detail page)?Answer: Absolutely.stampToDatelabel'sformatThe parameter is highly flexible. You can provide different format strings for different parts of the website according to your actual needs,stampToDatefor example, the homepage may only display,2006-01-02while the detail page displays2006年01月02日 15:04:05. Each call is independent and does not affect each other.
  3. Question: Besides the publication time and view count,archiveDetailandarchiveListwhat other article information can the tag display?Answer: These tags provide very rich article-related fields, such as article title (Title), link (Link), description (Description), keywords (Keywords), category ID (CategoryId), cover image(Logo/Thumb), article tags, etc. You can viewtag-/anqiapi-archive/142.htmlortag-/anqiapi-archive/141.htmldocument to learn about all available fields and their specific usage.