As a senior CMS website operation personnel, I know the importance of content in attracting and retaining users.Efficient content management and elegant user experience are the foundation of website success.In AnQiCMS, the flexible template tag system is the key to achieving this goal.Today, I will introduce in detail how to use the template tags of AnQiCMS to cleverly obtain the previous and next articles as well as related documents, thereby optimizing your content layout and enhancing the user experience and SEO performance of the website.
Optimize user navigation: Get the previous document
On the article detail page, providing a link to the 'Previous Article' is an important way to enhance user reading experience and page dwell time.By guiding users to browse more on-site content, we can effectively reduce the bounce rate and provide search engines with a richer internal link structure.
AnQiCMS provides an intuitiveprevArchiveGet the previous content of the current document by label.This tag does not require any parameters, it will intelligently retrieve the previous document that meets the conditions according to the current document's publication time or ID.
You can use the following method in your article detail template to call the data of the previous document:
{% prevArchive prev %}
<div class="article-navigation prev-article">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb" />
<span class="nav-title">上一篇: {{ prev.Title }}</span>
</a>
{% else %}
<span class="no-prev-article">没有了，这已是第一篇</span>
{% endif %}
</div>
{% endprevArchive %}
Here,prevThe variable will contain the details of the previous document, such asId(Document ID),Title(Title),Link(Link),Thumb(thumbnail) and so on. Through a simpleifDetermine, you can elegantly handle the case where there is no previous document, ensuring the friendliness of the page display.
Guide the user to the next document
The link to the "next" document plays the same role of bridging the past and the future as the previous document.It encourages users to continue exploring your website, forming a coherent reading path.This continuity is not only beneficial to users, but also indicates to search engines that your website content is rich and well-organized.
In AnQiCMS,nextArchiveTags are special tools for retrieving the next document. WithprevArchivelike tags, it also does not require additional parameters and will automatically locate the next content of the current document based on it.
The following is an example of the template code to get the next document.
{% nextArchive next %}
<div class="article-navigation next-article">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="nav-title">下一篇: {{ next.Title }}</span>
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb" />
</a>
{% else %}
<span class="no-next-article">没有了，这已是最后一篇</span>
{% endif %}
</div>
{% endnextArchive %}
nextThe variable will carry all available fields of the next document, allowing you to flexibly display titles, links, thumbnails, and other information.Arrange these navigation elements reasonably, which will greatly enhance the browsing depth of users on your website.
Expand your reading horizon: get related documents
The recommendation of relevant documents is an indispensable part of content marketing and user experience strategy.It can recommend more content that may be of interest to users based on the current theme of the article, effectively extending the duration of user sessions, and guiding users to discover the depth of the website's value.
In AnQiCMS, obtaining relevant documents is not done through a separate 'related documents' tag, but through flexiblearchiveListtags, combined with itstype="related"Parameters can be used to achieve this. This design allows you to customize the logic for retrieving related documents based on different requirements.
The following is the template code and parameter description for retrieving related documents:
<div class="related-articles">
<h3>相关推荐</h3>
<ul>
{% archiveList archives with type="related" limit="5" %}
{% for item in archives %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="related-thumb" />
<span class="related-title">{{ item.Title }}</span>
</a>
<p class="related-description">{{ item.Description|truncatechars:80 }}</p>
</li>
{% empty %}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
archiveListTags are used.type="related"When, the related content will be automatically obtained based on the current document. You can further refine the matching logic of the related documents through the following parameters:
limit：Used to specify the number of relevant documents to display, for examplelimit="5"will display 5 articles.like：This parameter is the key to customizing the relevance matching rules.- When set to
like="keywords"When auto, the system will match related documents based on the keywords of the current document and recommend content similar to the keywords. - When set to
like="relation"When, the system will only display in the background document editing interface, the content you manually specify as "related documents". - If not specified
likeParameters, the system will default try to get the document that is "closest" to the current document in the same category as a related recommendation.
- When set to
archivesThe variable here is a document list array, you can iterate over it, and access eachitemofId/Title/Link/Thumb/DescriptionUsing fields to display relevant content. Reasonably utilizing these parameters can build a highly personalized and accurate relevant content recommendation module.
Summary and **Practice
Through the clever use of AnQiCMS providedprevArchive/nextArchiveandarchiveList(type="related"
In practice, I recommend that you always pay attention to the following points:
- Design consistencyEnsure that the link styles of the previous, next, and related documents are consistent with the overall design style of your website, providing a smooth visual experience.
- Information integrity：Except for the title and link, try to display a thumbnail or a brief description to help users quickly judge whether to click.
- Real-time feedback：Using AnQiCMS update mechanism, ensure that these navigation links always point to the latest and most accurate content.
Through these meticulous optimizations, not only can you make users stay longer on your website, but you can also bring more exposure and conversion opportunities to your content.
Common Questions (FAQ)
Q1: Why did I use the article detail page in the article?prevArchiveornextArchivetag, but didn't show the link to the previous or next document?
A1The cause of this situation is usually several.Firstly, please check if there is a "Previous" or "Next" document that meets the conditions in the current document.This means that there must be other documents in the same category as the current document, and their publication time or ID must be before or after the current document.If the current document is the first or last in the category, the corresponding link will not be displayed.Additionally, please make sure that all documents have been published. Drafts or unpublished documents will not be retrieved by these tags.
Q2: I want to letarchiveListThe "related documents" displayed by the label are more precise, what methods can be used to control the relevance?
A2Of course, you can.archiveListTags intype="related"Mode, providedlikeParameters for fine-grained relevance definition. You can setlike="keywords", so that the system can automatically match similar documents based on the keywords of the current document; or setlike="relation"This will only display documents manually associated while editing documents in the background. If you have not setlikeParameter, the system will recommend documents close in the same category by default. Choose the one most suitable for your content strategy.likeValue, which can significantly improve the accuracy of recommendations.
Q3: Are the display styles of these navigation links (previous, next, related documents) fixed? Can I customize their appearance?
A3: AnQiCMS's template tags are responsible for providing data, without interfering with the display style on the frontend.This means you have complete freedom to customize the layout and appearance of these links through HTML and CSS.You can add custom HTML structure, CSS class names, and even work with JavaScript to achieve more interactive effects as needed in the template file, to seamlessly integrate with your website design.