How to display the links and titles of the previous and next related articles on the document detail page of Anqi CMS?

In AnQi CMS, adding links and titles for "Previous Article" and "Next Article" on the document detail page is a very practical feature to enhance user experience and content consistency.This not only encourages users to browse more content, but also helps optimize the internal links of the website.AnQi CMS provides simple and efficient template tags, allowing us to easily meet this requirement.

Understanding the template mechanism of Anqi CMS

The template system of AnQi CMS is designed to be very intuitive, it adopts syntax similar to the Django template engine.This means you can output variables and call function tags with specific symbols.Generally, we need to use double curly braces in template files{{ 变量名 }}To display data, the function tag is represented by single curly braces and the percent sign.{% 标签名 参数 %}To invoke, and with.{% end标签名 %}This structure makes the template code easy to understand and maintain.

When you browse to the detail page of a document, the environment of Anqi CMS has automatically loaded the relevant information of the current document.Therefore, to obtain the "previous" and "next" articles, we do not need to pass the ID of the current document, the system will automatically identify and match.

Implement the 'Previous' document link and title

To display the 'Previous' article of the current document, we can use the built-in functions of Anqi CMSprevArchiveLabel. This label will intelligently search for articles published before the current document and provide their details.

How to use the label:

{% prevArchive prev %}
  {# 在这里，'prev' 是您为上一篇文章数据定义的变量名 #}
  {# 您可以使用 'prev.Link' 获取链接，'prev.Title' 获取标题 #}
{% endprevArchive %}

Code example:

On your document detail page (usually)archiveunder the modeldetail.htmlOr a custom detail page template) you can add code to display the previous article:

<div class="article-pagination">
  <div class="prev-article">
    {% prevArchive prev %}
      {% if prev %}
        <a href="{{ prev.Link }}" title="{{ prev.Title }}">
          <span class="pagination-label">上一篇：</span>
          <span class="pagination-title">{{ prev.Title }}</span>
        </a>
      {% else %}
        <span class="pagination-label">上一篇：</span>
        <span class="pagination-title">没有了</span>
      {% endif %}
    {% endprevArchive %}
  </div>
  {# 这里将放置下一篇文章的代码 #}
</div>

In this example, we first{% prevArchive prev %}Define a variable namedprevvariable to receive the data of the previous article. Then, use{% if prev %}Determine if the previous article exists. If it does, build a link that includes it{{ prev.Link }}and the title{{ prev.Title }}of<a>Label; if not exists, then display "None", which can well handle boundary cases and improve user experience.

Implement "Next article" document link and title

Similar to the 'Previous article', AnQi CMS providesnextArchivetags to get the 'Next article' of the current document.

How to use the label:

{% nextArchive next %}
  {# 在这里，'next' 是您为下一篇文章数据定义的变量名 #}
  {# 您可以使用 'next.Link' 获取链接，'next.Title' 获取标题 #}
{% endnextArchive %}

Code example:

Following the code of the 'Previous article' above, you can use the samediv.article-paginationAdd the display of the next article in the structure:

<div class="article-pagination">
  {# 上一篇文章的代码，如上所示 #}
  <div class="prev-article">
    {% prevArchive prev %}
      {% if prev %}
        <a href="{{ prev.Link }}" title="{{ prev.Title }}">
          <span class="pagination-label">上一篇：</span>
          <span class="pagination-title">{{ prev.Title }}</span>
        </a>
      {% else %}
        <span class="pagination-label">上一篇：</span>
        <span class="pagination-title">没有了</span>
      {% endif %}
    {% endprevArchive %}
  </div>

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

By such a layout, users can clearly see and click to go to related previous and next articles after reading the current article, forming a smooth reading path.

Integration and Practice Notes

1. Template File Location: Add the above code snippet to your document detail page template. According to the Anqi CMS convention, this is usuallytemplate/您的模板目录/{模型table}/detail.htmlOr you can customize the template file for a specific document in the background.
2. CSS styleTo make the 'Previous' and 'Next' link look more beautiful, you can add the corresponding CSS style according to your website designdiv.article-pagination/div.prev-article/div.next-articleas well as the display of its internal elements.
3. encoding issues: Please ensure that your template file uses UTF-8 encoding consistently to avoid garbled display of Chinese titles and other content.
4. case sensitivity of tagsThe template tags of AnQi CMS are strictly case-sensitive, for exampleprevArchiveandPrevArchiveare different, please make sure to keep them consistent.

By following these simple steps, you can effectively display the links and titles of the 'previous' and 'next' articles on the document detail page of AnQi CMS, thereby optimizing the user experience and enhancing the interactivity of the website content.

Frequently Asked Questions (FAQ)

1. Why is the previous/next link not displayed on my document detail page?There may be several reasons. First, please check if the template file has been added correctly.prevArchiveandnextArchiveLabel, and spelled correctly. Secondly, ensure that the current document indeed exists a previous or next article that can be linked (for example, if it is the first article published, there is no previous one).Additionally, these tags usually only have valid output on the document detail page (i.e., the page that displays the content of a single article), and may not have results on other pages (such as list pages).

2. I want the previous/next link to display not only the title but also a thumbnail or the publication date, can it be done?Of course you can.prevArchiveandnextArchivethe tags returned byprevandnextThe variable contains various information about the article, such asThumb(thumbnail),CreatedTime(Publish time) and so on. You can call these fields in the same way as you get the title, and format them appropriately in the template. If you need to format the timestamp, you can use{{ prev.Thumb }}or{{ next.CreatedTime }}to call these fields and format them appropriately in the template. If you need to format the timestamp, you can use{{ stampToDate(prev.CreatedTime, "2006-01-02") }}such tags.

3. What is the order in which the 'Previous Article' and 'Next Article' are sorted?Of Security CMSprevArchiveandnextArchiveThe tag is usually determined by the publication time of the article (or the internal ID).They usually look for the previous or next article closest in time and in the same category as the current article.This means that if the order of your article's publication changes, the links to the previous/next articles will also be adjusted accordingly.