In website operation, providing a list of recommended articles related to the current content is an important strategy to enhance user experience, prolong user stay time, and optimize the internal links of the website.AnQiCMS (AnQiCMS) knows this well and provides flexible and powerful features to help you easily achieve this goal.
Core Function Analysis: Related Document TagsarchiveList
To display a list of recommended articles related to the current article content in the Anqi CMS, you mainly use a very critical template tag——archiveListThis tag can be used not only to obtain the general article list or pagination list, but also includes special logic for handling "related articles" recommendations.
When you use the tag in the article detail page:archiveListtag and set itstypeparameter settings"related"When, the system will intelligently recommend related articles based on the content of the current article. This greatly simplifies the complexity of template development, allowing you to write complex query logic.
The basic calling method can be like this:
{% archiveList relatedArchives with type="related" limit="5" %}
{# ... 这里将显示相关文章列表 ... #}
{% endarchiveList %}
Here,relatedArchivesIt is the variable name you define for the recommended article list,type="related"tells the system to fetch relevant articles,limit="5"and controls the number of recommended articles.
Deep understanding of the definition of “relevant”: various recommendation logic
The "Auto CMS" judges "relevance" not only in one fixed pattern, but also provides various logic to help you define the association between articles more accurately.
Firstly,Default association logicThis is based on the category of the current article.The system will attempt to find other articles with similar categories, similar publication times, or related content for recommendation.This means that reasonably planning your article classification structure is the basis for improving the default recommendation accuracy.
Also, you can furtherlikerefine the recommendation logic by
keyword-based recommendation (}
like="keywords")：If you want to recommend articles that are more precise around a certain topic, you can use the keywords of the article. When setlike="keywords"When, the system will match the keywords set in the current article with the keywords of other articles, thus recommending articles with themes closer to the topic.This requires you to carefully fill in the keywords when publishing articles (you can manually enter or select from the keyword library when editing articles in the "Content Management" backend).At the same time, using the "Document Tags" feature to label the article appropriately can also indirectly enhance the matching effect of keywords.Manually associate recommendations (
like="relation")For some articles where you need to specify the relevance particularly, such as the next article in a series tutorial, or extended reading for a product introduction, the AnQi CMS provides the feature to manually set associated articles. When you are inarchiveListsetting in the labellike="relation"When, the system will only display those articles that you manually associate with the current article editing interface.This provides you with great flexibility, ensuring that certain specific articles are always displayed in the recommendation list.
Code Practice: Add Recommended Articles List in Template
Next, let's look at a complete example, demonstrating how to add a recommended article list containing thumbnails, titles, and summaries in the article detail page template. This example combineslike="keywords"The recommended logic to provide more relevant recommendations.
Assuming your article detail page template file (for examplearchive/detail.html) needs to add a recommended articles section:
{# 假设这是文章详情页模板的一部分 #}
<article class="article-detail">
{# ... 这里是当前文章的标题、内容等详情 ... #}
</article>
{# 推荐阅读区域 #}
<div class="related-articles">
<h3>推荐阅读</h3>
{% archiveList relatedArchives with type="related" like="keywords" limit="5" %}
{# 检查是否有推荐文章返回 #}
{% if relatedArchives %}
<ul>
{% for item in relatedArchives %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
{# 如果文章有缩略图，则显示 #}
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="related-thumb">
{% else %}
{# 或者显示一个默认的占位图 #}
<img src="/static/images/default-thumb.jpg" alt="默认缩略图" class="related-thumb">
{% endif %}
<span class="related-title">{{ item.Title }}</span>
{# 截取文章描述，保持列表整洁 #}
<p class="related-description">{{ item.Description|truncatechars:80 }}</p>
</a>
</li>
{% endfor %}
</ul>
{% else %}
{# 没有找到相关推荐文章时的提示 #}
<p>暂无相关推荐文章，敬请期待更多精彩内容！</p>
{% endif %}
{% endarchiveList %}
</div>
{# 您可能还需要一些CSS样式来美化这个推荐列表，例如： #}
<style>
.related-articles {
margin-top: 40px;
padding: 20px;
border-top: 1px solid #eee;
background-color: #f9f9f9;
}
.related-articles h3 {
font-size: 20px;
color: #333;
margin-bottom: 20px;
text-align: center;
}
.related-articles ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 20px; /* 文章间距 */
}
.related-articles li {
flex: 1 1 calc(33.333% - 20px); /* 三列布局，减去间距 */
min-width: 280px; /* 最小宽度 */
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.related-articles li a {
text-decoration: none;
color: #333;
display: block;
padding: 15px;
height: 100%;
box-sizing: border-box;
}
.related-articles .related-thumb {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 10px;
}
.related-articles .related-title {
font-size: 16px;
font-weight: bold;
display: block;
margin-bottom: 5px;
line-height: 1.4;
height: 45px; /* 标题固定高度 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.related-articles .related-description {
font-size: 13px;
color: #666;
line-height: 1.5;
height: 60px; /* 描述固定高度 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.related-articles p {
text-align: center;
color: #666;
}
</style>
In this code block:
- We use
archiveListLabel retrieved recommended articles, specified.type="related"andlike="keywords"And limited display.5Articles. - Pass
{% if relatedArchives %}Determine if there are articles returned to avoid an empty list display that is not beautiful. - to iterate
relatedArchivesEach item in theitem)，and display its title (item.Title) and the link (item.Link) and Thumbnail (item.Thumb). - used
item.Description|truncatechars:80Filter to truncate the article summary, ensuring the layout of the recommendation list is neat. - If the article does not have a thumbnail, we provide a default placeholder image path to ensure the display effect.
- The accompanying CSS code can help you quickly build a responsive and beautiful article recommendation layout.