Manage website content in AnQiCMS and provide users with a smooth browsing experience is one of the key factors in content operation.When users finish reading an excellent article, they often hope to conveniently jump to related or consecutive content, and the "Previous" and "Next" navigation in the article detail page is an important feature to meet this need.AnQiCMS provides simple and powerful template tags, allowing you to easily implement this feature on the article detail page.
Ease of implementation: Add navigation for the previous and next articles on AnQiCMS article detail page
In your AnQiCMS site, the article detail page is the core area for users to deeply understand the content.The link to navigate to the previous or next related article is usually provided at the bottom of the article content or near the sidebar.This not only improves the user experience, encourages them to discover more related content, but also effectively improves the page depth (Page Depth) of the website, which is also very beneficial for search engine optimization (SEO).
AnQiCMS provides two very convenient template tags for this:prevArchiveandnextArchive。They are used to get the data of the previous and next articles of the current article.
Introduce the titles and links of the previous and next articles.
To display the title and link of the previous article, you can use the template file (usuallyarchive/detail.htmlor{模型table}/detail.html) like thisprevArchiveTags:
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
<span>没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
Here we use aifstatement to determineprevVariable exists. If it exists, display a link to the article (prev.Link) and title (prev.Title）的超链接；if it does not exist, it means that the current article is already the first in the category, so a prompt text can be displayed, such as “There is no previous article”.
Similarly, to display the title and link of the next article, you can usenextArchiveTags:
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>没有下一篇文章了</span>
{% endif %}
{% endnextArchive %}
Here too throughifstatement to judgenextVariable, ensure that a link is displayed only when the next article exists, otherwise display “No next article”.
To make the page layout more tidy, you usually place these two navigations in a container and add some descriptive text, the final effect may be something like this:
<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 class="next-article">
下一篇：
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
By using external CSS styles, you can further beautifyarticle-navigation/prev-articleandnext-articlethe layout and appearance of elements, so that they are consistent with your website design style.
More available article information
Besides the title and link,prevArchiveandnextArchiveTags also provide other useful article information, you can also call them according to your design needs, such as article ID (Id), description (Description), thumbnails (Thumb）et al. If you want to display thumbnails in navigation, you can write it like this:
{% nextArchive next %}
{% if next %}
<a href="{{next.Link}}">
{% if next.Thumb %}<img src="{{next.Thumb}}" alt="{{next.Title}}" />{% endif %}
<span>{{next.Title}}</span>
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
Here throughnext.ThumbGet the thumbnail address, and thennext.TitleAs the imagealtProperties, to optimize the image performance in search engines.
Enhance user experience and SEO effect
This navigation method not only enhances the user's browsing experience, encourages them to discover more related content, but also effectively improves the website's page depth (Page Depth), which is also very beneficial for search engine optimization (SEO).The reasonable internal link structure helps search engine spiders better crawl and index your website content, thereby possibly bringing better rankings.
Implementing the navigation function for the previous and next articles in AnQiCMS is as simple as a few lines of template code, which fully demonstrates the flexibility and ease of use of AnQiCMS in content management.
Common Questions (FAQ)
1. Why didn't the previous/next article show up on the page even though I added the code?After modifying the template file, if the front-end page does not take effect immediately, the most common reason may be that the system cache has not been updated in time.You can try to go to the AnQiCMS background, click the "Update Cache" feature on the left menu, clear the system cache, and then refresh the page to see the effect.archive/detail.htmlOr the article template you customized.
2. What if my article does not have a previous or next article?
prevArchiveandnextArchiveWhen a label does not have a corresponding previous or next article, its internal variables (such asprevornext）will be empty. The code examples provided in the article already include{% if prev %}Such condition judgment, in this case, it will elegantly display "No more" or a custom prompt message, without causing the page to report an error or display a blank.
3. Can I use these tags on non-article detail pages?
prevArchiveandnextArchiveLabels are designed specifically for article detail pages.They depend on the article context of the current page to determine which article is the 'previous' and 'next' article.Therefore, using them on non-article detail pages (such as the homepage, category list page, or single page) may not retrieve the correct article data, or the content may not be displayed at all.archiveListTags, and filter and display content through their parameters.