When readers visit an article of interest, they often hope to browse related or consecutive content seamlessly, rather than having to return to the list page to search again.On the article detail page of the website, providing navigation links for "Previous Article" and "Next Article" is an effective way to enhance this reading experience and increase user engagement.It can not only guide users to explore the website content deeply but also optimize the internal link structure of the website to some extent, making it friendly to search engines.
English CMS (EnglishCMS) as a powerful content management system, fully considers the needs of content operation, and therefore provides a very convenient way to realize this function at the template tag level.Even if you are not familiar with complex programming, you can easily add navigation to the previous and next articles in your article detail page by calling simple tags.
Understanding the template mechanism of the AnQi CMS
The CMS uses a template engine syntax similar to Django, which means you can control the display logic and output data through specific tags. Template tags are usually preceded by a certain tag.{% ... %}Packaging, used for controlling logic (such as conditional judgment, loop), and variable output is used{{ ... }}.The links and titles of the previous and next articles are implemented through the built-in template tags of the system. These tags will automatically search and return information about adjacent articles based on the order of the current article in the database.
Find the article detail template file
To add navigation for previous and next articles on the article detail page, you first need to find the corresponding template file for the article detail page. In Anqi CMS, template files are usually stored in/templateUnder the directory, you are currently using the theme folder.
Generally, the template file path of the article detail page will be similar to/template/[你的模板目录]/[你的模型table]/detail.htmlThe structure. For example, if your article uses the "article" model and the template directory name isdefault, then the file may be intemplate/default/article/detail.html.
You can edit or download these template files online through the 'Template Design' feature of the Anqi CMS backend to make modifications.
Add navigation links to the previous and next articles: Core Code Implementation
AnQi CMS provides two special tags for retrieving information about the previous and next articles:prevArchive(Previous document tag) andnextArchive(Next document tag). These tags are very smart, they do not require additional parameters, and can automatically identify the current article and try to obtain the data of the previous or next article.
These tags retrieve article information that is an object containing multiple fields, from which you can extract the article ID, title, link, thumbnail, etc. Common fields include:
Id：The unique identifier ID of the articleTitle: Article titleLink：The access link of the articleThumb：The thumbnail address of the article (if any)DescriptionArticle summary
The following is an example of code to add navigation links for previous and next articles on the article detail page:
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %} {# 将上一篇文章信息赋值给变量prev #}
{% if prev %} {# 判断是否存在上一篇文章 #}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="navigation-direction">« 上一篇</span>
<h3 class="navigation-title">{{ prev.Title }}</h3>
{% if prev.Thumb %} {# 如果有缩略图，则显示 #}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="navigation-thumbnail"/>
{% endif %}
</a>
{% else %}
<span class="navigation-direction no-more">« 没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %} {# 将下一篇文章信息赋值给变量next #}
{% if next %} {# 判断是否存在下一篇文章 #}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="navigation-direction">下一篇 »</span>
<h3 class="navigation-title">{{ next.Title }}</h3>
{% if next.Thumb %} {# 如果有缩略图，则显示 #}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="navigation-thumbnail"/>
{% endif %}
</a>
{% else %}
<span class="navigation-direction no-more">没有了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code block:
{% prevArchive prev %}and{% nextArchive next %}Load the data of the previous article and the next article separately:prevandnextthe variable.{% if prev %}and{% if next %}It is very important to make such a conditional judgment.It ensures that links are rendered only when there is indeed a previous or next article.If not present, it will display prompts like 'None' to avoid empty links on the page.- In the link
<a>tag, we usedhref="{{ prev.Link }}"andtitle="{{ prev.Title }}"Show the link and title of the article.titleProperties are very helpful for user experience and search engine optimization. When the mouse hovers over them, a tooltip is displayed, and search engines can better understand the content of the links. {% if prev.Thumb %}This code block allows you to selectively display the thumbnail of the previous/next article, making navigation more intuitive and aesthetically pleasing.
Design and beauty
The above code provides a basic HTML structure, you can add CSS styles to beautify these navigation links.For example, you can place them side by side at the bottom of the page, or design them as buttons with arrows.article-navigation/prev-article/next-article/navigation-directionandnavigation-titleAdd styles to similar items, and you can integrate them into the overall design style of your website.
Summary
Through the CMS provided by AnQiprevArchiveandnextArchiveTemplate tags, you can integrate the navigation function for the previous and next articles on the article detail page with great flexibility and efficiency.This can greatly enhance the reading experience of users on the website, encourage them to browse more content, and also play a positive role in promoting the internal link structure and SEO optimization of the website.
Common Questions (FAQ)
1. Why doesn't the page display anything after I added the previous/next page code, or only displays 'None'?
This usually has several reasons: First, please check if the article you are currently browsing is really the first or last article in the category, if so, then the "Previous" or "Next" article naturally does not exist. Second, please carefully check if the spelling of the tags and variable names in the template code is correct.{% prevArchive prev %}and{% endprevArchive %}This is a matching tag. Finally, if your website has caching enabled, please try clearing the website cache to ensure that your latest template changes take effect.
2. Can I display other information in the previous/next navigation besides the article title and link? For example, thumbnails or publication dates?
Of course you can.prevArchiveandnextArchivethe tags you getprevandnextThe variable is an object that contains the complete information of the article. In addition,LinkandTitle, you can also accessThumb[Thumbnail],Description[Summary],CreatedTime(Publish Time) fields. In the code example, we have shown how to conditionally display thumbnails. You can also use them as needed,{{ stampToDate(prev.CreatedTime, "2006-01-02") }}This label is used to format and display the publish date.
3. Will this previous/next navigation feature automatically cross categories to find articles?
Anqi CMS'sprevArchiveandnextArchiveLabel is default to find the previous and next articles in the category of the current article.This means it will maintain the relevance of the content, and will not jump to unrelated categories.archiveList