As an experienced website operations expert, I know how important it is to flexibly use the template tags of a powerful content management system like AnQiCMS to present content, which is crucial for improving the user experience and operational efficiency of the website. Today, let's delve into a seemingly simple but highly practical question:How toprevArchiveAdd custom prefixes or suffixes to the output text of a tag?

In AnQiCMS,prevArchiveTags are a convenient tool used to automatically display the link to the previous article in scenarios such as article detail pages.It greatly simplifies the navigation between website content, enhancing the user's browsing depth.prevArchiveThe tag itself does not provide a direct parameter to add a prefix like 'Previous: ' or a suffix like ' (Click to read) '. But this does not mean that we cannot achieve such an effect, on the contrary, the flexible template engine of AnQiCMS provides us with a clever solution.

Deep understandingprevArchiveHow the tag works

First, let's reviewprevArchiveThe basic usage of tags. According to the AnQiCMS documentation, its usage is very concise:

{% prevArchive prev %}
  {# 在这里编写如何展示上一篇文章的逻辑 #}
{% endprevArchive %}

The tag's purpose is to retrieve the "previous" article data of the current article and assign it to a custom variable we define, for example, as shown in the exampleprev. If there is a previous article,prevThe variable will contain the article'sId/Title/Linketc. details; if not present,prevthe variable is empty.

The key isprevArchiveThe tag itselfNot supported to add prefix or suffix directly via parametersThis means we cannot be like some labels, in{% prevArchive prev with prefix="上一篇：" %}This syntax is specified directly. However, this is the flexibility of the AnQiCMS template engine: all of our prefix and suffix text can be written directly{% prevArchive ... %}and{% endprevArchive %}The content inside, surroundingprevOrganize the actual content of the variable.

An ingenious method to implement custom prefixes or suffixes

SinceprevArchiveThe tag provided information about the previous article.prevA variable, we can wrap and decorate it freely in the template as we would with any other variable.This is like filling content inside an empty framework and can be freely decorated around the content.

  1. Add prefix text:If you want to add "Previous article: " before the title of the previous article, just write these words directly<a>in front of the tag or wrapping element.

    For example:

    {% prevArchive prev %}
  {% if prev %}
    <p>上一篇：<a href="{{prev.Link}}">{{prev.Title}}</a></p>
  {% else %}
    <p>没有了</p>
  {% endif %}
{% endprevArchive %}

    In here, the text 'Previous: 'is directly used as<a>the fixed prefix of the tag.

  2. Add suffix text: Likewise, if you want to add a suffix like “(Click to read)” after the title, we place it after the<a>closing tag.

    For example:

    {% prevArchive prev %}
  {% if prev %}
    <p><a href="{{prev.Link}}">{{prev.Title}}</a> （点击阅读）</p>
  {% else %}
    <p>没有了</p>
  {% endif %}
{% endprevArchive %}

    “(Click to read)”has become a suffix of article titles easily.

  3. Add both prefixes and suffixes simultaneously:Combining both is also simple, just arrange the position of text and HTML structure as needed.

    For example:

    {% prevArchive prev %}
  {% if prev %}
    <p>阅读上一篇：<a href="{{prev.Link}}">{{prev.Title}}</a> （查看详情）</p>
  {% else %}
    <p>已是第一篇文章</p>
  {% endif %}
{% endprevArchive %}

    Thus, you can see a complete navigation prompt with both prefix and suffix.

  4. Handling the scenario of 'No previous article': {% if prev %}This condition judgment is very important. When the current article is the first article in the category,prevthe variable will be empty. At this time,{% else %}The content of the block will be executed.Here, we can customize the prompt text, such as 'This is the first article' or 'No more', so that the user can clearly know the status of the current content.

  5. more advanced customization (combined with other tags):The strength of AnQiCMS templates lies in their compositibility.You can even embed other dynamic information or HTML structures in the prefix or suffix.

    {% prevArchive prev %}
  {% if prev %}
    <p>上一篇：<a href="{{prev.Link}}">{{prev.Title}}</a> 发布于 {{stampToDate(prev.CreatedTime, "2006年01月02日")}}</p>
  {% else %}
    <p>已是最新内容</p>
  {% endif %}
{% endprevArchive %}

    We used herestampToDateA filter to format the creation time of the article, presenting it in a more user-friendly manner.

By using the aforementioned method, you can not only add simple prefixes or suffixes to the text, but you can also use HTML tags to beautify them, such as using<span>/<strong>/<em>Use tags to change the style, or add icons and other visual elements to make your website navigation more vivid and guiding.This customization method based on template logic fully demonstrates the flexibility and openness of the AnQiCMS template engine, allowing content operators to control the details of page content display to the maximum extent possible.

Comprehensive code example

To better demonstrate these customization techniques, the following is a comprehensive example with various custom methods, which you can adjust according to your needs:

<div class="article-navigation">
  {% prevArchive prev %}
    {% if prev %}
      <div class="prev-article">
        <span class="navigation-label">← 上一篇：</span>
        <a href="{{prev.Link}}" title="{{prev.Title}}">
          {{prev.Title}}
          <span class="read-more">（继续阅读 →）</span>
        </a>
        <span class="publish-date">发布日期：{{stampToDate(prev.CreatedTime, "2006-01-02")}}</span>
      </div>
    {% else %}
      <div class="no-prev-article">
        <span class="navigation-label">← 已是首篇</span>
      </div>
    {% endif %}
  {% endprevArchive %}
</div>

In this example, we have added prefixes and suffixes to<span>Labels for style control via CSS, and combined with the dynamic display of the publication date, making the navigation information more rich.

In summary, althoughprevArchiveThe tag itself does not provide direct prefix/suffix parameters, but the design philosophy of AnQiCMS template engine allows us to fully achieve the desired customization effects by freely organizing text, HTML, and other AnQiCMS tags within the tag.This flexible mechanism is exactly the embodiment of AnQiCMS as an enterprise-level content management system, providing operators with powerful content control capabilities.

Frequently Asked Questions (FAQ)

  1. WhyprevArchiveDo tags not have direct prefix/suffix parameters?AnQiCMS's template tag design tends to separate data acquisition (tag function) from data display (template content).prevArchiveThe core function of the tag is to retrieve the data of the "previous article" and provide it to the template variable, rather than directly controlling its final display format.This design allows template authors to have more freedom, flexibly organizing the presentation of these data according to different page styles and needs, without relying on the fixed parameters built into the tag itself.

  2. Can I use HTML tags or CSS styles in the prefix or suffix?Of course, since the prefix or suffix text is directly written in the template code, you can like