In website content operation, providing users with a smooth reading experience is the key to enhancing user stickiness.When the reader is immersed in an excellent article, it is natural to want to easily jump to related content, especially the previous or next one.It is not difficult to achieve this in AnQiCMS, such an efficient and customizable content management system.Today, let's delve into how to cleverly retrieve and display the title of the previous article in the AnQiCMS template.
AnQiCMS template: Intuitive and flexible integration
AnQi CMS with its high-performance architecture based on the Go language provides a concise and powerful content management capability.On the template level, it adopts a syntax similar to the Django template engine, which is undoubtedly a great convenience for operators or front-end engineers familiar with web development.Through double curly braces{{变量}}Get variable value, 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 obtain 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 that can help us easily extract the required data from the database and display it in the way we want.
Core revelation:prevArchiveThe use of tags
In AnQiCMS, there is a tag specifically used to get information about the previous article of the current article.prevArchive. This tag is very smart, it can automatically find and return the previous article in the same category as the article being browsed.
Basic usage method
prevArchiveThe label usage is very concise and clear. You need to wrap it using{% prevArchive 变量名 %}such a structure, where变量名is a temporary variable you define for the data of the last article you got, for exampleprev.
This is a basic example:
{% prevArchive prev %}
<!-- 在这里可以访问 prev 变量中的上一篇文章信息 -->
{% endprevArchive %}
OnceprevOnce a variable is assigned, you can access its properties through 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 providedTitle(Title) andLink(Link) these two core attributes.
However, we first need to consider a practical situation: the current article may already be the first article in the category, in which case there is no "previous article". Therefore, a conditional judgment should be added to the template.{% if prev %}It is very important, this can ensure that the display is only performed when the previous article exists, thus avoiding the embarrassment of page errors or empty content.
This is a commonly used 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. Then, by{% if prev %}the judgment.prevCheck if it is empty. If it exists, we will use{{ prev.Link }}and{{ prev.Title }}Output the link and title of the previous article. If there is no previous article, then display the prompt 'There is no previous article'.This way, no matter on which article page, users can get a friendly navigation experience.
More practical information to obtain
Besides titles and links,prevArchiveTags also provide other practical fields, you can flexibly call them according to the design requirements of the website, for example:
Id.: The ID of the previous article.Description.: The introduction of the previous article.Thumb: The thumbnail address of the previous article.CreatedTime: The publication time of the previous article (timestamp, usually obtained through){{stampToDate(prev.CreatedTime, "2006-01-02")}}for formatting).
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>
In this way, you can freely organize and display various information of the previous article according to the page layout and user experience requirements.
Combine with the navigation of the next article to create 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. AnQi CMS also provides the correspondingnextArchiveTags, their usage isprevArchiveidentical.
Combine both, and 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 used an extratruncatechars:35A filter used to automatically truncate and add an ellipsis when the title is too long to maintain a neat page layout, which is especially important on mobile devices.This navigation is not only functional, but also greatly enhances the discoverability of website content and the user's reading experience.
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 a seamless content navigation experience together. Anqi CMS is committed to providing highly customizable solutions, and these template tags are just the embodiment of its flexibility, helping content operators to efficiently improve the user experience of the website.
Frequently Asked Questions (FAQ)
How to get the title of the next article?
To get the title of the next article, you can use withprevArchivethe label that corresponds to thenextArchivelabel. The usage is similar to:
{% 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, thenprevArchiveThe tag will not find the corresponding previous article, at this point we set upprevThe variable will be null (nil). Therefore, we usually use it in the template{% if prev %}to make a judgment. WhenprevWhen empty, it will execute{% else %}The content in the code block, for example, displaying a prompt information such as 'No previous article' to maintain the integrity and user experience of the page.
3. In addition to the title, what other information about the previous article can I obtain?
In addition to the title (Title) you can also useprevvariables to obtain various properties of the previous article, such as:
Link: The full link of the article.Id: The unique ID of the article.Description: The brief description of the article.Thumb: The thumbnail of the article.