As an experienced website operations expert, I know that flexible time display in a content management system is crucial for improving user experience and content timeliness.Especially displays such relative time as "X days ago", "X hours ago", which allows readers to quickly understand the age of the content and better decide whether to delve deeper.Today, let's delve into the built-in features of the Anqi CMS template.stampToDateCan the label realize this relative time display, and how should we implement it.
In the AnQi CMS template,stampToDateCan it be implemented to display relative time such as 'X days ago', 'X hours ago'?
For this question, we first need to clarify the context of Anqi CMS.stampToDateThe positioning and function of the label. From the document description of Anqi CMS, we can clearly see that,stampToDatedefined as a "timestamp formatting label", its usage method is{{stampToDate(时间戳, "格式")}}. The 'format' is the key, it follows the time formatting rules of the Go language itself, for example"2006年01月02日"/"2006-01-02 15:04:05"etc.
This means,stampToDatelabel'sThe core function is to accurately convert a Unix timestamp (usually a 10-digit number) into a specified format,absolutedate and time string. It can perfectly output fixed time points such as 'October 27, 2023 14:30:00' or '10/27/23'.
However, displays such as “X days ago”, “X hours ago” are not simple formatting operations, they require a series oftime difference calculationsFirstly, obtain the current time, then calculate the difference in hours, days, months, or even years between the current time and the publication time, and then dynamically select an appropriate description based on the size of the difference.stampToDateThe tag itself does not have built-in complex logic to perform time difference calculation and intelligent judgment.
Therefore, it is directly using the Anqi CMS template.stampToDateThe tag isCannot be implemented directly.“X days ago”, “X hours ago” such relative time display. It focuses on presenting timestamps in a preset format rather than performing time comparison and dynamic output.
Implement 'X days ago' relative time display: The way of bending over backwards
AlthoughstampToDateIt is not possible to directly implement relative time display, but this does not mean that we are at a loss in Anqi CMS.As operators, we are always able to find flexible ways to meet the needs of content display.Generally, we would achieve this function through the following two main approaches:
Method one: Implement using front-end JavaScript
This is the most common and flexible way to implement the 'X days ago' feature on a webpage.The core idea is: the Anqi CMS template outputs the original timestamp (or a standard date string) of the article to the front-end HTML, and then uses JavaScript to calculate and display it on the user's browser side.
Template output of the original timestamp:In the document details or list template of AnQi CMS, we can use
archiveDetailorarchiveListTags, combined withCreatedTimefield to output the creation timestamp of the article. For example:<span class="post-time" data-timestamp="{{ item.CreatedTime }}"></span>Here
CreatedTimeIt is usually a Unix timestamp, which JavaScript can use directly.Front-end JavaScript calculation and display:After the page is loaded, write JavaScript code:
- Get all elements with
data-timestampattributes. - For each element, read its
data-timestampValue. - Get the current Unix timestamp.
- Calculate the difference between the current timestamp and the article timestamp (milliseconds).
- Convert the millisecond difference to units such as seconds, minutes, hours, and days.
- Based on the converted value, judge and generate the text 'X seconds ago', 'X minutes ago', 'X hours ago', 'X days ago', 'X months ago', or even 'X years ago'.
- Update the generated text to the corresponding
<span>element.
To simplify this process, you can use mature JavaScript libraries such as
moment.jsordate-fnsThey provide very convenient APIs for handling date and time calculations and formatting, including the display of relative time.Even without using a library, pure JavaScript can be implemented, but the amount of code will be slightly larger.Advantage:High flexibility, can customize various relative time display rules on the front end; does not increase the computational burden on the server side.Shortcomings:The content relies on client-side JavaScript execution; users with JavaScript disabled will not be able to display it; there may be a slight content 'flicker', that is, the default time is displayed first (if set), and then replaced by JavaScript.
- Get all elements with
Method two: Through custom filters or backend logic extension (for developers)
If there is an extreme requirement for front-end performance or if you want this logic to be completely controlled by the backend, then you need to make certain modifications to the Anqi CMSsecondary development or expansion.
AnQi CMS is developed based on Go language, and its template engine supports the extension mechanism of "more filters". In theory, a Go language developer can:
- Develop a custom Go language functionThe function takes a timestamp and returns a calculated relative time string (such as "3 days ago").
- Register this Go function as a new filter for Anqi CMS templateFor example, name it
time_ago. - After that, you can call it as conveniently as other filters in the template:
{{ item.CreatedTime|time_ago }}.
Advantage:Generated entirely on the server side, no JavaScript required, more SEO-friendly (because the text directly captured by search engines is relative time text); consistent performance.Shortcomings:Need Go language development capabilities, involves modifying or extending the core code of Anqi CMS, which has a relatively high threshold for ordinary operators.The document does not directly mention a similar built-in relative time filter, indicating that it is not a standard feature of the Anqie CMS.
Why does AnQi CMS not provide this feature directly?
From the project positioning and technical characteristics of Anqi CMS, its design focuses on 'high efficiency, customizable, easy to expand' and 'simple and efficient system architecture'.stampToDateThe design philosophy may be more inclined to provide a basic and high-performance timestamp formatting tool, leaving the complex and variable time difference calculation and display logic to developers or front-end scripts to implement.
Relative time display has many conventions and internationalization requirements, such as "just now", "one minute ago", "59 seconds ago", etc. Different languages and cultures have different preferences for the granularity and accuracy of these descriptions.Transfer these general but variable logic to the front-end for processing, which can prevent the CMS core system from becoming bloated and allow users to highly customize according to their own needs, which conforms to its 'highly customized' advantage.
In summary, AnQi CMS'sstampToDateThe label is a powerful timestamp formatting tool used to convert Unix timestamps into variousabsoluteDate time format. If we need to implement something like "X days ago", "X hours ago" in the Anqi CMS templateRelativeThe most direct and recommended approach for displaying time is to output the original timestamp in the template and then use front-end JavaScript (with or without libraries) for calculation and rendering.For teams with development capabilities, also consider extending custom filters through the backend Go language to implement.
Frequently Asked Questions (FAQ)
Q1: How do I ensure that the front-end JavaScript I getCreatedTimeis an accurate timestamp?A1: Anqi CMS'archiveDetailandarchiveListin the labelCreatedTimeThe field will usually return a Unix timestamp (10 digits). You can output it directly to the HTML element in the template.data-timestampIn the property, JavaScript can directly read this property value and treat it as milliseconds (if you need to convert it to seconds, divide by 1000) for calculation, or convert it to a Date object.
Q2: Will implementing relative time display with front-end JavaScript have a negative impact on website performance or SEO?A2: For most modern websites, this front-end processing time is very short, and it has a negligible impact on user experience performance.As long as your JavaScript code is optimized and does not block the page rendering, it is not a big deal.As for SEO, the main content (including the publication date) is usually present in the standard format in the HTML source code, and search engines can normally crawl it.Relative time display is just a dynamic effect that beautifies and enhances the user experience, usually it will not have a significant negative impact on core SEO ranking, unless your website heavily relies on relative time as main content.
Q3: Can the front-end JavaScript solution support the display of 'X days ago' in multiple languages?A3: Absolutely. Front-end JavaScript can calculate the time difference and then, based on the current page's language environment (for example, by usingnavigator.languageOr the language variable output by the template) loads different language packages, then generates the corresponding relative time text according to the definitions in the language package. Many popular JavaScript date libraries (such asmoment.jsordate-fnsAll of them have built-in powerful internationalization (i18n) support, allowing for easy implementation of multi-language relative time display.