When visitors browse articles on a website, they often hope to be able to jump to related content conveniently, especially the previous or next article.This design not only improves the user experience, but also has a positive impact on the internal link structure of the website and search engine optimization.AnQiCMS fully considers this user's needs, built-in simple and efficient template tags, helping us easily implement the previous and next article link function on the article detail page.
Display the link to the previous and next article on the AnQiCMS article detail page
In AnQiCMS, the display of links to the previous and next articles mainly depends on two core template tags: prevArchiveandnextArchiveThese tags will automatically search and return adjacent article information based on the publication time of the current article.
To implement this feature, we need to edit the template file of the article detail page. According to the template conventions of AnQiCMS, the template file for the article detail page is usually located in your template directory under the{模型table}/detail.htmlFor example, if it is an article model, it is usuallyarticle/detail.html.
When editing the template file, you can add the following code snippet to the location where you want to display links to the previous and next articles, such as at the bottom or sidebar of the article content.
Basic Usage Example (Title Only):
Let's see how to simply display the link and title of the previous article:
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">« {{ prev.Title }}</a>
{% else %}
<span>« 没有了</span>
{% endif %}
{% endprevArchive %}
</div>
</div>
In this code,{% prevArchive prev %}Tags will try to fetch the information of the previous article of the current article and store it inprevthe variable. We use{% if prev %}to determine if there is a previous article, and if there is, then through{{ prev.Link }}to get the article link, through{{ prev.Title }}Retrieve the article title and display it as a clickable link.If there is no previous article (for example, if the current article is the first in a series), then display the prompt 'None'.
Similarly, the link and title of the next article can be usednextArchiveTag implementation:
<div class="article-navigation">
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">{{ next.Title }} »</a>
{% else %}
<span>没有了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Here,{% nextArchive next %}Tags will store the information of the next article innextvariables, with the same logic asprevArchiveentirely the same.
Enhanced usage example (including thumbnail and full layout):
To provide a richer navigation experience, we usually combine displaying article titles and thumbnails. The following is a complete example that lists the links to the previous and next articles side by side, including a thumbnail:
<div class="article-pagination-wrapper">
<div class="prev-article-link">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %}
<span>« {{ prev.Title }}</span>
</a>
{% else %}
<span class="no-article-link">« 没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article-link">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span>{{ next.Title }} »</span>
{% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" />{% endif %}
</a>
{% else %}
<span class="no-article-link">没有了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this enhanced example:
- We use
divelements to wrap the links to the previous and next articles, and add the followingprev-article-linkandnext-article-linkClass name, convenient for subsequent CSS styling control, achieving left and right layouts, etc. {% if prev.Thumb %}and{% if next.Thumb %}Determine if the article has a thumbnail.ThumbThe field will return the URL of the thumbnail.altProperty set to article title, which is very important for image SEO and accessibility.titleMouse hover tooltip added to the link attribute.
Please note, in the above code,article-pagination-wrapper/prev-article-link/next-article-linkandno-article-linkAll of these are sample CSS class names, and you can modify or replace them according to your website design needs, and write the corresponding CSS styles.
Important hints and **practice
- Template file location:Ensure you are editing the correct article detail page template. Typically, its naming will be related to the content model, for example
article/detail.htmlorproduct/detail.html. - Conditional judgment:Always use
{% if prev %}or{% if next %}Make a judgment, because not all articles will have a previous or next article.For example, the article with the earliest release time does not have a previous one, and the article with the latest release time does not have a next one.This can avoid invalid empty links from appearing on the page. - Automatically obtain context:
prevArchiveandnextArchiveTags will automatically obtain the context information of the current article on the article detail page, usually you do not need to manually passidorcategoryIdparameters, they will intelligently find adjacent articles. - Style control:The template code is responsible for outputting HTML structure and content. The layout, color, font, and other visual presentations of the links need to be controlled through CSS stylesheets. You can specify the
divandaAdd a custom class name to the label, then define the style in your CSS file. - SEO-friendly:The links to the previous and next articles are good internal link practices, which help search engine spiders crawl more pages of the website, pass page authority, and thus improve the overall SEO performance of the website.
Through the services provided by AnQiCMS,prevArchiveandnextArchiveTags, we can add navigation between articles on the article detail page flexibly and efficiently, which not only optimizes the user experience but also has a positive effect on the overall structure of the website and search engine optimization.
Common Questions (FAQ)
Why didn't the previous/next article links show up on the page even though I added the code?Firstly, please check if your template file is saved and effective.Secondly, make sure that the current article indeed has a logical 'previous' or 'next' article.For example, if your website has only one article, or you are viewing your first published article, then there is no previous article; conversely, if you are viewing your last published article, then there is no next article.Moreover, please confirm that your article is in a normal published state on the AnQiCMS backend, not a draft or an article in the recycling bin.
How can I adjust the link to only display the article title without showing the thumbnail?If you do not want to display thumbnails, simply remove all the parts containing
{% if prev.Thumb %}...{% endif %}or{% if next.Thumb %}...{% endif %}from the sample code. Keep<span>{{ prev.Title }}</span>or<span>{{ next.Title }}</span>.What determines the order of the previous/next article?The previous and next article links in AnQiCMS are based on the publication time order (default is sorted by the publication time)
CreatedTimeThe field is automatically judged. The system will find the most recent article before the current article's publication time as the previous article, and the most recent article after the publication time as the next article.