In AnQi CMS, adding links to the previous and next articles on the article detail page is a very practical feature for enhancing user reading experience and website internal link structure.The powerful template tag system of AnQiCMS makes it intuitive and efficient to implement this feature.
AnQiCMS Template Mechanism Overview
AnQiCMS uses a template engine syntax similar to Django, which means you can output content in your template files by{{变量}}to output content through{% 标签 %}Call the system function or execute logic. For the article detail page, AnQiCMS has built-in very convenient tags that can intelligently identify the current article and automatically retrieve the information of the previous and next articles.These tags allow you to indetail.htmlOr customize the article detail template to flexibly display navigation links.
Core:prevArchiveandnextArchiveTag
AnQiCMS provides two tags specifically used to implement the previous and next article functions.prevArchiveandnextArchiveThey are responsible for retrieving the complete data of the previous and next articles of the current article.These tags are very smart, you do not need to manually pass the current article ID or 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), this object contains all the information of the previous article, such as the title of the article,Title), link (Link）ID（Id）as well as the thumbnail （Thumbetc. Similarly,nextArchiveThe tag will provide anextobject that contains the corresponding 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 article detail template file. Usually, the article detail page template file is located under the current theme of your website.模型table/detail.htmlFor examplearticle/detail.htmlorproduct/detail.html.
After you open your template file, you can find the appropriate place to insert links to the previous and next articles, such as below the article content or above the comment area.
First, you can useprevArchiveLabel to retrieve information about the previous article and 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 %}
Right after that, you can use a similar method to add the link to 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 code above,{% if prev %}and{% if next %}This judgment statement is very important. It ensures that when the article is the first in a series (without a previous one) or the last (without a next one), the page will not display empty links but will show friendly prompts, which greatly enhances the user experience.
Enhance display: add thumbnails and more information
In addition to simple titles and links, you can also make use ofprevandnextThe object contains rich information, making the navigation link more attractive. For example, you can choose to display the article thumbnail:
{% 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 %}
By this method, users can preview the content of the next article more intuitively, thereby increasing the click-through rate. You can further utilize this according to your actual design needs.prev.Description/prev.CreatedTimefields to build richer and more personalized navigation elements.
integrate into your template.
add these code snippets to your.detail.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 set.prev-articleand.next-articleAdd floating, margins, background colors, and other styles to make it coordinated with the article content area and clearly presented as a navigation element.
After you complete the template modification and save, refresh your article detail page, and you will see that these features have taken effect.By using AnQiCMS template tags, the navigation links for the previous and next articles are realized, which is not only powerful but also easy to operate, greatly facilitating the management of website content and optimizing the user experience.
Frequently Asked 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 %}Make a judgment. This means that if the current article does not have a previous one, it will display 'There is no previous article';If there is no next article, then it shows "No next article."You can customize these prompts according to your needs.
Q2: Why doesn't the link to my previous/next article display the image?A2: Whether the image is displayed in the link depends on whether you have used the template code.prev.Thumbornext.Thumbfield to retrieve images, and whether the article itself has uploaded a thumbnail. If the article does not have a thumbnail, even if the code usesprev.ThumbThe image cannot be displayed. Please 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 an 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/coloras well asdisplayProperties to change the layout.