As an experienced website operations expert, I know the importance of navigation design on the article detail page for user experience and Search Engine Optimization (SEO).A well-designed and comprehensive detail page that not only guides users to explore more content deeply, effectively reduces the bounce rate, but also helps to build a good site structure through internal links, assisting search engines in crawling and ranking.AnQiCMS (AnQiCMS) with its high-performance architecture based on the Go language and flexible template mechanism, provides us with powerful and convenient tools to achieve these refined operational goals.

Today, let's delve into a seemingly simple yet extremely practical feature: how to cleverly display the link to the 'previous article' on the article detail page.

The Secret Weapon for Enhancing User Experience and SEO: Previous/Next Links

In daily content operations, we have published a large number of articles.After a user finishes reading an article of interest, they often hope to smoothly jump to related or consecutive content.At this point, the navigation links to the 'previous' and 'next' articles are particularly important.They act like signposts, guiding readers through our website, not only improving the continuity of reading and increasing the time spent on the site, but also enhancing the link weight of the website through natural internal links, which helps search engines better understand and index our content.

AnQiCMS is one of the design philosophies that is 'to make content management more efficient and SEO more friendly'.It provides a series of ready-to-use template tags, allowing us to easily achieve these refined functions without complex secondary development.For the "Previous" and "Next" links, AnQiCMS also provides a simple and powerful solution.

The Elegant Solution of AnQiCMS: prevArchivewithnextArchiveTag

AnQiCMS's template system adopts syntax similar to Django template engine, which is very easy to get familiar with. In the article detail page, to display the "previous" and "next" links, we mainly use two built-in tags:prevArchiveandnextArchive.

These tags are specially designed for documents (Archive) by AnQiCMS, and they can intelligently identify and return the relevant information of the previous and next documents according to the order of the current article's publication.This means you don't need to manually maintain the order of articles or complex query logic, AnQiCMS has already taken care of everything at the bottom layer.

prevArchiveandnextArchiveLabels do not require any additional parameters, they will automatically find the adjacent documents based on the document ID of the current page. They can provide including the document ID （Id），Title（Title), link (Link）as well as the thumbnail （ThumbDetailed information, including ）and more, is enough to meet our needs for building beautiful and practical navigation links.

However, in practical application, we still need to consider an important case: if the current article is the first one or the only one, then there is no 'previous article' to speak of.Similarly, if it is the latest one, there is no 'next one'.The AnQiCMS template system also takes this into account, allowing us to elegantly handle these edge cases with simple condition judgments.

Practice exercise: Add the 'Previous article' document link step by step.

Now, let's add the link of the previous document step by step to the article detail page of AnQiCMS.

Step 1: Locate your article detail page template file.

In AnQiCMS, template files are usually located in/templatethe directory. For the article detail page, you will find a similar to{模型table}/detail.htmlfor examplearticle/detail.htmlOr you can customize the detail template. If you have set a dedicated template for a specific article or category, please find the corresponding file. This file is the core of your modification.

For example, in a typical article model, you might edittemplate/default/article/detail.htmlfile.

Second step: Write template code, add a 'previous article' link

We usually place the 'Previous' and 'Next' links at the bottom of the article content or as a navigation module in the sidebar.Here, we take the example of adding at the bottom of the article content.

Please find yourdetail.htmlFile, and after the main content of the article (usually{{archive.Content|safe}}add the following code snippet:

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

Let's parse this code:

  • {% prevArchive prev %}This is the 'Previous Article' tag of AnQiCMS. It tries to get the information of the previous document of the current document and assign it toprevthis variable.
  • {% if prev %}This is a conditional judgment, checkingprevDoes the variable exist. If it exists (i.e., there is a previous document), then executeifThe code within the block.
  • <a href="{{prev.Link}}" title="{{prev.Title}}">{{prev.Title}}</a>This will create a hyperlink, the link address isprevThe URL of the document, the displayed text isprevThe document title.titleThe property settings help with SEO and user experience.
  • {% else %}If:prevIf the variable does not exist (i.e., there is no previous document), then execute.elseThe code within displays a prompt indicating “No previous post”.
  • {% endprevArchive %}This isprevArchiveEnd of tag.
  • {% nextArchive next %}It has the same internal logic asprevArchiveIt is exactly the same, but it retrieves the information of the “next” document and assigns it tonextVariable.

By such a structure, your article detail page can intelligently display 'Previous' and 'Next' links, and provide friendly prompts when there are no adjacent articles.

Step 3: Beautify your navigation links (optional)

This code provides the basic link functionality, but the style may be rather plain.You can beautify these links by adding CSS styles, such as making them float left and right, increasing spacing, changing font color, etc., so that they integrate better with your website design.You can add styles in the CSS file at the same level as the template file, or directly indetail.htmlof<style>Write inline styles within the tag.

/* 示例CSS样式，请根据您的网站设计进行调整 */
.article-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.prev-article, .next-article {
    flex: 1;
}

.prev-article {
    text-align: left;
}

.next-article {
    text-align: right;
}

.article-navigation a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.article-navigation a:hover {
    text-decoration: underline;
}

.article-navigation span {
    color: #6c757d;
    font-size: 0.9em;
}

You can add these CSS codes to your theme stylesheet, for examplepublic/static/css/style.cssIn the bracket, then refresh the page to view the effect.

Further thinking: More possibilities for improving user experience.

In addition to the basic text links, you can also further enrich the 'Previous/Next' navigation:

  • Add thumbnailsIf:prevornextThe document has thumbnails ({{prev.Thumb}}), you can display it together to make navigation more intuitive and attractive.
  • Show a brief descriptionUtilize{{prev.Description}}Display a short article introduction below the link to help users quickly understand the content.
  • Integrate related articles: Below the "Previous/Next" navigation, you can usearchiveListTags, combined withtype="related"parameters to display more documents related to the current article topic, further extending the user's access path.

AnQiCMS's modular and flexible tag system, giving you infinite possibilities in content operation.

Summary

Provided by AnQiCMSprevArchiveandnextArchiveLabel, we can easily implement the 'Previous' and 'Next' navigation functions on the article detail page. This not only optimizes the user's reading experience and reduces the bounce rate, but also through the construction of a reasonable internal link structure,