As an experienced website operations expert, I know that a smooth and intuitive user experience is crucial for the success of a website.Auto CMS (AutoCMS) features a powerful template engine and a rich set of built-in tags, allowing content operators to easily create both aesthetically pleasing and practical website features.prevArchive, see how it combines with HTML's <a>Labels cleverly combined to create an engaging "Previous Document" navigation for your website.
When users browse your website content, whether reading in-depth articles or viewing product details, the ability to easily jump to related or consecutive content can greatly enhance their reading experience and reduce the bounce rate.The 'Previous' and 'Next' navigation is the foundation for achieving this seamless transition.prevArchiveLabels, born for this purpose.
UnderstandingprevArchiveThe core function of the tag
prevArchiveLabels are a powerful tool in the Anqy CMS template system, primarily responsible for automatically searching and returning relevant information about the logical "previous" document within the context of the current document. This means that when your users are reading a specific article or product detail page,prevArchiveCan intelligently find the document data released before this document.
The design concept of this tag is very simple and intuitive.No additional parameters are required..You just need to call it in the template of the document details page, and it will automatically identify the current document and try to get the data of the previous document.If the previous document is found, it will return an object containing various properties of the document; if not, it will return an empty value, which is a very important judgment basis for building navigation.
prevArchiveThe label returns the previous document object that contains many practical information, the most critical of which, and which we use to build clickable navigation, is the document'sId/Title(Title),Link(link) as well asThumbThumbnail and other fields. With this information, we can flexibly build navigation links that match the website design style.
toprevArchiveWith<a>Tag fusion, create navigation
Now, let's take a look at how toprevArchiveembed the data obtained from the<a>tag into the HTML tag to create a fully functional previous document navigation.
Imagine you are designing a template for an article detail page.At the bottom of the article content, you want users to see a clear 'Previous Article' link, which can be clicked to directly jump.
Firstly, in your AnQiCMS template file (usually{模型table}/detail.html), you need to callprevArchiveLabel to get the data of the previous document. We will give this data a variable name, such asprev, for later reference.
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" class="prev-article-link">
<span class="nav-arrow">←</span>
<span class="nav-text">上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-prev-article">没有更多内容了</span>
{% endif %}
{% endprevArchive %}
Let's go through this code step by step:
{% prevArchive prev %}and{% endprevArchive %}: This is the syntax wrapped by AnQiCMS template engineprevArchivefor tags.prevThis is a temporary variable name set for the data of the previous document. All operations related to the previous document will be centered around thisprevvariable.{% if prev %}This is a very important conditional judgment. It checksprevThe variable is empty. As mentioned earlier, if the current document is the first article in a series, or there are no other documents preceding it,prevArchiveit may return an empty value.This judgment ensures that the navigation link is only rendered when there is indeed a previous document, thus avoiding the display of an invalid link or a blank area, optimizing the user experience.<a href="{{ prev.Link }}" class="prev-article-link">: This is the standard HTML hyperlink tag.hrefThe value of the property, we set dynamically.{{ prev.Link }}.prev.LinkExactly.prevArchiveThe URL of the previous document provided by the tag. In this way, the jump target of the link will be automatically generated based on the actual previous document.class="prev-article-link"This is a CSS class name, you can add styles to this link according to your design requirements, making it stand out on the page.<span class="nav-arrow">←</span>and<span class="nav-text">上一篇：{{ prev.Title }}</span>On:<a>Label inside, we usually place some text to inform the user of the link's purpose. Here, we use an arrow icon←combined with the prefix text “Previous:”{{ prev.Title }}Dynamic display of the title of the previous document.prev.TitleSimilarly byprevArchiveTags provided. This combination method makes the link content clear and easy to understand, allowing users to know where they will be redirected at a glance.{% else %}and<span class="no-prev-article">没有更多内容了</span>WhenprevThe variable is empty (i.e., there is no previous document) when,elseThe code of the branch will be executed.We display a friendly reminder message here, informing the user that 'No more content' instead of leaving an empty navigation area, which also helps to enhance the user experience.
To make navigation more attractive, you can even consider adding a thumbnail of the previous document to the link:
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" class="prev-article-link has-thumb">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="prev-article-thumb">
{% endif %}
<div class="nav-content">
<span class="nav-label">上一篇：</span>
<span class="nav-title">{{ prev.Title }}</span>
</div>
</a>
{% else %}
<span class="no-prev-article">没有更多内容了</span>
{% endif %}
{% endprevArchive %}
In this advanced example, we added a{% if prev.Thumb %}judgment to ensure that the image is displayed only when there is a thumbnail in the previous document.imgTagssrcproperty is dynamically bound to{{ prev.Thumb }},altproperty is used to{{ prev.Title }}Provide image description, which is beneficial for SEO and improves user experience.
Why is such navigation crucial?
From the perspective of website operation, building a perfect "Previous/Next" navigation is not just for aesthetics; it has real operational value:
Firstly,Optimize user experience (UX).Smooth navigation can reduce the operational cost of users, making them feel comfortable and convenient on your website.When users can easily jump from one article to another, they are more likely to delve deeper and discover more valuable content.
其次，对Search Engine Optimization (SEO)大有裨益。内部链接是SEO策略中不可或缺的一部分。prevArchive和对应的nextArchive标签（用于下一篇文章）创建的链接，为搜索引擎爬虫提供了清晰的爬取路径，帮助它们更好地理解您网站的内容结构和不同文章之间的关联性。This helps in the reasonable transmission of 'link weight' within your website, improving the overall page inclusion and ranking.
再者，这促进了内容发现和用户粘性.By guiding users to browse related or serialized content, you can increase users' time spent on the website and encourage them to become loyal readers of the site.This is an important means to improve conversion rate and brand influence for self-media operators and content marketing strategies.
In summary, the Anqi CMS'sprevArchiveTags provide an extremely efficient and elegant way to build navigation for the previous document.By using simple template code, you can easily provide users with a smooth browsing experience, while also laying a solid foundation for the website's SEO performance and content depth mining.
Common Questions and Answers (FAQ)
1. If the current document is the first article in a series or has no preceding documents,prevArchiveWhat will be displayed?
When there is no previous document,prevArchiveThe label will return an empty value. That's why we recommend using such conditional judgments in the template.{% if prev %}such conditional judgments. IfprevThe variable is empty, you can display a custom prompt, such as "No more content" or "This is the first article", instead of displaying a non-clickable link, thus keeping the interface tidy and user-friendly.
2. In addition to the title and link,prevArchivewhat kind of document information can I provide to beautify the navigation?
prevArchiveThe data of the previous document obtained by tags is quite rich. In addition toTitleandLink, you can also accessId(Document ID),Keywords(Keywords)、Description[Summary],CategoryId(Category ID),Views（Views）、Logo(Cover first image)