AnQiCMS provides a user-friendly and powerful template tag system, making it easy to integrate 'Previous' and 'Next' links on article detail pages.We do not need complex programming knowledge, just add a few lines of code to the corresponding template file.
Core Tag Introduction:prevArchiveandnextArchive
To display navigation on the article detail page, AnQiCMS specifically provides two template tags:
prevArchive: This is used to get the data of the previous article of the current article.nextArchiveEnglish for auto is: English for get the data of the next article of the current article.
These tags will automatically search and provide information about adjacent articles based on the sorting position of the current article in the category. It should be noted that not every article has a previous or next article (for example, the first article in a series does not have a previous article, and the last article does not have a next article), so we need to use conditional judgment tags when using them.{% if %}Ensure that links are displayed only when data exists, to avoid showing empty links or errors on the page.
Locate article detail page template
To implement this function, we first need to find the article detail page template file of the website. According to the template convention of AnQiCMS, the article detail page template is usually located under the template directory.{模型table}/detail.htmlfor examplearticle/detail.htmlorproduct/detail.htmlIf you have used a custom template, you need to find the corresponding file you have configured for the article details.
Specific implementation steps: Add navigation links and titles
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<span>下一篇：</span>
<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code block:
- We use
{% prevArchive prev %}and{% nextArchive next %}Label to specify the data of the previous and next articles to be retrieved, and store them separately.prevandnextthe variable. - Then, use
{% if prev %}or{% if next %}to determine whether these variables contain actual content. - If they exist, proceed through
{{ prev.Link }}and{{ prev.Title }}(or}nextField corresponding to the variable is used to output the link and title of the article. - If it does not exist, we display a friendly prompt text, such as 'No more', which can enhance the user experience.
Advanced Usage: Introducing Thumbnails to Enhance Visual Attractiveness
If you want the navigation links to be more attractive, we can also consider adding the article thumbnails next to the links.prevArchiveandnextArchiveLabel data obtained, exceptLinkandTitlealso includesThumb(Thumbnail) orLogo(Cover main image) and other fields.
You can modify the above code:
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">
<span>下一篇：{{ next.Title }}</span>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" />
{% endif %}
</a>
{% else %}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Here we added a{% if prev.Thumb %}(or}next.ThumbThe judgment of the thumbnail existence, ensuring that the image is displayed only when the thumbnail exists and its link is to the article.The final style can be beautified through external CSS, making it more consistent with the overall design of the website.
Placement and style considerations
The navigation links are usually placed at the end of the article content, for example between the main text and the comments section, or next to related recommended articles.So, after reading the current content, the reader can naturally find and click to enter the next article.
As for the final style of these links, it needs to be beautified through CSS.For example, you can set their layout (floating left and right or arranged vertically and horizontally), font size, color, background color, and the animation effect when hovering over the mouse, to ensure they are both aesthetically pleasing and easy to click.
Check and Test
Complete the code modification, remember to save the template file, and clear the cache in the AnQiCMS backend (if your system has caching enabled).Then, visit the detail page of your website's articles, test articles at different positions (such as the first article, middle article, and last article), and ensure that the 'Previous' and 'Next' links display and jump correctly.
By following these steps, we can easily provide readers with a smooth "Previous" and "Next" navigation experience on the article detail page of the website built with AnQiCMS.
Common Questions (FAQ)
1. Why do I add the 'Previous' and 'Next' page codes, but the page only displays 'No More' or does not display any content at all?This is usually because the article you are currently browsing is indeed the first one in this category (no previous one) or the last one (no next one). If all articles display 'none', please check if your template tags are spelled correctly,prevArchiveandnextArchiveThe label is placed correctly in the article detail page template. Additionally, ensure that your article is indeed categorized, and there are multiple articles under the category.
2. 'Previous' and 'Next' links are sorted according to what rules? Can the sorting rules be customized?
prevArchiveandnextArchiveTags are usually automatically determined based on the publication time of the article (the next one is the most recent, and the previous one is the oldest) or the ID sequence (the larger the ID, the later it is).Currently, these two tags built into AnQiCMS do not provide custom sorting parameters.archiveListTag combined with customlimitandorderParameter, and simulate the effect of "Previous/Next" through programming logic, but this will be more complex.prevArchiveandnextArchiveMuch more complex.
3. Can I only display links and titles without showing the 'Nothing here' prompt text?The text can be. If you don't want to display any prompt text when there is no previous or next article, just{% else %}delete the code block and its content. For example,{% else %}<span>上一篇：没有了</span>{% endif %}Delete, so that when there is no previous one, this area will be left blank.