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

In website content operations, the subtle aspects of user experience often determine the overall effectiveness.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 enhance the user's browsing efficiency and comfort.addFilter, dynamically add arrow symbols to these navigation titles, making them clear at a glance.

Understand the requirements: Why to dynamically add navigation arrows?

Imagine when a user finishes reading an excellent article and is ready to view more related content. How considerate it would be if there was a clear arrow indicating the direction next to the 'Previous' or 'Next' text navigation.An arrow pointing left (such as “«”) can intuitively tell the user that this is the path to return to old content, while an arrow pointing right (such as “»”) indicates that there is updated content waiting to be explored.This visual guidance not only helps users quickly understand the navigation intent, but also adds a touch of elegance to the page, enhancing the overall user experience.

Core Tools:addThe magic of filters

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

Its 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 will be used to concatenate an article title (a string) with an arrow symbol (another string).

Step by Step Practice: Add a right arrow to the title of the next article

Firstly, let's focus on the navigation of the next article. In Anqi CMS, we usually usenextArchiveThis tag will return an object containing detailed data of the next article. We can access it bynext.TitleGet the title.

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

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

Now, let's try to add a)next.Titleright arrow. The symbol of the right arrow can be simple→or more graphicized.». We will utilizeaddThe filter appends this arrow symbol at 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,|add:" »"isaddapplication of the filter. It willnext.Titlethe string value with a space and an arrow symbol»Concatenate them together. If your arrow symbol is an HTML entity, for example», you may need to use it in conjunction with it 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 suit: Add a left arrow to the title of the 'Previous' article.

Similarly, for the 'Previous' article, we useprevArchiveTag to get its information, and byprev.Titleto get the title.

The basic 'Previous' navigation code may look like this:

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

To add a left arrow to the title of the "previous" article, we place the arrow symbol at the beginning of the title. It is important to note the order of concatenation, placing the arrow string ataddFilter parameter position:

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

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

美化与定制：Choose your favorite arrow symbol

The selection of arrow symbols is diverse, you can choose the most suitable symbol based on the overall style of the website and your design preferences for 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 (more emphasis on direction):
  • Left:«or«(HTML entity)«)
  • Right:»or»(HTML entity)»)
• Triangle arrow:
  • Left:◀(HTML entity)◀)
  • Right:▶(HTML entity)▶)
• Combination symbol:
  • Left:‹(HTML entity)‹)
  • Right:›(HTML entity)›)

Remember, if you are using HTML entities (such as«), please make sure to addaddafter 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 messages: <span>{{ '当前用户：'|add:user.Name }}</span>
• **Concatenate data from different fields to