In website content operation, improving user reading experience is a key link.When readers finish browsing an excellent article, if they can immediately see the link to the next related or sequential article, it will undoubtedly greatly increase their likelihood of staying on the website.This design not only optimizes the user experience, helps guide users to delve deeper into the website content, but also effectively reduces the bounce rate, and enhances the website's SEO performance, allowing search engines to better understand the structure of your website content.

AnQi CMS is an efficient and flexible content management system that fully considers various needs for content display.Its powerful template system uses syntax similar to the Django template engine, allowing developers to easily customize page layout and functionality.Add 'Previous Article' and 'Next Article' links at the bottom of the article detail page, it is very convenient to implement using the built-in template tags of Anqi CMS.

Understand the core functions:prevArchiveandnextArchiveTag

AnQi CMS provides two very practical template tags specifically for the article detail page:prevArchiveUsed to get information about the previous article of the current article,nextArchiveThen it is used to get information about the next article.

The cleverness of these tags lies in the fact that they can intelligently identify adjacent articles based on the current article ID and their sorting in the category without complex parameter configuration.This means you don't need to manually write complex logic to judge the articles before and after, the system will do it for you.

We usually combine conditional judgment tags when in use{% if %}Handle the case where there may be no previous or next article to avoid missing links or display errors.For example, if the current article is the first article in the category, there is no 'Previous'; conversely, if it is the last one, there is no 'Next'.

From these tags, we can conveniently obtain the title of the article (Title) and the article link (Link）et key information, these are enough to build a concise and practical navigation area.

Practical steps: Add links in the article detail page.

To add the "Previous" and "Next" article links to your website, you need to edit the current template file.

  1. Locate the template file:First, locate the template folder currently in use on your website. Typically, the template file for the article detail page is located intemplate/{您的模板名称}/{模型table}/detail.htmlFor example, if you are using the default template and the model is the "article" model, then the file path might betemplate/default/article/detail.html.

  2. Edit the template file:Open thisdetail.htmlFile, find the position where you want to add the "Previous" and "Next" links. Usually, this position is at the bottom of the article content or above the comment area.

    After finding the appropriate location, you can insert the following code snippet:

    <div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                <span class="label">« 上一篇：</span>
                <span class="title">{{ prev.Title }}</span>
            </a>
        {% else %}
            <span class="no-article">« 没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span class="label">下一篇：»</span>
                <span class="title">{{ next.Title }}</span>
            </a>
        {% else %}
            <span class="no-article">没有了 »</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

    Code description:

    • {% prevArchive prev %}and{% nextArchive next %}Get the data of the previous and next articles respectively and assign it toprevandnextVariable.
    • {% if prev %}and{% if next %}Such a condition judgment ensures that the corresponding link will be displayed only when there is a previous or next article.
    • {{ prev.Link }}and{{ prev.Title }}Used to output the URL and title of the article.
    • <span>Label used to wrap text, you can adjust the display content as needed, for example “Previous article:” or “Next article:”.
    • When there are no adjacent articles,<span>没有了</span>Will display, you can also customize this part of the text.

  3. Save and update:Save the modifieddetail.htmlFile and upload it to the corresponding template directory on the server.To ensure that the changes take effect immediately, it is recommended that you log in to the AnQi CMS backend, click on the "Update Cache" function in the left-hand menu, and clear the system cache.

Optimize display effect (optional)

To make these 'Previous' and 'Next' link look more beautiful and consistent with your website's overall design, you can design it according to your own website design, fordivelements (such as.article-navigation/.prev-articleand.next-article) andaTags andspanAdd the corresponding CSS style to the label.

For example, you can make 'Previous Article' displayed on the left and 'Next Article' displayed on the right, and add appropriate spacing and styles to enhance visual guidance.

/* 示例CSS样式，您可以根据实际需求调整 */
.article-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 16px;
    color: #666;
}

.prev-article, .next-article {
    flex: 1;
    display: flex;
    align-items: center;
}

.prev-article {
    justify-content: flex-start;
}

.next-article {
    justify-content: flex-end;
    text-align: right;
}

.article-navigation a {
    color: #337ab7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-navigation a:hover {
    color: #23527c;
    text-decoration: underline;
}

.article-navigation .label {
    margin-right: 5px;
    color: #999;
}

.article-navigation .title {
    font-weight: bold;
    max-width: 80%; /* 限制标题宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-navigation .no-article {
    color: #ccc;
}

Add this CSS code to your website's style file (usuallypublic/static/{您的模板名称}/css/style.cssor a similar path).

Summary

By following these simple steps, you can add practical 'Previous' and 'Next' article links to the article detail page of Anqi CMS.This can not only effectively improve the reading experience of users on your website, guide them to browse more content, but also help search engines better understand and index the internal link structure of your website to a certain extent, thus having a positive impact on SEO.

Frequently Asked Questions (FAQ)

  1. Question: Why did I add the code, but the link did not appear on the page?

    • Answer:First, please confirm that you have saved and correctly uploaded the modified template file.Next, try to log in to the Anqi CMS backend, perform the "update cache" operation, and ensure the system reads the latest template file.In addition, also check whether the article currently being viewed indeed has a previous or next article. If the article is the first or last in a category, the corresponding navigation links will naturally not be displayed.

  2. Why does 'Previous article' or 'Next article' always show 'No more' even though I know there are other articles?

    • **Ans