How to align the date and time stamp to the right to 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 meet this requirement.

Understanding the date handling method of AnQiCMS

AnQiCMS handles date and time by storing it in the form of a timestamp. This means that it can be directly called in the template.{{ archive.CreatedTime }}It 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 tagstampToDateIts role is to convert the original timestamp into a date and time format that we can understand.

stampToDateThe usage method is{{ stampToDate(时间戳, "格式") }}. The format is a key point, it follows the time formatting rules specific to the Go language. Unlike many other languages, it usesY-m-d H:i:sPlaceholders vary, Go language uses a fixed reference time2006-01-02 15:04:05as a template format. For example, if you want to display年-月-日, the format string will be written as2006-01-02; if you want to display年-月-日 时:分:秒it is written as2006-01-02 15:04:05.

First step: Get and format the date and time

First, we need to go through 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 into年-月-日 时:分in the form, we can operate as follows:

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

Here, we first use:archiveDetailLabel to get the current article'sCreatedTime(Create timestamp) Assign it to a temporary variablearchiveDataThen, we usestampToDateLabels willarchiveDataConvert toYYYY-MM-DD HH:MMFormatted string, and store the result informattedDatethis variable. Now,formattedDateit contains the date and time string we want to display.

Step two: Align to the right with a specified length

Next, to make the date string 'right-aligned to a specified length', we are not just relying on CSS styles to control the alignment of the entire element, but rather to process the date string itself to ensure that it always occupies a fixed character width when displayed, and the content is aligned to the right with spaces filled on the left.

AnQiCMS template engine provides a series of string processing filters to help us achieve this, the most suitable one for achieving right alignment and fixed length effect isrjust(right justify, right-aligned) filter.

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

For example, if we wantformattedDateThe date string in the variable always occupies 20 characters in width, and the insufficient part is filled with spaces on the left, it can be used like thisrjust:20:

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

Now, we combine the functionality of formatting dates and right alignment. First, we usestampToDateformat the timestamp, and then pass the result through a pipeline|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, and aligned to the right, regardless of the actual length of the date string (as long as it does not exceed 20 characters).

Combine CSS to optimize the final display

AlthoughrjustThe filter ensures that the date string itself has a fixed width and content alignment on the right, but in the actual page layout, you may also want the entire date display area to be on the right side of the page. At this point, we can combine traditional CSS styles to control the 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 correctlyrjustFilter-filled spaces, otherwise the browser may automatically collapse multiple spaces.

A complete example (code snippet)

Here is a complete template example that aligns the publish date and update date to the specified length on the right:

<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 date and time stamps on the article detail page of AnQiCMS, thereby enhancing the professionalism and user experience of the website content.

Frequently Asked Questions (FAQ)

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

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

2.stampToDateof2006-01-02 15:04:05What does it mean? How do I display the day of the week or Chinese date?

`2006-01-02 15:04