Adding links to the previous and next articles on the article detail page in AnQi CMS is a very practical feature for improving user reading experience and the internal link structure of the website.AnQiCMS powerful template tag system makes this feature intuitive and efficient.
Overview of AnQiCMS template mechanism
AnQiCMS uses a template engine syntax similar to Django, which means you can output content in your template files by{{变量}}.{% 标签 %}Invoke system functions or perform logic.For the article detail page, AnQiCMS has built-in very convenient tags that can intelligently recognize the current article and automatically obtain the information of the previous and next articles.detail.htmlIn the or custom article detail template, flexibly display navigation links.
Core:prevArchiveandnextArchivetags
AnQiCMS provides two special tags for implementing the previous and next article features:prevArchiveandnextArchive.They are responsible for retrieving the complete data of the previous and next articles of the current article.These tags are very intelligent, you do not need to manually input the ID of the current article or any other complex parameters; they will automatically work in the context of the article detail page.
When you useprevArchiveWhen labeling, it will provide an object namedprev(this variable name can be customized), which contains all the information of the previous article, such as the title of the articleTitle), link (Link)、ID（Id）as well as the thumbnail (Thumb）etc. Similarly,nextArchiveTags will provide anextobject, containing the relevant information for the next article.
How to add a link to the article detail page
To add these navigation links to your article detail page, you need to edit the corresponding template file for the article details. Usually, the template file for the article detail page is located under your current theme.模型table/detail.htmlfor examplearticle/detail.htmlorproduct/detail.html.
Open your template file and you can find the appropriate location to insert links to the previous and next articles, for example, below the article content or above the comment area.
Firstly, you can useprevArchiveTag to retrieve information about the previous article, and combine it with conditional judgment to ensure that the link is displayed only when there is a previous article.
{% prevArchive prev %}
<div class="prev-article">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<i class="icon-arrow-left"></i>
上一篇：{{ prev.Title }}
</a>
{% else %}
<span class="no-article">没有上一篇文章了</span>
{% endif %}
</div>
{% endprevArchive %}
紧接着，You can use a similar method to add the link of the next article:
{% nextArchive next %}
<div class="next-article">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
下一篇：{{ next.Title }}
<i class="icon-arrow-right"></i>
</a>
{% else %}
<span class="no-article">没有下一篇文章了</span>
{% endif %}
</div>
{% endnextArchive %}
In the above code,{% if prev %}and{% if next %}Such a judgment statement is very important.They ensure that when an article is the first in a series (without a previous one) or the last (without a next one), the page does not display empty links but shows friendly prompt information, which greatly enhances the user experience.
Enhance display: Add thumbnails and more information
In addition to simple titles and links, you can also take advantage ofprevandnextThe rich information contained in the object makes the navigation links more attractive. For example, you can choose to display the thumbnail of the article:
{% prevArchive prev %}
<div class="prev-article-card">
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}">
{% endif %}
<p>上一篇</p>
<h3>{{ prev.Title }}</h3>
</a>
{% else %}
<span class="no-article">没有上一篇文章了</span>
{% endif %}
</div>
{% endprevArchive %}
{% nextArchive next %}
<div class="next-article-card">
{% if next %}
<a href="{{ next.Link }}">
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}">
{% endif %}
<p>下一篇</p>
<h3>{{ next.Title }}</h3>
</a>
{% else %}
<span class="no-article">没有下一篇文章了</span>
{% endif %}
</div>
{% endnextArchive %}
Through this method, users can preview the content of the next article more intuitively, thereby increasing the click-through rate. You can further utilize it according to your actual design requirements.prev.Description/prev.CreatedTimeThe field, build more rich and personalized navigation elements.
Integrate it into your template
Add these code snippets to yourdetail.htmlAfter the template file, you may also need to beautify the display effect of these links according to the overall style of the website. For example, you can be.prev-articleand.next-articleAdd floating, margin, background color, and other styles to make it coordinate with the article content area and clearly present as a navigation element.
Complete the template modification and save, then refresh your article detail page to see these features take effect.Through AnQiCMS template tags, achieve navigation links for the previous and next articles, which is not only powerful in function but also simple in operation, greatly facilitating the management of website content and the optimization of user experience.
Common Questions (FAQ)
Q1: If my article is the first or last in a series, and there is no previous or next article, what will be displayed?A1: In the above code example, we used{% if prev %}and{% if next %}Perform judgment.This means that if the current article does not have a previous one, it will display 'No previous article'; if there is no next one, it will display 'No next article'.You can customize these prompt texts according to your needs.
Q2: Why is the image not displayed for my previous/next article link?A2: Whether the image is displayed in the link depends on whether you have used the template code.prev.Thumbornext.ThumbField to retrieve the image, and whether the article itself has uploaded a thumbnail. If the article does not have a thumbnail, even if the code usesprev.ThumbEnglish translation: The picture also cannot be displayed. You can check the editing page of the article to ensure that the thumbnail has been uploaded.
Q3: How to adjust the display style of the previous/next article link (such as layout, font size, etc.)?A3: In the above code example,divelements such asdiv class="prev-article"）is HTML structure, its appearance can be controlled by CSS stylesheets. You can add or modify the corresponding style rules for these class names or elements in the current theme's CSS file, such as adjustingfont-size/margin/padding/coloranddisplayThe attribute can change the layout.