As an experienced website operations expert, I am well aware of the importance of navigation design on detail pages for user experience and search engine optimization (SEO).A well-structured and comprehensive detail page, which not only guides users to explore more content deeply and effectively reduce the bounce rate, but also helps to build a good site structure through internal links, facilitating search engine crawling and ranking.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 Post Links

The Elegant Solution of AnQiCMSprevArchiveWithnextArchivetags

AnQiCMS 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 will 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 based on the current article's publication order.This means you don't need to manually maintain the order of articles or complex query logic, AnQiCMS has already handled all this at the bottom layer for you.

prevArchiveandnextArchiveTags do not require any additional parameters, they will automatically find adjacent documents based on the current page's document ID. They can provide including document ID (Id), title (Title), link (Link）as well as the thumbnail (Thumb) and rich information including them are enough to meet our needs for building beautiful and practical navigation links.

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

Practical Exercise: Gradually add the 'Previous article' document link.

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

Step 1: Locate your article detail page template file

In AnQiCMS, template files are usually located in/templatedirectory. For article detail pages, you will find something similar to{模型table}/detail.html[for example]article/detail.html）or your custom detail template. If you have set a dedicated template for a specific article or category, please also find the corresponding file. This file is the core for your modifications.

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

Step 2: Write template code, add a 'Previous Article' link

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

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

<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 analyze this code snippet:

  • {% prevArchive prev %}This is the 'Previous Article' label of AnQiCMS. It tries to get the information of the previous document of the current document and assign it.prevthis variable.
  • {% if prev %}This is a conditional judgment, checkingprevDoes the variable exist. If it exists (i.e., there is a previous document), then executeifCode 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, and the displayed text isprevThe document's title.titleThe property settings help with SEO and user experience.
  • {% else %}Ifprevthe variable does not exist (i.e., there is no previous document), then executeelseThe code inside the block displays the prompt “No previous article”.
  • {% endprevArchive %}：This isprevArchiveThe end of the tag.
  • {% nextArchive next %}And its internal logic withprevArchiveCompletely similar, but it retrieves the information of the “next article” document and assigns it tonexta variable.

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

Step 3: Beautify Your Navigation Links (Optional)

The code above provides 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., to make them more integrated with your website design.detail.htmlof<style>Write inline styles in the tags.

/* 示例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 example)public/static/css/style.cssIn the parenthesis, then refresh the page to see the effect.

Extended Thinking: More Possibilities for Enhancing User Experience

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

  • Add thumbnailsIfprevornextThe document has thumbnails({{prev.Thumb}}You can display it all together to make navigation more intuitive and attractive.
  • Display a brief description: Utilizing{{prev.Description}}Show a brief introduction of the article below the link to help users quickly understand the content.
  • Integrate related articlesBelow the "Previous/Next" navigation, you can utilizearchiveListTags, combinedtype="related"parameters to display more documents related to the current article theme, further extending the user's access path.

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

Summary

Through the services provided by AnQiCMS,prevArchiveandnextArchiveTags, we can easily implement 'Previous article' and 'Next article' navigation on the article detail page. This not only optimizes the user's reading experience and reduces the bounce rate, but also builds a reasonable internal link structure.