Adding 'Previous' and 'Next' navigation links to the document of the front page in AnQiCMS is an important means to enhance the user browsing experience and extend the user's stay time.When users finish reading an article, these links can naturally guide them to discover more related content, avoiding page browsing interruption, thereby effectively reducing the bounce rate and helping to enhance the overall weight of the website's content.
AnQi CMS, as a feature-rich content management system written in Go language, comes with a powerful template tag system, allowing website operators to flexibly control content display.The "Previous" and "Next" document tags are designed to achieve this seamless content navigation.They can intelligently identify and display links to adjacent documents based on the current document's order in the category.
Core Function: Easily achieve with built-in tags
The template system provided by Anqi CMS offersprevArchive(Previous document) andnextArchive(Next document) these two special tags.The use of these tags is very intuitive, no complex programming knowledge is required, just simple configuration in the template file of the document detail page.They automatically retrieve the information of the previous or next document in the same category of the current document and generate the corresponding links.
Implementation Steps: Add 'Previous' and 'Next' links on the front page
To display the 'Previous' and 'Next' links on the front page, you usually need to modify your document detail page template. In Anqi CMS, the document detail page template file is usually located in your template directory under{模型table}/detail.html[For example, the detail page of the article model might be]article/detail.html).
[Here are the specific steps and code examples for adding these links]
[1. Find your document detail page template file]
Firstly, you need to log in to the Anqi CMS backend, go to the 'Template Design' module, and find the template used by your current website.Then, locate to the document detail page template you want to modify in the template file list.detail.htmlor according to your content model naming, such asarticle/detail.htmlorproduct/detail.html.
2. Insert navigation code in the template file
In the found template file, select a suitable position to place the 'Previous' and 'Next' links, such as below the document content or above the footer. We will useprevArchiveandnextArchiveThese tags are used to retrieve information about adjacent documents.
Please note that these tags will try to get the previous or next document, but if the current document is already the first or last in the category, the corresponding 'previous' or 'next' document will not exist. Therefore, we need to combineifJudging the label to elegantly handle this situation, ensure that no blank links or errors appear on the page when there are no adjacent documents.
Below is a standard implementation example:
<div class="document-pagination">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="« {{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>
{% else %}
<span>« 没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }} »">下一篇：{{ next.Title }} »</a>
{% else %}
<span>没有下一篇了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
3. Code Explanation
<div class="document-pagination">This is a wrapper element used for overall layout and style control of the previous/next link.You can replace it with other HTML tags or class names according to your design.{% prevArchive prev %} ... {% endprevArchive %}This is the tag block to get the information of the previous document. It will try to find the previous document of the current document and assign its information to a temporary variable namedprev.{% if prev %} ... {% else %} ... {% endif %}This is a conditional judgment.- If
prevExecute if the variable exists (i.e., there is a previous document)ifThe code within the block displays the link to the previous document. - If
prevIf the variable does not exist (i.e., this is the first document in the series), then executeelseThe code inside the block displays the prompt “No previous article”.
- If
<a href="{{ prev.Link }}" title="« {{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>This is the actual link to the previous document.{{ prev.Link }}It will be replaced with the URL address of the previous document.{{ prev.Title }}This will be replaced by the title of the previous document.title="..."AddtitleThe attribute can enhance user experience (displaying the title when hovering over) and SEO.
{% nextArchive next %} ... {% endnextArchive %}This is related toprevArchiveTags similar, used to get the information of the “next” document and assign it to a temporary variable namednext. Its internal logic is also the same as the processing method of the previous document.
4. Save the template and view the effect
After completing the code modification, save your template file and refresh the front-end page to view the effect. You will find that there are 'Previous' and 'Next' navigation links added at the bottom of the document.
Optimization and Personalization
- Add Styles (CSS)The above code only provides the basic HTML structure. To make these links look more attractive,
.document-pagination,.prev-document,.next-documentAdd the corresponding CSS styles. For example, you can set them to float left and right, adjust the font size and color, or add borders and background colors. - Display thumbnailsIf you want to make the link more attractive, you can display a thumbnail of the previous/next document next to it.
prevandnextVariables are also supported.ThumbField to get the thumbnail address of the document.{% if prev %} <a href="{{ prev.Link }}" title="« {{ prev.Title }}"> {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="doc-thumb">{% endif %} « 上一篇：{{ prev.Title }} </a> {% endif %} - Custom no document promptWhen there is no previous or next document,
<span>« 没有上一篇了</span>Such prompts can be customized according to your website style.For example, you can change it to "Return to article list" and link to the category homepage, or simply do not display any content to keep the page simple.
By following these simple steps and flexible customization, you can provide users with a smooth and efficient content browsing experience on the front page of the website built with Anqi CMS, making visitors stay longer on your site and discover more valuable information.
Common Questions (FAQ)
Q1: Why did I add 'Previous'/'Next' code in the document detail page, but no links are displayed on the front-end page?
A1: