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 internal website links.AnQiCMS (AnQiCMS) fully understands this and provides flexible and powerful features to help you easily achieve this goal.
Core feature analysis: Related document tagsarchiveList
To display a list of recommended articles related to the current article content in AnQi CMS, you will mainly use a very key template tag -archiveList. This tag can not only be used to obtain a list of regular articles or paginated lists, but also includes dedicated logic for handling 'related articles' recommendations.
When you are using the article detail pagearchiveListthe tag and use it.typethe parameter to"related"At that time, 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 retrieve related articles,limit="5"and controls the number of recommended articles.
Understand the definition of 'related': various recommendation logic
When evaluating 'relevance', AnQi CMS does not follow a single fixed pattern. It provides multiple logic to help you define the association between articles more accurately.
first, Default association logicThis is based on the current article's category. The system will try to find other articles with similar publication times or content associations within the same category for recommendation.This means that reasonably planning your article classification structure is the basis for improving the default recommendation accuracy.
Secondly, you can also uselikeParameters to further refine the recommendation logic:
Keyword-based recommendation (
like="keywords"): If you want the recommended articles to be more precise around a certain topic, you can use the keywords of the articles. When settinglike="keywords"At that time, the system will match other articles' keywords based on the current article's set keywords, thereby recommending articles with closer themes.This requires you to carefully fill in the keywords of the article when publishing (you can manually enter or select from the keyword library when editing the article in the background content management).At the same time, by using the 'Document Tag' feature to label the article appropriately, it can also indirectly enhance the matching effect of keywords.Manually associated recommendation (
like="relation")For some articles where you need to specify the association explicitly, such as the next article in a series of tutorials or an extended reading of a product introduction, Anqi CMS provides the function to manually set associated articles. When you arearchiveListSet in the labellike="relation"At that time, the system will only display those articles that you manually associate in the current article editing interface.This provides you with极高的flexibility, ensuring that certain articles are always displayed in the recommended list.
Code实战：In the template add the recommended article list
Next, let's look at a complete example that demonstrates how to add a recommended article list with thumbnails, titles, and summaries in the article detail page template. This example combineslike="keywords"The recommendation logic to provide more content-related recommendations.
Assuming your article detail page template file (for example)archive/detail.htmlIt is necessary to add a recommended article area in the following 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
archiveListThe tag obtained recommended articles and specifiedtype="related"andlike="keywords"and limited the display5articles. - By
{% if relatedArchives %}Determine if there are articles returned to avoid displaying an empty list in an unattractive way. - Loop through
relatedArchivesin each item (item), and display its title (item.Title) and link (item.Link) and thumbnail (item.Thumb). - used
item.Description|truncatechars:80A filter to extract the article summary, ensuring the layout of the recommendation list is neat. - If the article does not have a thumbnail, we provide the path to a default placeholder image to ensure the display effect.
- The accompanying CSS style code can help you quickly build a responsive and beautiful recommendation article layout.