How to display the links and titles of the previous and next documents in AnQi CMS?
How to easily display the link and title of the previous and next document in AnQi CMS?
When browsing website articles, we often hope to smoothly jump from the current content to the previous or next related article. This seamless reading experience not only enhances user satisfaction but also has a positive effect on the overall content structure and SEO optimization of the website.AnQi CMS is well-versed in this, providing content operators with an extremely convenient way to deploy such navigation functions with its flexible and powerful template engine.
Intelligent Navigation: Tags of the previous and next document
In the Anqi CMS template system, to implement the display of the previous and next documents, it mainly depends on two core tags:prevArchiveandnextArchive.These tags are specifically designed for document detail pages, capable of intelligently recognizing the current document and automatically finding adjacent documents in the same category or time series.They not only return the full link of the previous or next document but also provide key information such as document titles, allowing developers to easily build intuitive navigation elements on the page.
Actual operation: how to call in the template
AnQi CMS adopts a template syntax similar to Django, by{% 标签名 %}to handle logic,{{ 变量名 }}to output content. Suppose we are editing the detail page template of a document (usuallydetail.htmlOr a custom document template), you can call the information of the previous and next documents like this:
We first use{% prevArchive prev %}Tag to try to get the previous document and assign it toprevthe variable. Then, through{% if prev %}Make a judgment, ifprevThe variable has a value (i.e., there is a previous document), then build a<a>link, through{{ prev.Link }}Output the link address, through{{ prev.Title }}Output the document title. IfprevIf there is no value, it will display the prompt 'There is no previous one'. The calling method of the next document is similar, usingnextArchiveTags andnextvariables only.
<div class="article-navigation">
<div class="prev-article">
{# 获取上一篇文档 #}
{% prevArchive prev %}
{% if prev %}
<span class="nav-label">上一篇：</span>
<a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
{% else %}
<span class="nav-label">没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{# 获取下一篇文档 #}
{% nextArchive next %}
{% if next %}
<span class="nav-label">下一篇：</span>
<a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
{% else %}
<span class="nav-label">没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
With this concise code, the website can have basic article navigation functions. You can adjust it as needed<span>Text inside labels, or add additional CSS styles to links, so that they maintain consistency with the overall design style of the website.
A richer navigation display
In addition to basic links and titles,prevArchiveandnextArchivetags can also provide more detailed document information, such as document thumbnails (Thumb), brief description (Description) etc. This allows us to create more attractive graphic navigation, thereby enhancing the user experience.
For example, if you want to display thumbnails in the next navigation at the same time, you can expand it like this:
<div class="next-article-enhanced">
{% nextArchive next %}
{% if next %}
<span class="nav-label">下一篇：</span>
<a href="{{next.Link}}" title="{{next.Title}}" class="article-preview-link">
{% if next.Thumb %}
<img src="{{next.Thumb}}" alt="{{next.Title}}" class="article-thumbnail" />
{% endif %}
<span class="article-title">{{next.Title}}</span>
{% if next.Description %}<p class="article-description">{{next.Description|truncatechars:50}}</p>{% endif %}
</a>
{% else %}
<span class="nav-label">没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
With these flexible field combinations, you can customize various forms of document navigation according to the website design style, whether it is a simple text link, or a card-like navigation with a preview image and a brief description, AnQi CMS can easily handle it, making your content display more attractive.
Summary
In summary, Anqi CMS passesprevArchiveandnextArchiveThese two concise and powerful template tags greatly simplify the implementation process of website document navigation.This not only improves the user browsing experience, promotes the internal flow of website content, but also helps search engines better understand and capture the structure of the website, providing strong support for SEO optimization.For content operators who pursue efficiency and flexibility, mastering the use of these tags will undoubtedly make your website content more vibrant.
Frequently Asked Questions (FAQ)
1.prevArchiveandnextArchiveDoes the tag support use on the article list page?These tags are specifically designed for the document detail page.They need a "current document" as a reference point to find the previous or next one.On the article list page, since there is no clear 'current document', these tags cannot take effect directly.
2. If the document does not have a previous or next article, will the page report an error?Can't. As shown in the example in the article, you can use{% if prev %}or{% if next %}Such a conditional judgment is used to check for the existence of the previous or next document.If not available, you can choose to display prompts such as 'No previous article' or 'No next article' instead of causing the page to error.
3. What information can you get besides the title and link to beautify the navigation of the previous/next article?exceptTitleandLink, you can also use{{ prev.Thumb }}(thumbnail),{{ prev.Description }}(brief description),{{ prev.CreatedTime }}(Publish time) and other fields to get more information. This information can help you build richer, more visually appealing navigation elements, such as navigation cards with image previews.