In website content operation, providing users with a smooth reading experience is the key to enhancing user stickiness.When readers immerse themselves in a fascinating article, they naturally wish to conveniently jump to related content, especially the previous or next article.In an efficient and customizable content management system like AnQiCMS, achieving this is not difficult.Today, let's delve into how to cleverly obtain and display the title of the previous article in AnQiCMS templates.
AnQiCMS template: The combination of intuitive and flexible
AnQi CMS provides a concise and powerful content management capability with its high-performance architecture based on the Go language.At the template level, it uses syntax similar to the Django template engine, which is undoubtedly a great convenience for operators or front-end engineers familiar with web development.{{变量}}Retrieve variable values, as well as single curly braces and percent signs{% 标签 %}Perform logical control or call specific functions, AnQiCMS makes template creation both intuitive and flexible.
To get the title of the previous article, we mainly rely on the built-in 'Template Tag' feature of AnQiCMS.These tags are like pre-set functions, which can help us easily extract the required data from the database and display it in the way we want.
Core Revelation:prevArchiveUse of tags
In AnQiCMS, the tag specifically used to get the information of the previous article of the current article isprevArchiveThis tag is very intelligent, it can automatically find and return the previous article in the same category as the article being viewed.
Basic usage method
prevArchiveThe usage of the tag is very simple and clear. You need to use{% prevArchive 变量名 %}such a structure to wrap it, where变量名is a temporary variable you define for the data of the last article you obtained.prev.
This is a basic example:
{% prevArchive prev %}
<!-- 在这里可以访问 prev 变量中的上一篇文章信息 -->
{% endprevArchive %}
OnceprevOnce a variable is assigned, you can access its properties using the dot (..) such as the title, link, thumbnail, etc.
Get the title and link of the previous article.
The most common requirement is to display the title of the previous article and provide a jump link.prevArchiveTags provideTitle(Title) andLink(Link) these two core properties.
However, we first need to consider a practical situation: the current article may already be the first article in this category, at which point there is no "previous article". Therefore, a conditional judgment should be added to the template{% if prev %}It is very important, which ensures that the display is only performed when the previous article exists, thus avoiding the embarrassment of page errors or empty content.
Here is a common code snippet to get the title and link of the previous article:
<div class="prev-article-nav">
{% prevArchive prev %}
{% if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{{ prev.Title }}
</a>
{% else %}
<span>没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
</div>
In this code, we first use{% prevArchive prev %}Assign the data of the previous article toprevthe variable. Next, by{% if prev %}JudgmentprevIs it empty. If it exists, we can use{{ prev.Link }}and{{ prev.Title }}Output the link and title of the previous article.If there is none, it will display the prompt 'No previous article'.So, no matter on which article page, the user can obtain a friendly navigation experience.
For more practical information
Besides the title and link,prevArchiveTags also provide other practical fields, which you can flexibly call according to the design requirements of the website, for example:
Id: The ID of the previous article.Description: The summary of the previous article.ThumbThe thumbnail URL of the previous article.CreatedTimeThe publish time of the previous article (timestamp, usually needs to be through){{stampToDate(prev.CreatedTime, "2006-01-02")}}to be formatted).
For example, if you want to display a thumbnail next to the title:
<div class="prev-article-nav">
{% prevArchive prev %}
{% if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="prev-article-thumb" />{% endif %}
{{ prev.Title }}
</a>
{% else %}
<span>没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
</div>
By this means, you can freely organize and display various information from the previous article according to the layout of the page and the needs of user experience.
Combine the navigation of the next article to build a complete experience
Generally, at the bottom of the article detail page, we provide navigation to the previous and next articles to form a complete reading loop. The Anqi CMS also provides the correspondingnextArchiveLabel, its usage is the same as.prevArchiveCompletely consistent.
By combining both, you can build a perfect navigation block:
<div class="article-pagination-nav clear">
<div class="prev-article-link float-left">
{% prevArchive prev %}
{% if prev %}
<span class="nav-label">上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}" class="nav-title">
<i class="icon-arrow-left"></i> {{ prev.Title|truncatechars:35 }}
</a>
{% else %}
<span class="nav-label">上一篇：</span><span class="nav-none">没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article-link float-right text-right">
{% nextArchive next %}
{% if next %}
<span class="nav-label">下一篇：</span>
<a href="{{ next.Link }}" title="{{ next.Title }}" class="nav-title">
{{ next.Title|truncatechars:35 }} <i class="icon-arrow-right"></i>
</a>
{% else %}
<span class="nav-label">下一篇：</span><span class="nav-none">没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Here we also use an extra:truncatechars:35Filter used to automatically truncate and add an ellipsis when the title is too long, to maintain the page layout neatly, which is especially important on mobile devices.This navigation is not only functionally complete, but also greatly enhances the discoverability of website content and the reading experience of users.
Summary
To get the title of the previous article in AnQiCMS, it is throughprevArchiveThis powerful and intuitive template tag implementation. Combined with simple conditional judgments, you can not only ensure the robustness of navigation but also display more information as needed, such as links, thumbnails, and even withnextArchiveBuild seamless content navigation experiences together with tags.AnQi CMS is committed to providing highly customizable solutions, and these template tags are a reflection of its flexibility, helping content operators to more efficiently enhance the user experience of the website.
Common Questions (FAQ)
How to get the title of the next article?
You can use the same method asprevArchivethe tag feature corresponds tonextArchivethe tag. The usage is similar:
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
{% else %}
<span>没有下一篇文章了</span>
{% endif %}
{% endnextArchive %}
2. If the current article is the first in the category,prevArchiveWhat will be displayed?
If the current article is the first article in its category,prevArchiveThe label will not find the corresponding previous article, at this time we set theprevthe variable will be an empty value (nil). Therefore, we usually use in templates to{% if prev %}make a judgment. WhenprevWhen empty, it will execute{% else %}Content in the code block, such as displaying a prompt message like 'No previous article' to maintain the integrity and user experience of the page.
3. Besides the title, what other information can I get from the previous article?
Besides the title (Title), you can also accessprevvarious properties of the previous article through variables, such as:
Link: The full link to the article.Id: The unique ID of the article.Description: A brief description of the article.Thumb: The thumbnail of the article.