In website content operation, adding 'Previous' and 'Next' navigation to the document detail page is a common strategy to improve user experience, guide users to delve deeper into browsing, and optimize the internal links of the website.AnQiCMS as a content management system, fully considers these needs and provides intuitive and simple template tags, allowing you to easily achieve this function.
The advantage of AnQiCMS implementing the "previous/next" navigation
The AnQiCMS template system is cleverly designed, adopting syntax similar to the Django template engine, through{% 标签 %}and{{ 变量 }}You can flexibly call various data. The system built-in special for adjacent document navigation in document detail pages.prevArchiveandnextArchiveLabel, no complex programming or database queries required, just a few lines of concise template code can quickly integrate.This greatly simplifies the template development process, allowing content operators to focus more on the presentation effect of the website content.
Operation steps: Add navigation for document detail pages.
To implement the previous/next document navigation, you mainly need to operate the template file of the document detail page.
1. Locate the document detail page template
First, find the document detail page template file currently used on your website. According to the template convention of AnQiCMS, the document detail page template is usually located in/template/{模型table}/detail.htmlFor example, if you are managing article content, the template file may be located in/template/article/detail.htmlIf you have specified a custom template for a specific document or category, you need to edit the corresponding template file.
2. Understand Core Tags:prevArchiveandnextArchive
AnQiCMS provides two key tags:
prevArchive: Used to retrieve the data of the previous document of the current document.nextArchiveUsed to retrieve the data of the next document of the current document.
These tags do not require any additional parameters when used, the AnQiCMS system will intelligently judge and return the corresponding adjacent document information based on the current context of the document (such as the category it belongs to, the publication time, the document ID, etc.). Through them, you can easily obtain the document ID, title (}Title) and link (Link), even thumbnail (",Thumb) etc. details.
3. Write template code to implement navigation
Next, in your document detail page template (such asdetail.htmlIn the text, find the position where you want to place the previous/next navigation links, and insert the following code snippet. This is usually at the bottom or sidebar of the document.
<div class="article-navigation">
<div class="nav-item prev-article">
{% prevArchive prev %}
{% if prev %} {# 判断是否存在上一篇文档 #}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="nav-label">上一篇：</span>
<span class="nav-title">{{ prev.Title }}</span>
{# 如果需要显示缩略图，可以添加类似下面的代码 #}
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumbnail">{% endif %}
</a>
{% else %}
<span class="nav-label">上一篇：</span>
<span class="nav-title no-more">没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="nav-item next-article">
{% nextArchive next %}
{% if next %} {# 判断是否存在下一篇文档 #}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="nav-label">下一篇：</span>
<span class="nav-title">{{ next.Title }}</span>
{# 如果需要显示缩略图，可以添加类似下面的代码 #}
{% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumbnail">{% endif %}
</a>
{% else %}
<span class="nav-label">下一篇：</span>
<span class="nav-title no-more">没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Code description:
{% prevArchive prev %}and{% endprevArchive %}These tags are used to wrap the data of the previous document. Here, we assign the information obtained from the previous document toprevVariable.{% nextArchive next %}and{% endnextArchive %}These tags are used to wrap the data of the next document. Here, we assign the information obtained from the next document tonextVariable.{% if prev %}and{% if next %}This is a very important condition judgment. It ensures that the link and title will only be displayed when there is indeed a previous or next document, otherwise it will display prompts such as 'none', to avoid empty links.{{ prev.Link }}and{{ next.Link }}Used to output the complete URL link of the previous/next document.{{ prev.Title }}and{{ next.Title }}Used to output the title of the previous/next document.{{ prev.Thumb }}and{{ next.Thumb }}: If the document is set to have a thumbnail, you can get the thumbnail URL here. You can choose whether to display the thumbnail based on your design requirements.
4. Styling (Optional)
This code provides the basic structure, you can beautify these navigation links according to the overall design of the website by adding CSS styles, such as adjusting font size, color, layout, adding icons, or hover effects, to keep them consistent with the website style and provide better visual guidance.
Summary
Through AnQiCMS built-inprevArchiveandnextArchiveLabel, you can conveniently add previous/next navigation functions to the document detail page of the website.This approach not only reduces the amount of code, making it easy to understand and maintain, but also effectively increases the user's stay time on the website and indirectly helps the website's SEO performance through a well-designed internal link structure.
Frequently Asked Questions (FAQ)
Q1: What should be done if the previous or next document does not exist?A1: The template code provided in the article has been passed{% if prev %}and{% if next %}The label was judged. If the current document is the first in the category, there is no 'previous one'.prevThe variable is empty; if it is the last one, there is no 'next one'.nextThe variable is empty. At this time, the template will display the prompt text "Nothing", and you can adjust it as needed to hide the navigation item or display other content.
Q2: How is the sorting rule of the previous/next document?A2: The AnQiCMS system defaults to intelligent sorting based on document publication time, ID, and other factors to ensure the logicality and coherence of navigation.In most cases, it will determine the previous and next articles according to the chronological order of the document's publication time (or ID if the publication time is the same) within the same category.
Q3: Can I customize the prompt text or link for 'none'?A3: Of course. In{% else %}The part, you can translate<span class="nav-title no-more">没有了</span>Replace with any text you wish to display, or completely remove this code so that navigation items are not displayed when there is no previous/next post. If you want to link to the category homepage or other pages, you can{% else %}Build a static link within the block.