How to align the date and time stamp to the right with a specified length on the AnQiCMS article detail page?

On the article detail page of the website, we often hope that the publication date or update date of the article can be displayed neatly. Sometimes, we also need them to be aligned to the right and occupy a fixed width, so that the page looks professional and beautiful.AnQiCMS provides flexible template tags and filters to help us easily achieve this requirement.

Understanding the date handling method of AnQiCMS

AnQiCMS usually stores dates and times in the form of timestamps when processing. This means that you can directly call in the template.{{ archive.CreatedTime }}The result is a string of numbers, not the one we are accustomed to2023年01月01日This format. To make these timestamps readable, AnQiCMS has built-in a very practical template tagstampToDateIt's used to convert the original timestamp into a date and time format that we can understand.

stampToDateThe usage of is{{ stampToDate(时间戳, "格式") }}The "format" is a key point, it follows the unique time formatting rules of the Go language. Unlike many other languages usingY-m-d H:i:sThis placeholder is different, Go language uses a fixed reference time2006-01-02 15:04:05as a template for formatting. For example, if you want to display年-月-日then the format string should be written as2006-01-02；if you want to display年-月-日 时:分:秒，and it will be written as2006-01-02 15:04:05.

First step: Get and format the date and time

Firstly, we need to find the template of the article detail page,archiveDetailLabel to get the creation time or update time of an article. For example, to get the current creation time of the article and format it as年-月-日 时:分The form, we can operate like this:

{% archiveDetail archiveData with name="CreatedTime" %}
{% set formattedDate = stampToDate(archiveData, "2006-01-02 15:04") %}

Here, we first usearchiveDetailTag the current article'sCreatedTimeAssign the timestamp of creation to a temporary variablearchiveData. Then, we usestampToDatetags toarchiveDatatoYYYY-MM-DD HH:MMa formatted string, and store the result informattedDatethis variable. Now,formattedDateIt includes the date and time string we want to display.

Step 2: Implement right alignment of a specified length.

To right-align a date string to a specified length, it is not just the CSS style that controls the alignment of the entire element, but the date string itself needs to be processed to ensure that it occupies a fixed character width when displayed, with the content aligned to the right and spaces filled on the left.

AnQiCMS template engine provides a series of string processing filters to help us achieve this, and the most suitable one for implementing right alignment and fixed length effect isrjustFilter for right justification.

rjustThe role of the filter is to pad spaces on the left side of a string until the string reaches the specified total length. Its usage is{{ 变量 | rjust:目标长度 }}.

For example, if we wantformattedDateThe date string in the variable always occupies a width of 20 characters, and the insufficient part is filled with spaces on the left, which can be used in this wayrjust:20:

{% set alignedDate = formattedDate | rjust:20 %}
{{ alignedDate }}

Now, we combine the functionality of formatting dates and right alignment. First, usestampToDateformat the timestamp, and then pass this result through the pipe character|Pass torjustFilter.

{% archiveDetail archiveData with name="CreatedTime" %}
{% set formattedAndAlignedDate = stampToDate(archiveData, "2006-01-02 15:04") | rjust:20 %}
<span class="article-date">{{ formattedAndAlignedDate }}</span>

This will be padded to a length of 20 characters, right-aligned, regardless of the actual length of the date string (as long as it does not exceed 20 characters).

Combine CSS to Optimize Final Display

AlthoughrjustThe filter ensures the fixed width and right-aligned content of the date string itself, but in the actual page layout, you may also want the entire date display area to be located on the right side of the page. At this time, we can combine traditional CSS styles to control its parent container or<span>The floating or text alignment of the element.

For example, based on the above code, we can add some styles to the<span>tag:

<style>
    .article-date {
        float: right; /* 让日期元素浮动到右侧 */
        display: block; /* 确保float生效，或者使用inline-block */
        /* font-family: "Courier New", monospace; /* 可以选择等宽字体，让空格效果更明显 */ */
        white-space: pre; /* 保留 `rjust` 填充的空格 */
    }
    /* 或者，如果父容器是flex或grid，可以直接用对齐属性 */
    .article-info-container {
        display: flex;
        justify-content: flex-end; /* 在flex容器中将内容靠右对齐 */
    }
</style>

<div class="article-info-container">
    <span>发布人：AnQiCMS用户</span>
    {% archiveDetail archiveData with name="CreatedTime" %}
    {% set formattedAndAlignedDate = stampToDate(archiveData, "2006-01-02 15:04") | rjust:20 %}
    <span class="article-date">{{ formattedAndAlignedDate }}</span>
</div>

Please notewhite-space: pre;This CSS property is very important because it ensures that the browser displays it correctly.rjustFilter-filled spaces, otherwise the browser may automatically collapse multiple spaces.

A complete example (code snippet)

Below is a complete template example where the publish date and update date are aligned to the right at a specified length:

<style>
    .article-meta {
        overflow: hidden; /* 清除浮动 */
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .article-meta span {
        display: inline-block;
        margin-right: 15px;
    }
    .article-meta .date-display {
        float: right;
        font-family: "Courier New", monospace; /* 使用等宽字体以确保对齐效果 */
        white-space: pre; /* 保留 rjust 填充的空格 */
        margin-right: 0; /* 右侧不需要外边距 */
    }
</style>

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>

    <div class="article-meta">
        <span>发布者：AnQiCMS</span>
        <span>阅读量：{% archiveDetail with name="Views" %}</span>

        {% archiveDetail createdTimeData with name="CreatedTime" %}
        {% set formattedCreatedDate = stampToDate(createdTimeData, "2006-01-02 15:04") %}
        <span class="date-display">发布日期：{{ formattedCreatedDate | rjust:20 }}</span>
        
        {% archiveDetail updatedTimeData with name="UpdatedTime" %}
        {% set formattedUpdatedDate = stampToDate(updatedTimeData, "2006-01-02 15:04") %}
        <span class="date-display">更新日期：{{ formattedUpdatedDate | rjust:20 }}</span>
    </div>

    <div class="article-content">
        {% archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

By following these steps, you can elegantly control the display format, fixed length, and right alignment of the date and time stamps on the article detail page of AnQiCMS, thereby enhancing the professionalism and user experience of the website content.

Common Questions (FAQ)

1. Why does the date formatting not align as expected, or not display the specified length?

This usually has several reasons. First, please checkrjustWhether the 'target length' set in the filter is sufficient to accommodate the formatted date string you have. If the target length is too short,rjustthe string will not be truncated. Next, make sure that in the application ofrjustOn the HTML element of the filter, you have already addedwhite-space: pre;orwhite-space: pre-wrap;the CSS properties so that the browser will not collapserjustthe filled spaces. In addition, using monospaced fonts (such asmonospaceCharacter sets can help achieve more precise character alignment visually.

2.stampToDateof2006-01-02 15:04:05What does it mean? How can I display weekdays or Chinese dates?

2006-01-02 15:04