In AnQi CMS, adding links and titles of "Previous Article" and "Next Article" to 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.The AutoCMS provides simple and efficient template tags, allowing us to easily meet this requirement.

Understanding the template mechanism of the AnQi CMS

The template system of Anqi CMS is designed very intuitively, it uses syntax similar to Django template engine.This means you can output variables and call function tags with specific symbols.{{ 变量名 }}To display data, and the function tags are represented by single curly braces and percent signs{% 标签名 参数 %}to call, and{% end标签名 %}end. This structure makes the template code easy to understand and maintain.

When you browse to the details page of a document, the environment of the Anqi CMS has automatically loaded the relevant information of the current document.Therefore, to get the 'Previous Article' and 'Next Article' posts, we do not need to pass an extra ID of the current document; the system will automatically identify and match.

Implementing the 'Previous Article' document link and title

To display the 'Previous Article' of the current document, we can use the built-in function of Anqi CMSprevArchiveTag. This tag will intelligently find articles published before the current document and provide their details.

How to use the tag:

{% 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 go through:{% prevArchive prev %}Define a variable namedprevvariable to receive the data of the previous article. Then, use{% if prev %}Check if the previous article exists. If it does, construct a link to it{{ prev.Link }}And the title{{ prev.Title }}of<a>Label; if not exists, it displays 'None', which can well handle boundary conditions and improve user experience.

Implement 'Next Article' document link and title

Similar to the previous one, the AnQi CMS providesnextArchivetags to get the next article of the current document.

How to use the tag:

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

Code example:

Following the code of the previous 'previous one', you can alsodiv.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>

Through 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 Precautions

  1. Location of template file: Add the above code snippet to your document detail page template. According to the agreement of Anqi CMS, this is usuallytemplate/您的模板目录/{模型table}/detail.htmlOr, a template file customized for a specific document in the background.
  2. CSS styleTo make the 'Previous' and 'Next' links look more aesthetically pleasing, you can add corresponding CSS styles according to your website design.div.article-pagination/div.prev-article/div.next-articleEnglish and its internal elements display.
  3. Encoding issuePlease make sure your template file uses UTF-8 encoding uniformly to avoid garbled characters in Chinese titles and other content.
  4. Label case sensitivityThe template tags of AnQi CMS are strictly case-sensitive, for example,prevArchiveandPrevArchivethey are different, please ensure consistency.

By following these simple steps, you can effectively display the links and titles of 'Previous Article' and 'Next Article' on the document detail page of the Anqi CMS, thereby optimizing the user experience and enhancing the interactivity of the website content.

Common Questions and Answers (FAQ)

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

2. I want the previous/next link to not only display the title but also show a thumbnail or publication date, can it be done?Of course you can.prevArchiveandnextArchiveTag returnsprevandnextThe variable contains various information about the article, such asThumb[Thumbnail],CreatedTime(Publish Time) etc. You can call these fields as you get the title, and properly format them in the template. If you need to format the timestamp, you can use{{ prev.Thumb }}or{{ next.CreatedTime }}to call these fields, and properly format them 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?Anqi CMS'sprevArchiveandnextArchiveThe label is determined by the publishing time of the article (or the internal ID of the system).English, they would look for the previous or next article that is in the same category as the current one and has the closest publication time.This means that if the publishing order of your articles changes, the links to the previous/next articles will be adjusted accordingly.