As an experienced website operations expert, I know that in today's mobile-first era, responsive web design and mobile experience are crucial.AnQiCMS provides a high-efficiency and flexible content management solution while fully considering this point.prevArchiveIt has compatibility with responsive design and actual display effects on mobile templates.
prevArchiveTag: A powerful tool for article navigation.
In content-based websites, users often hope to browse related articles smoothly.How to guide readers to discover the 'previous' exciting content after they finish reading an article is the key to improving user retention and page browsing depth.prevArchiveTag is a convenient tool provided by AnQi CMS for this purpose.
Its core function is very intuitive: In the article detail page, it will automatically obtain the relevant information of the "previous" document in the current article sequence. You just need to simply use it in the template.{% prevArchive prev %}...{% endprevArchive %}This structure can easily obtain the data of the previous document, for example:
prev.Id：Document IDprev.Title：Document titleprev.Link：Document linkprev.Thumb：Document thumbnail (if any)
It is worth noting that,prevArchiveThe tag itself does not accept any parameters.This means it is very "intelligentThis design makes template development more concise, eliminating the need for complex logical judgments, and developers only need to care about how to display these data.
Compatibility in responsive design and mobile template
Anqi CMS provides various ways to deal with different terminal devices in template design, includingAdaptive template type/Code adaptation template typeas well asPC + mobile phone independent site modeNo matter which mode you adopt,prevArchivethe tags have shown excellent compatibility, and their data output capability is not affected by the type of terminal device.
Seamless connection under adaptive/coding adaptation modeWhen your website uses adaptive or code adaptation mode, it is usually with the same set of HTML templates and CSS style sheets, adjusting the layout and style through CSS media queries (Media Queries) to adapt to different screen sizes. In this mode,
prevArchiveThe label retrieves and outputs document data (such as titles, links, thumbnails, etc.) that is completely consistent.It does not change the data itself due to the change in screen size.prevArchiveThe display style, size, and position of the generated content on mobile or tablet devices, ensuring its aesthetics and readability.For example, on the PC side, it may display the 'Previous' and 'Next' links side by side, while on the mobile side, it can be stacked or displayed as a full-width block.Flexible customization under PC + mobile terminal independent site modeFor those websites that have extremely differentiated experiences on PC and mobile platforms, Anqi CMS supports a PC + mobile independent site mode. In this mode, the system will automatically load the location according to the user's device type,
mobile/A dedicated mobile template under the catalog. Here,prevArchiveThe tag function remains consistent with the PC template, it still provides the correct "Previous" document data. This means that you canmobile/In the template file under the directory, redesigned completely according to the characteristics of mobile devicesprevArchiveThe display method.You can choose to display only the article title on mobile, or set different sizes, positions for the thumbnail, and even integrate it into the bottom fixed navigation bar unique to mobile, providing more convenient sliding or click operations.The Anqi CMS provides data, and how to interpret this data is entirely dependent on the design freedom of the mobile template.
In summary,prevArchiveThe compatibility of the tag is reflected in its ability to provide data stably and accurately, while the specific "display effects" are completely the stage of the template designer and frontend developer.It consistently provides backend data support, allowing the frontend to play freely.
Practical considerations for the display effect on mobile devices
Using on mobile devicesprevArchiveAt this point, we should pay close attention to the following points to optimize the user experience:
- A concise and clear layout:The screen space is limited, avoid stacking too much information.Usually, a clear 'Previous' text link, along with a直观的箭头图标, or a small thumbnail, is enough.
- Touch-friendly:Ensure
prevArchiveThe clickable area (i.e., "hot spot") is large enough to facilitate finger clicks, avoiding accidental operations. Adequate padding effectively increases the clickable area. - Performance optimization:If you choose to display thumbnails (
prev.ThumbMake sure the image is optimized.The Anqi CMS is built with image compression, WebP format conversion, and other functions (which can be configured in "Content Settings"), using these features can significantly reduce image loading time and improve the speed of mobile page display. - Consistency:Maintain the position, style, and interaction of the "Previous" and "Next" navigation throughout the website. This helps users form habits and reduce learning costs.
- Handling empty states:When there is no previous document (for example, the current is the first article in a series),
prevArchivethe tag will not return any data. At this time, in the template using{% if prev %}It is particularly important to make a judgment, to avoid displaying an empty or unattractive navigation block.
{# 移动端模板中 prevArchive 的一个简化示例 #}
<div class="article-navigation">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" class="prev-article">
<i class="icon-arrow-left"></i>
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="prev-thumb" loading="lazy">
<span class="prev-title">{{ prev.Title|truncatechars:15 }}</span> {# 移动端标题截断 #}
</a>
{% else %}
<span class="no-prev-article">没有上一篇了</span>
{% endif %}
{% endprevArchive %}
{# 这里通常会放置 nextArchive 标签，以提供下一篇导航 #}
</div>
By carefully designing the CSS style, the above code snippet can present a beautiful and functional "Previous" navigation on mobile devices.
Summary
Of Security CMSprevArchiveTags, with their concise and efficient features, perfectly integrate into the development process of responsive design and mobile templates.It delegates the core data extraction task to the system while leaving the flexibility of display entirely to the template developer.prevArchiveAll can stably output the required previous document information, helping the website to provide a smooth and friendly content browsing experience on any device.As website operators, we should make full use of these tools, combining user experience**practice, to create an excellent browsing environment for users.
Frequently Asked Questions (FAQ)
1.prevArchiveDoes the label automatically adjust its display style according to the screen size on mobile devices?
prevArchiveThe tag itself is responsible for retrieving and outputting the data of the previous document (such as title, link, thumbnail, etc.), it will not automatically adjust the display style.The adjustment of the style is entirely dependent on the media query rules you write in CSS, or the HTML structure and CSS styles specifically designed for mobile devices.Therefore, to achieve a display effect that adapts to different screens, you need to control the visual presentation of these data through front-end technology.
2. If the current article is the first in the series,prevArchivewhat will the tag display?
If the current article does not have a 'previous article' content (for example, it is the first article in its category or timeline),prevArchiveThe variables defined by the tag after execution (such as the example inprevIt will be empty. This meansprev.Link/prev.TitleThese fields will not have values. To avoid blank or incorrect navigation areas on the page, it is strongly recommended to use the template in conjunction with{% if prev %}This conditional judgment is used to render content, ensuring that the navigation link is only displayed when there is a previous article.
3. Can I set completely different ones for mobile and PC endpoints?prevArchiveNavigation layout, even displaying different information?
Of course, Anqi CMS supports independent site mode for PC and mobile phones, which means you canmobile/Create a completely independent set of templates under the directory. In this mobile-end template, you can useprevArchivetags to get the same data as the PC end, but you can choose according to the characteristics of the mobile device,