How to use the `add` filter to dynamically add 'Published on:' before the blog post's publish time?

When operating a blog, we often hope that the publication time of the articles can be presented in a more intuitive and brand style.For example, adding "Published on:" before the date makes it clear to the reader that this is a published article.AnQiCMS (AnQiCMS) with its flexible template engine makes such customization very simple.addFilter, dynamically adds the text 'Published on:' before the publication time of blog posts.

Core tool analysis: understandaddFilters andstampToDateTag

To implement this feature, we need to use two key features of the AnQiCMS template engine:archiveDetailtags,stampToDateTags andaddfilter.

1. archiveDetailTagIn the article detail page,archiveDetailTags are the entry points to obtain all the detailed information of an article. Through it, we can easily obtain the article's publication time field, usuallyarchive.CreatedTime. ThisCreatedTimestored in the form of timestamps.

2. stampToDateTagdue toarchive.CreatedTimeIt is a timestamp, we need to convert it to the date and time format we are accustomed to.stampToDateThe tag is born for this. It can format Unix timestamps according to the Go language time format string you specify. For example,{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}It will format the timestamp into the form "2023 February 09 10:30" such as this.

3. addFilter addThe filter is the main character of this operation.Its function is very direct - it adds two values.Here, the 'addition' does not only refer to the addition of numbers, but more importantly, it supports string concatenation.This means that we can use it to concatenate the string 'Published at:' with the formatted date string.{{ obj|add:obj2 }}For example,{{ "你好"|add:"世界" }}It will display "Hello World".

Practice Exercise: Implement Custom Display Step by Step

Now, let's apply these tools step by step to your blog article detail page

Step 1: Locate Your Template File

Generally, the template file for the blog article detail page is located in the current theme directory of you.archive/detail.html.You can edit online through the 'Template Design' -> 'Template Management' feature in the AnQiCMS backend, or find and edit the file through FTP or other file management tools.

Step 2: Find the code for the article publish time.

Open.archive/detail.htmlFile, find the code segment that displays the article's publication date. It might look like this:

<span>{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</span>

Or even simpler:

<span>{{archive.CreatedTime}}</span>

Step 3: Combine usagestampToDateandaddFilter

Once we find the existing date display code, we can start modifying it.

First, make sure yourCreatedTimehas beenstampToDateFormat into a readable string. If not yet, please wrap it first:

{% set formattedTime = stampToDate(archive.CreatedTime, "2006年01月02日 15:04") %}

Here we usesetThe label assigns the formatted time to a temporary variableformattedTimeThis makes the code clearer.

Next, we will concatenate the string "Published on: " withformattedTimethe variable throughaddand join it with the filter:

{{ "发布于："|add:formattedTime }}

Step 4: Apply the modified code to the template

Replace the above code with the original date display code you found in step two. The complete code block may look like this:

Example before modification:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
        <span>{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</span> {# 或者直接是 {{archive.CreatedTime}} #}
        <span>{% archiveDetail with name="Views" %}°</span>
    </div>
    {# ... 文章内容及其他部分 ... #}
</article>

Example after modification:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
        {# 在这里插入我们组合好的发布时间 #}
        <span>
            {%- set formattedTime = stampToDate(archive.CreatedTime, "2006年01月02日 15:04") -%}
            {{ "发布于："|add:formattedTime }}
        </span>
        <span>{% archiveDetail with name="Views" %}°</span>
    </div>
    {# ... 文章内容及其他部分 ... #}
</article>

Please note{%- set ... -%}The dashes on both sides, their role is to remove any blank lines that the tag itself may have generated, making the final HTML output cleaner.

Save the template file you have modified.

Step 5: Clear system cache

To ensure that your changes take effect immediately, please log in to the AnQiCMS backend, click the "Update Cache" button at the bottom of the left menu, and clear all system caches.After that, refresh your blog article detail page, and you should be able to see that the word 'Published on:' has been dynamically added in front of the publish time.

温馨提示

• Backing up is a good habit: Before making any changes to a template file, please be sure to back up the original file, in case of any issues you can recover quickly.
• Applicable to all time fields: addFilters andstampToDateLabels are not only suitable for the article publish timeCreatedTimeYou can also apply it to the article update timeUpdatedTimeOr any timestamp field.
• The flexibility of string formatting: stampToDateThe time format string in the label is based on the Go language formatting standard, which is very flexible. You can adjust it as needed, such as displaying only year, month, and day, or adding the day of the week, etc.

By following these steps, you have successfully utilized the template features of AnQiCMS to add a custom prefix to the publication time of your blog posts.This not only improves the personalization of the website, but also brings a clearer and more user-friendly reading experience to the readers.

Frequently Asked Questions (FAQ)

Q1: Does the prefix 'Published on:' only appear on the article detail page? What should I do if I want to display it on the article list page? A1:Yes, the modification demonstrated here is for the article detail page template (usuallyarchive/detail.html). If you want to modify the article list page (for examplearchive/list.htmlor the homepageindex.html) Also display the article time with "Published on:", you need to find the template files where the article list is displayed in a loop (usually usingarchiveListThe part marked) should then be modified at the corresponding date display location according to the method provided in this article.

Q2: Can I add other text or HTML tags besides “Published on:”? A2:Of course you can.addThe filter can concatenate any string, including strings with HTML tags. For example, if you want to use a single<em>Label it and prepend with 'Published on:' like this:{{ "发布于：<em>"|add:formattedTime|add:"</em>" }}Please note that if the concatenated content contains HTML tags, you may need to use the outermost one|safefor example, a filter (such as{{ "发布于：<em>"|add:formattedTime|add:"</em>"|safe }})，to ensure that the browser can correctly parse HTML rather than displaying it as plain text.

Q3: If I modified the template file and cleared the cache, but I didn't see any changes on the page, what could be the reason? A3:In this situation, you can check from the following aspects:

1. Syntax error:Please carefully check if there are any spelling errors, unclosed tags, and other syntax issues in the code you have modified.The AnQiCMS Go template engine has strict syntax requirements, any small error can cause template parsing to fail.
2. **Template