When managing and operating a website, the article list page is an important entry point for users to browse content and discover information.To enhance user experience, it is a common practice to dynamically add a 'Read More' or 'View Details' link text to each title in the list to clearly guide visitors to the article details.The AnQiCMS provides a powerful and flexible template system, allowing us to easily implement this feature.
When users see the article title and brief summary on the list page, a clear 'Read More' link can quickly guide them to click and access the full content.This not only makes the page layout more tidy, but also provides a clear call to action for users, and also has a positive impact on the internal link structure and SEO of the website.
Implementing this feature, we mainly operate on the template files of the Anqi CMS, which is typically used to display article lists, for example/template/你的模板名/article/list.htmlor/template/你的模板名/article/index.html. AnQi CMS uses a syntax similar to Django template engine, using{% ... %}to define tags (such as loops, conditional judgments), as well as{{ ... }}to output variable values.
The core idea is to use the built-in security CMSarchiveListtags to obtain article data, and throughforLoop through each article. Inside the loop, we can access various properties of each article, including its detail page link and title.
Firstly, you need to find the template file responsible for rendering the article list page. This is usually located in the corresponding model directory of the template theme you are using, for example, for the (article) model, it may betemplate/您的主题名称/article/list.html.
Open this file and you will see a code block that usesarchiveListtags to get the data of the article, as well as aforloop to traverse these articles. The detailed link of the article can be accessed throughitem.LinkEnglish article title isitem.TitleThe abstract is usuallyitem.Description.
Now, we can add a 'Read More' link to the detail page of the article at any appropriate position in this loop, such as below each article abstract or next to the article title.
The following is a specific code example that demonstrates how to add a 'Read More' link under each article's title and abstract on the article list page.
{# 假设这是您的文章列表页模板文件，例如：/template/您的主题名称/article/list.html #}
<div class="article-list-container">
{# 使用 archiveList 标签获取文章列表，moduleId="1" 通常代表文章模型 #}
{% archiveList articles with type="page" moduleId="1" limit="10" %}
{% for item in articles %}
<div class="article-item">
<h3 class="article-title">
{# 文章标题本身可以是一个链接 #}
<a href="{{item.Link}}">{{item.Title}}</a>
</h3>
{# 如果文章有缩略图，可以显示出来 #}
{% if item.Thumb %}
<a href="{{item.Link}}" class="article-thumb">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
{# 文章摘要 #}
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
{# 显示一些文章元信息 #}
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量: {{item.Views}}</span>
{# 核心部分：动态添加“阅读更多”链接文本 #}
<a href="{{item.Link}}" class="read-more-link">阅读更多 »</a>
</div>
</div>
{% empty %}
{# 如果当前分类下没有文章，显示此提示 #}
<p class="no-content">当前分类下暂无文章。</p>
{% endfor %}
{% endarchiveList %}
{# 分页代码通常紧随文章列表之后，这里仅为示例结构，具体样式请根据您的模板调整 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for p in pages.Pages %}
<a class="{% if p.IsCurrent %}active{% endif %}" href="{{p.Link}}">{{p.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
</div>
In the above code,{{item.Link}}auto will dynamically be replaced with the actual link address of each article阅读更多 »is the custom link text we define.class="read-more-link"The setting is for your convenience to beautify this link through CSS styles, making it look more like a button or highlighted.
Advanced Optimization and Personalization:
- Diversified Link Text:You can replace 'Read More' with 'View Details', 'Learn More', or any other text that fits the tone of your website. For example:
<a href="{{item.Link}}" class="read-more-link">查看详情</a>. - Add style:By modifying the CSS file of your template, you can add background color, border, padding, and other styles to the class, making it appear as a button to enhance visual appeal.
.read-more-linkClass adds background color, border, padding, and other styles to make it appear as a button, further enhancing visual appeal. - Condition display:If you only want to display the 'Read more' link when the article has an abstract or exceeds a certain length, you can use
ifcondition judgment. For example:{% if item.Description %}<a href="{{item.Link}}">阅读更多</a>{% endif %}. - Open in a new window:If you want the article to open in a new window after clicking the link, you can
<a>tag.target="_blank"Properties:<a href="{{item.Link}}" target="_blank">阅读更多 »</a>. - SEO properties:As needed, you can add
rel="nofollow"properties to tell the search engine not to follow the link, for example:<a href="{{item.Link}}" rel="nofollow">阅读更多 »</a>.
Through these steps, you not only added a practical "Read More" link to the article list page of the Anqi CMS, but also optimized the user browsing experience through flexible template customization