Enhance user experience: Flexibly use in Anqi CMS article pageprevArchiveTags, create smooth navigation
As an experienced website operations expert, I know how important it is to have a smooth user experience when browsing content.In the era of information explosion, guiding users to naturally transition to the next related content after the end of a page can not only effectively increase users' stay time on the website and reduce the bounce rate, but is also a key link in optimizing the internal link structure of the website and helping the SEO performance.prevArchiveTags are the tools we cleverly build navigation in the article detail page to enhance user experience.
AnQi CMS, with its high-performance architecture, modular design, and powerful SEO tools, aims to provide an efficient and customizable content management solution for small and medium-sized enterprises and content operation teams.It deeply understands the essence of content operation, encouraging us to transform technical capabilities into visible value through refined template design.prevArchiveTags, bring a smoother reading journey to your website.
UnderstandingprevArchiveCore features and context of tags
First, let us clearly understandprevArchiveThe use of tags. As the name suggests,prevArchiveThe tag (previous article) is specifically used to retrieve the data of the "previous article" on the current article detail page.The cleverness of its design lies in its powerful contextual awareness.When you use this tag on an article detail page, Anqi CMS will intelligently judge the position of the current article in the entire content sequence and automatically retrieve the previous article that is logically adjacent to it.This means that you do not need to manually input any article ID or other parameters, the system can automatically complete this complex search work, greatly simplifying the difficulty of template development.
prevArchiveThe tag itself is very concise, its basic usage is{% prevArchive prev %}...{% endprevArchive %}. Here,prevIt is a temporary variable name defined for the data of the previous article, you can name it according to your preference, for examplepreviousArticleThis tag wraps a content block, in which you can access the various properties of the previous article, such as the article ID (Id），Title（Title), link (Link)，and thumbnail (Thumb) and other document model custom fields, etc. These rich properties provide us with infinite possibilities for designing diverse navigation for the previous article.
Flexible applicationprevArchive: Sidebar and footer practice
In the article detail page, the sidebar and footer are two ideal areas for placing the 'Previous Article' navigation.They are located at different stages in the user's reading process and can provide timely or subsequent guidance.
1. Build the 'Previous Article' navigation in the article page sidebar
When the user is reading an article, the sidebar is an excellent position to provide auxiliary information and quick navigation.Place a link to "Previous Article" in the sidebar, allowing users to review or explore earlier published related content at any time during reading.
In the template structure of Anqi CMS, the sidebar is usually an independent template fragment (for examplepartial/aside.html) through{% include "partial/aside.html" %}The way to introduce it into the main article template. You can add the following code in this sidebar template:
{# 侧边栏的某个区域，例如一个卡片式模块 #}
<div class="sidebar-block previous-article-nav">
<h4>上一篇文章</h4>
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb">
{% else %}
{# 如果没有缩略图，可以显示一个默认图片或占位符 #}
<img src="{% system with name='TemplateUrl' %}/images/default-thumb.png" alt="默认缩略图" class="article-thumb">
{% endif %}
<span class="article-title">{{ prev.Title }}</span>
<i class="icon-arrow-left"></i> {# 可以是一个向左的图标，引导用户 #}
</a>
{% else %}
<p>没有更早的文章了。</p>
{% endif %}
{% endprevArchive %}
</div>
This code first tries to retrieve the data of the previous article. If it exists ({% if prev %}It will create a clickable link displaying the thumbnail of the previous article (if available, otherwise a default image) and the title.We have specifically added a left-facing icon to enhance visual guidance.elseThe branch will elegantly display a prompt message, avoiding empty links or layout chaos, which is exactly the embodiment of the 'flexible and practical' pursuit we strive for.
2. Set 'Previous/Next' navigation in the article page footer
The footer area of the article page, which is a natural landing point for users after reading the current content.Provide a complete "Previous/Next" navigation here, which can give users a clear guide to continue reading and form a closed-loop content experience.
In the main template of the article detail page or its included footer template (for examplepartial/footer.htmlYou can arrange it like this:
{# 文章页脚区域的导航块 #}
<nav class="article-pagination-nav">
<div class="nav-item prev-item">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="上一篇: {{ prev.Title }}">
<span class="label">上一篇：</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="label no-more">没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="nav-item next-item">
{% nextArchive next %} {# 搭配nextArchive标签获取下一篇文章 #}
{% if next %}
<a href="{{ next.Link }}" title="下一篇: {{ next.Title }}">
<span class="label">下一篇：</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="label no-more">没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
Here, we not only usedprevArchivebut also cleverly introducednextArchivetags, which are usually paired. Through their respective{% if ... %}Ensure that the navigation link is valid.When there are no more articles in a certain direction, a "No more" prompt is displayed instead of an empty link, which greatly enhances the delicate sense of user experience.This layout is concise and clear, effectively guiding users to continue their journey of content discovery.
Operational tips and **practice
- style optimization is crucial:Whether it is a sidebar or footer, the visual presentation of navigation is crucial.Use CSS to add attractive styles to your 'Previous Article' link, such as hover effects, icon decorations, or color matching with the style of the article content, which can significantly improve click-through rates.The Anqi CMS encourages the use of static caching and TDK configuration, etc., as SEO optimization methods, and good navigation design itself is also an embodiment of user experience and SEO-friendliness.
- The importance of thumbnails:If the article has a thumbnail (
ThumbBe sure to display in navigation. Pictures are more attractive than text and can quickly capture the user's attention, providing a visual preview to help the user judge whether they are interested in this content. - A seamless flow of content:
prevArchiveThe use of tags in the article detail page is actually about building a seamless content stream.This is particularly important for self-media operators and content marketing teams, as it can effectively extend the reading depth of users on a single topic or series of content. - Ensure the template file exists:In Anqi CMS, the use of template files has certain conventions, such as static resources are stored in
/public/static/The template file is unified to UTF8 encoding. When referring to the default thumbnail or any static resources, please ensure the path is correct and the file exists to avoid resource loading errors.
By the above practice, you will not find that AnQi CMS'sprevArchiveTags may have a single function, but with flexible application, they can bring significant user experience improvement and content operation value.It embodies the characteristics of AnQi CMS being 'small and fast in execution', allowing developers and operators to implement the most seamless user experience with the simplest code.
Frequently Asked Questions (FAQ)
1. If the current article is the first article,prevArchivewhat will the tag display?
When the current article is the first article in its category or logically the first article on the entire website,prevArchivewithin the tag,prevthe variable will benil(empty). Therefore, it is imperative to use conditional judgments in the template, such as{% if prev %}To checkprevDoes the variable exist.If not present, you can choose to display a prompt such as 'No earlier articles available' or not to display the navigation block at all to maintain the cleanliness of the page and the elegance of the user experience.
2.prevArchiveCan the tag retrieve 'the first two' or 'the first N' articles?
prevArchiveThe design goal of the tag is to retrieve the "previous" article adjacent to the current article, it does not accept parameters to specify retrieving the Nth article before. If you need to display multiple related articles, such as displaying several earlier articles in addition to the previous one, it is recommended to use it in combination.archiveListlabel, and by settingcategoryId(Get articles of the same category),order="id desc"(Sorted by ID in reverse order, i.e., the most recent articles first),limit(Limit the number and combineoffsetto skip the most recent articles) parameters to achieve. But this will be