It is crucial to provide a smooth user experience in the operation of our website.When visitors finish reading a richly written article, they often hope to follow the thread and continue browsing other content in the same category or related topics.It is particularly important to display the titles and links of the 'Previous' and 'Next' articles on the article detail page in this case.This not only significantly enhances the user's reading experience and reduces the likelihood of them leaving the website, but also effectively guides users to deeply browse within the website, indirectly helping to improve the website's SEO performance.
AnQiCMS was designed with a thorough consideration of these actual needs for content operation, providing a set of simple and efficient template tags. This allows you to easily implement the navigation function of previous and next articles on the article detail page without writing complex code.
Understand the key template tags
In Anqi CMS, the realization of this function mainly depends on two built-in template tags:prevArchive(Previous article) andnextArchive(Next article).
prevArchiveTags:Used to get the data of the previous article of the current article.nextArchiveTags:Used to get the data of the next article of the current article.
These tags are designed to automatically identify the current article and intelligently find the previous and next articles in the same category in terms of publication time.They are context-sensitive, which means you just need to place them in the template of the article detail page, and the system will automatically handle the search logic.
How to useprevArchiveandnextArchive
The usage of these tags is very intuitive, following the syntax rules of the Django template engine. You usually find them in the template files of the article detail page (for example)article/detail.htmlorproduct/detail.htmlAdd them in the configuration of your content model【en】：Add them in the configuration of your content model.
Let's see how they work through a simple example【en】：Let's see how they work through a simple example.
Basic structure:【en】：Basic structure:
<div class="article-navigation">
<div class="prev-article">
{%- prevArchive prev %}
{%- if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
{%- else %}
<span>没有上一篇了</span>
{%- endif %}
{%- endprevArchive %}
</div>
<div class="next-article">
{%- nextArchive next %}
{%- if next %}
<span>下一篇：</span>
<a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
{%- else %}
<span>没有下一篇了</span>
{%- endif %}
{%- endnextArchive %}
</div>
</div>
Code analysis:
{%- prevArchive prev %}and{%- nextArchive next %}The start and end of a label.prevandnextIs the temporary variable name you define for the data of the previous and next articles.-Symbols (such as{%-and-%}）Used to remove the empty lines that may be generated by template parsing, making the generated HTML cleaner.{%- if prev %}and{%- if next %}： This is a conditional judgment.prevArchiveandnextArchiveThe label will return an empty value when there is no corresponding previous or next article. Through thisifJudgment, you can elegantly handle this situation by choosing to display a prompt like 'No previous post' or completely hide the navigation item.{{ prev.Link }}and{{ next.Link }}:prevandnextThe variable contains the complete information of the article.LinkField used to obtain the full link address of the article, which can be used directly.<a>Tagshrefproperties.{{ prev.Title }}and{{ next.Title }}:TitleField used to obtain the title of the article, which can be directly displayed to the user.title="{{ prev.Title }}"andtitle="{{ next.Title }}"To add a link:titleProperties are a good practice, which can display the article title when the user hovers over it, enhancing user experience and accessibility, and also helpful for SEO.
More available article fields
ExceptTitleandLink,prevandnextVariables also provide many useful fields that you can call as needed, for example:
Id: The unique ID of the article.Thumb【en】The thumbnail address of the article, which can be very useful if your navigation includes images.Description【en】The summary of the article.CreatedTime【en】The publication time of the article (timestamp format, and needs to be used)stampToDateFormat it, for example,{{ stampToDate(prev.CreatedTime, "2006-01-02") }}).Views: The number of views of the article.
For example, if you want to display thumbnails in the navigation at the same time, you can modify it like this:
<div class="article-navigation">
<div class="prev-article">
{%- prevArchive prev %}
{%- if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{%- if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb">{% endif %}
{{ prev.Title }}
</a>
{%- else %}
<span>没有上一篇了</span>
{%- endif %}
{%- endprevArchive %}
</div>
<div class="next-article">
{%- nextArchive next %}
{%- if next %}
<span>下一篇：</span>
<a href="{{ next.Link }}" title="{{ next.Title }}">
{%- if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumb">{% endif %}
{{ next.Title }}
</a>
{%- else %}
<span>没有下一篇了</span>
{%- endif %}
{%- endnextArchive %}
</div>
</div>
Remember that the above code only provides the HTML structure. You can enhance its appearance by applying CSS, making it blend seamlessly with your website's design.
PassprevArchiveandnextArchiveThese two simple yet powerful tags make the navigation function of the article detail page on Anqi CMS easily accessible.It not only optimizes the user experience, but also indirectly helps in the depth reading of website content and SEO performance.
Common Questions (FAQ)
Why isn't the link to my previous/next article displaying?
Answer: There may be several reasons for this.Firstly, please confirm that the current article indeed has a previous or next article (for example, it is the first or last article in a category, or there is only one article in the category).{% if prev %}or{% if next %}Such conditional judgment, if the condition is not met, the navigation part may be hidden. In addition, please ensure that your article has been published and the correct category has been set.
Q:prevArchiveandnextArchiveDoes the tag support specifying a model ID or category ID to get the previous/next article?
Answer:prevArchiveandnextArchiveLabels are context-sensitive.They automatically identify the current article's model and category, and then search for the previous/next article within the scope of that model and category.moduleIdorcategoryIdThe parameter is specified. This design simplifies usage and ensures the logic of navigation.
Question: Can I display other information besides the title in the link of the previous/next article, such as the publication date or the number of views?
Answer: Absolutely.prevArchiveandnextArchiveWithin the tags,prevornextThe variable is a complete article object, you can access all its available fields as you would on the article detail page. For example, you can display{{ prev.CreatedTime }}(publish time) or{{ next.Views }}(Views). It is important to note,CreatedTimeis a timestamp, you need to use the formatting function provided bystampToDateto format it, for example,{{ stampToDate(prev.CreatedTime, "2006-01-02") }}.