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 keep their reading interest, is a question that every operator needs to think about.Add navigation for 'Previous Article' and 'Next Article' 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, reducing the trouble of returning to the list page, but also extends the time users stay on the website subtly, lowers the bounce rate, and builds a healthy internal link structure for the website, which is also very beneficial for search engine optimization (SEO).

Detailed steps to implement

To 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 functions to./template/您的模板名称/{模型table}/detail.html. For example, if your website uses a template nameddefaultand the corresponding database table name for the article model isarticle，then the file you need to edit is probably/template/default/article/detail.html

  2. understand the core template tagsprevArchiveandnextArchiveAnQiCMS provides two powerful template tags specifically for retrieving 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 (for example,prev），so that it can be used in subsequent template code to access various properties of the previous article, such as title, link, etc.
    • {% nextArchive 变量名称 %}: withprevArchiveTags similar, it is used to get the information of the "next" article of the current article. You can also specify a variable name for it (for examplenext）。 这两个标签使用起来非常简便，它们无需任何参数，AnQiCMS 会自动根据当前文章的上下文信息（如所属分类、发布时间等）来智能地查找并提供相邻的文章数据。

  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 any location you find suitable.This code includes judgment logic, the corresponding link will be displayed only when there is a 'Previous article' or 'Next article', otherwise a friendly prompt message will be displayed.

    <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 toprevandnexta variable.
    • {% 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 within the block displays the article link; otherwise, if the variable is empty, then execute{% else %}Block code, displaying a prompt of "no more".
    • <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, they will automatically be replaced with the URL and title of the previous article.nextThe link and title of the article are also output through{{next.Link}}and{{next.Title}}To output.
    • &laquo;and&raquo;These are HTML entity encodings, used to display left and right double arrows, enhancing the visual guidance of navigation.
    • You can add more article information according to your actual needs, for example,{{prev.Thumb}}to display article thumbnails and enrich the visual effects of navigation.

  5. **Style Optimization