How to display "Previous" and "Next" articles on the article detail page to enhance user experience?

In website content operation, continuously optimizing user experience is the key to enhancing website value.How to guide users to discover more related content while browsing an article on your website and maintain their reading interest is a question that every operator needs to think about.Add 'Previous Article' and 'Next Article' navigation at the bottom or side of the article detail page is a very effective and common strategy.It not only allows users to explore the website content more conveniently, reduces the trouble of returning to the list page to search, but also subtly extends the user's stay time on the website, lowers the bounce rate, and helps build a healthy internal link structure for the website, and is also of great benefit to search engine optimization (SEO).

For operators using AnQiCMS (AnQi Content Management System), implementing this feature is quite intuitive and efficient.AnQiCMS with its flexible template tag system allows you to easily customize the website frontend without a deep understanding of complex programming logic.

Detailed steps of implementation

Add 'Previous Article' and 'Next Article' navigation to the article detail page of AnQiCMS, you mainly need to complete the following simple steps:

1. Locate the article detail page template fileIn AnQiCMS, the detail pages of different content models (such as articles, products, etc.) usually correspond to independent template files.You need to find the detail page template used by the content model of the article you want to add navigation functionality to.These template files are usually located in your theme directory, the path structure is similar to/template/您的模板名称/{模型table}/detail.html. For example, if your website uses a template nameddefaultand the corresponding database table name of the article model isarticleThen the file you need to edit is probably/template/default/article/detail.html. You can directly edit the file online through the "Template Design" feature of the AnQiCMS backend, or download it locally via FTP/SFTP tools for modification.

2. Understand the core template tagsprevArchiveandnextArchiveAnQiCMS provides two powerful template tags specifically for obtaining adjacent articles on the article detail page:

   • {% prevArchive 变量名称 %}This tag is used to get the information of the previous article of the current article. You need to specify a variable name for it, such asprev), so that the variable can be used in subsequent template code to access various properties of the previous article, such as title, link, etc.
   • {% nextArchive 变量名称 %}: withprevArchiveLabels similar, it is used to get information about the next article of the current article. You can also specify a variable name for it (such asnext）. These tags are very easy to use, they do not require any parameters, AnQiCMS will automatically search and provide adjacent article data based on the current context information of the article (such as category, publication time, etc).

3. Insert navigation code in the templateAfter finding the correct template file, you can insert the following code snippet below the article content, in the sidebar, or at any position you think is appropriate.This code includes judgment logic, it will display the corresponding link only when there is a "Previous" or "Next" article, otherwise it will display a friendly prompt message.

   <div class="article-pagination-nav">
       <div class="prev-article-link">
           {% prevArchive prev %}
           {% if prev %}
               <a href="{{prev.Link}}" title="上一篇：{{prev.Title}}">
                   <span class="nav-direction">&laquo; 上一篇：</span>
                   <span class="nav-title">{{prev.Title}}</span>
               </a>
           {% else %}
               <span class="nav-direction">&laquo; 上一篇：没有了</span>
           {% endif %}
           {% endprevArchive %}
       </div>
       <div class="next-article-link">
           {% nextArchive next %}
           {% if next %}
               <a href="{{next.Link}}" title="下一篇：{{next.Title}}">
                   <span class="nav-direction">下一篇：&raquo;</span>
                   <span class="nav-title">{{next.Title}}</span>
               </a>
           {% else %}
               <span class="nav-direction">下一篇：没有了 &raquo;</span>
           {% endif %}
           {% endnextArchive %}
       </div>
   </div>
   

4. Code snippet interpretation

   • {% prevArchive prev %}and{% nextArchive next %}These two tags are the starting points for obtaining adjacent article information, and they assign article data separately.prevandnextVariable.
   • {% if prev %}/{% if next %}This is the conditional judgment statement in the template. IfprevornextThe variable has a value (i.e., there is a previous or next article), then executeifThe code inside the block displays the article link; otherwise, if the variable is empty, then execute{% else %}The code inside the block displays the prompt 'Nothing here'.
   • <a href="{{prev.Link}}" title="上一篇：{{prev.Title}}">...</a>This is a standard HTML link tag.{{prev.Link}}and{{prev.Title}}Is the variable output method in AnQiCMS template syntax, which will automatically replace it with the URL and title of the previous article.nextThe link and title of the article are also passed through.{{next.Link}}and{{next.Title}}to output.
   • «and»These are HTML entity encodings used to display left and right arrows, enhancing the visual guidance of navigation.
   • You can add more article information to the link as needed, for example{{prev.Thumb}}to display the article thumbnail and further enrich the navigation visual effects.

5. **Style optimization