How to use the `add` filter to dynamically add navigation arrow symbols to the titles of `nextArchive` or `prevArchive`?

In website content operation, the subtle aspects of user experience often determine the overall effect.For the article detail page, if the "Previous" and "Next" navigation at the bottom of the page can be designed more intuitively, it will undoubtedly greatly improve the user's browsing efficiency and comfort.This article will discuss how to make use of the powerful template functions of Anqicms, especially the ones inaddFilter, dynamically add arrow symbols to these navigation titles to make them clear.

Understand the requirements: Why do we need to dynamically add navigation arrows?

Imagine when a user finishes reading an exciting article and is ready to view more related content. If there were clear arrow indicators next to the 'Previous' or 'Next' text navigation, it would be such a considerate design.A left arrow (such as “«”) can intuitively tell the user that this is the path to return to old content, while a right arrow (such as “») indicates that there is updated content waiting to be explored.This visual guidance not only helps users quickly understand the navigation intention, but also adds a sense of delicacy to the page design, enhancing the overall user experience.

Core Tool:addThe wonder of filters

The Anqi CMS template system provides a rich set of tags and filters, includingaddThe filter is the key to meet this requirement. It can very flexibly connect or add two values. Whether it is the simple addition of numbers or the concatenation of strings,addFilters can handle it easily.

The basic usage is:{{ 值1|add:值2 }}.

For example, if we want to concatenate two strings, we can write it like this:{{ "安企"|add:"CMS" }}The final result will be:安企CMS

In our scenario, it is used to concatenate the article title (a string) with an arrow symbol (another string).

Gradually practice: Add a right arrow to the title of the next article

First, let's focus on the navigation of the next article. In Anqi CMS, we usually usenextArchiveTag to get the information of the next article. This tag will return an object containing detailed data of the next article, and we can access it bynext.TitleTo get its title.

The basic "next page" navigation code may look like this:

{% nextArchive next %}
  {% if next %}
    <a href="{{next.Link}}">{{next.Title}}</a>
  {% else %}
    <span>没有了</span>
  {% endif %}
{% endnextArchive %}

Now, we try to addnext.Titlea right arrow. The symbol of the right arrow can be simple→or more graphical». We will useaddThe filter appends this arrow symbol to the end of the title:

{% nextArchive next %}
  {% if next %}
    <a href="{{next.Link}}">{{next.Title|add:" »"}}</a>
  {% else %}
    <span>没有了</span>
  {% endif %}
{% endnextArchive %}

In this code block,|add:" »"that isaddThe application of the filter. It willnext.Titleappend a space and an arrow symbol to the string value»Concatenate together. If your arrow symbol is an HTML entity, for example», you may need to配合 to ensure that the browser can correctly parse the HTML entity rather than displaying the original code.safeFilter, for example, use it like this:{{next.Title|add:" »"|safe}}.

Follow the same method: add a left arrow to the title of the previous article

Similarly, for the previous article, we useprevArchiveLabel to get its information and throughprev.Titleto get the title.

Basic 'Previous' navigation code may look like this:

{% prevArchive prev %}
  {% if prev %}
    <a href="{{prev.Link}}">{{prev.Title}}</a>
  {% else %}
    <span>没有了</span>
  {% endif %}
{% endprevArchive %}

In order to add a left arrowhead to the title of 'Previous Article', we place the arrow symbol in front of the title. It is important to note the order of concatenation, placing the arrow string inaddThe location of the filter parameters:

{% prevArchive prev %}
  {% if prev %}
    <a href="{{prev.Link}}">{{ "« "|add:prev.Title }}</a>
  {% else %}
    <span>没有了</span>
  {% endif %}
{% endprevArchive %}

In this example,"« "|add:prev.TitleCombine the left arrow symbol, a space withprev.Titlethe string value to achieve the display effect of "<< Title".

Beautify and customize: choose your favorite arrow symbol

There are many choices for arrow symbols, you can choose the most suitable one according to the overall style of the website and the design preference of the user interface. Here are some commonly used arrow symbols that you can copy and use directly:

• Simple text arrow:
  • Left:<or←
  • Right:>or→
• Double arrow (emphasizing direction more):
  • Left:«or«(HTML entity)«)
  • Right:»or»(HTML entity)»)
• Triangle arrow:
  • Left:◀(HTML entity)◀)
  • Right:▶(HTML entity)▶)
• Combined symbol:
  • Left:‹(HTML entity)‹)
  • Right:›(HTML entity)›)

Remember, if you are using HTML entities (such as«), please make sure toaddadd it after the filter|safesuch as{{ " «"|add:prev.Title|safe }}.

Expand Thinking:addMore Application Scenarios of Filters

Besides adding an arrow to the article title,addThe filter is widely used in the template design of Anqi CMS. For example, you can use it to:

• Dynamically combine complex CSS class names: class="item {{ 'active'|add:category.Id }}"
• Generate custom prompt information: <span>{{ '当前用户：'|add:user.Name }}</span>
• Concatenating data from different fields to