In website operation, it is crucial to provide visitors with a smooth navigation experience.When a user finishes reading an article, they naturally expect to find more related content, and the 'Previous' and 'Next' links are the key features that meet this need.They can not only improve the user's stay time on your website, but also have a positive impact on search engine optimization (SEO) by building internal link structure.
AnQiCMS provides concise and efficient built-in tags for template developers, allowing you to easily display links and titles of the previous and next articles on the article detail page.Below, we will together learn how to implement this feature in the AnQiCMS template.
Understand core tags:prevArchiveandnextArchive
AnQiCMS provides two special tags for retrieving adjacent article information:
prevArchive: Used to retrieve information about the 'previous' article of the current article.nextArchiveUsed to get the information of the next article of the current article.
These tags work intelligently in the context of the article detail page, automatically determining the current article's ID and category, and finding adjacent articles in the same category.
Basic Usage: Display Links and Titles
The most common requirement is to display the title and corresponding link of the previous and next articles. You can add the following code snippet to the template below the content area or above the comment area on the article detail page:
<nav class="article-navigation">
<div class="prev-article">
{# 获取上一篇文章信息，并将其赋值给变量 'prev' #}
{% prevArchive prev %}
{# 检查是否存在上一篇文章 #}
{% if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
{% else %}
{# 如果没有上一篇文章，则显示提示信息 #}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{# 获取下一篇文章信息，并将其赋值给变量 'next' #}
{% nextArchive next %}
{# 检查是否存在下一篇文章 #}
{% if next %}
<span>下一篇：</span>
<a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
{% else %}
{# 如果没有下一篇文章，则显示提示信息 #}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
Code analysis:
{% prevArchive prev %}This tag attempts to retrieve the previous article of the current article, if found, it will store all its information in a namedprev.{% endprevArchive %}This is the end tag.{% if prev %}: This is a conditional judgment, used to check.prevWhether the variable successfully retrieves the content (i.e., whether the previous article exists). If it exists, then executeifThe code within the block.{{ prev.Link }}: fromprevRetrieve the link address of the previous article in the variable.{{ prev.Title }}: fromprevRetrieve the title of the previous article in the variable.{% else %}If:prevIf the variable is empty (i.e., there is no previous article), then executeelseThe code inside the block displays the prompt 'Nothing here'.nextArchiveThe way of using tags andprevArchiveExactly the same, but it retrieves the information of the next article and stores it in.nextthe variable.
Advanced usage: Add more information
In addition to the title and link, you may also want to display more details of the articles in the navigation, such as thumbnails (Thumb), description (Description) etc., to provide a richer preview.prevandnextThe variable contains various fields in the article, you can call it as needed.
Here is an example of adding a thumbnail to the navigation.
<nav class="article-pagination">
<div class="pagination-item prev-item">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}" class="pagination-link">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="pagination-thumb">
{% endif %}
<span class="pagination-text">上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span class="pagination-text no-more">上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="pagination-item next-item">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}" class="pagination-link">
<span class="pagination-text">下一篇：{{ next.Title }}</span>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="pagination-thumb">
{% endif %}
</a>
{% else %}
<span class="pagination-text no-more">下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
In this example, we added{% if prev.Thumb %}Determine whether the previous article has a thumbnail and display it. This provides users with a more intuitive navigation cue.
How to apply the code to your template
Confirm the template file:Generally, the template file of the article detail page is located
template/{您的模板目录}/{模型table}/detail.html. For example, if it is an article model, it may betemplate/default/article/detail.html. You can find and edit the corresponding template file online through the "Template Design" -> "Website Template Management" feature in the AnQiCMS backend.Select a suitable location:In
detail.htmlIn the file, find the position where you want to display the previous/next link. This is usually after the article content,divbut before the comments section or related article list.Paste and adjust the code:Paste the above code snippet into the selected location. You can adjust it according to the actual design of your website.
divLabel the class and add the corresponding CSS styles to maintain consistency with your website.Save and preview:Save the template file and then visit any article detail page on the website, check if the links to the previous and next articles are displayed correctly.
Important reminder and **practice
- Automatically judge the context:
prevArchiveandnextArchiveThe power of tags lies in the fact that they do not require you to manually pass the current article ID or other parameters; they automatically recognize the context of the article on the current page. - Gracefully handle the case of no content:Always use
{% if %}The statement to determine if the previous or next article exists. This can prevent errors or blank links from appearing on the page when there are no adjacent articles. - Improve user experience:A good previous/next navigation can guide users to explore your website content deeply, reducing the bounce rate.
- Optimize internal links:These navigation links create natural internal links for your website, which helps search engines better crawl and understand your website structure, thereby improving SEO effectiveness.
By utilizing the AnQiCMS providedprevArchiveandnextArchiveLabel, you can easily add a powerful and user-friendly navigation feature to the article detail page of your website, thereby optimizing the user experience and enhancing the overall performance of the website.
Frequently Asked Questions (FAQ)
Question 1: Why is the previous/next article link not displayed on the page even though I added code in the template?
Answer:There may be several reasons. First, make sure the article you are viewing does have a previous or next article (i.e., it is not the first or last in the category).Next, check if you have correctly pasted the code into the template file of the article details page (for exampledetail.htmlIn it, and there are no spelling errors. Finally, if your AnQiCMS has enabled caching, please try to clear the website cache in the background and then visit the page again.
Question 2: Can these tags be used on the article list page or the homepage?
Answer:No.prevArchiveandnextArchiveTags are specifically designed for