In Anqi CMS, in order to enhance the user experience of the website, we often hope that users can quickly find specific content on the page.For example, when you click on the "View Comments" link next to an article title on a document list page, you can directly jump to the comments section of the article detail page.This not only saves users time, but also makes interaction more direct.
Today, let's discuss how toarchiveListIn a loop, based on the unique identifier of the documentitem.IdDynamically generate a link to jump to the comment area. This process is actually very intuitive, mainly involving the coordination of two parts of the template: the document list page and the document detail page.
How anchor links work
Before we delve into the specific implementation, let's briefly review the basics of anchor links. The core of anchor links lies inURLthe one following#Symbol, followed by a certainHTMLelementID. When the browser loads a page with anchor links, it will automatically scroll to thisIDThe position of the element corresponds. Therefore, the key is to ensure that there is one in the comment section.UniqueandDynamically generatedofID.
Step one: Prepare an anchor for the comment section on the document detail page.
Firstly, we need to add a unique jumpable comment section in the details page of each document (usuallyarchive/detail.htmlor a custom document details template)ID.
The document detail page of AnQi CMS automatically encapsulates all information of the current document when loading, which includes the uniquearchivevariable of the document.ID, that isarchive.IdWe can take advantage of this to dynamically generate aID.
Assuming your comment section is loaded bycommentListtags, you can place it in adivIn the container, and give this container a dynamicIDFor examplecomments-{{ archive.Id }}.
You can arrange the comment section like this in the template file:
{# archive/detail.html 或其他文档详情模板 #}
<div id="comments-{{ archive.Id }}">
<h3>用户评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{# 这里是评论内容的循环展示 #}
{% for item in comments %}
<div>
<span>{{ item.UserName }}</span>
<span>于 {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }} 评论：</span>
<p>{{ item.Content }}</p>
</div>
{% endfor %}
{% endcommentList %}
</div>
{# 如果您还想添加评论表单，也可以放置在此ID范围内，或者紧随其后 #}
<form method="post" action="/comment/publish">
<input type="hidden" name="archive_id" value="{{ archive.Id }}">
{# 其他表单字段，例如用户名、评论内容等 #}
<button type="submit">提交评论</button>
</form>
In this example,id="comments-{{ archive.Id }}"It will be based on the current document'sIDAn unique one will be generated automaticallyID. For example, if the documentIDIs123Then the comment area will beIDit will becomments-123. This is a very reliable dynamicIDgeneration method.
Second step: inarchiveListDynamically generated jump link
Next, we go back to the document list page, which is usingarchiveListThe tag loops to display articles. Here, we need to generate a link to the comment section of the corresponding detail page.
InarchiveListin the loop, each document item's data is assigned toitemvariable. Thisitemvariable also contains the uniqueID(item.Id）and the complete link to the article（item.Link)
Now we can useitem.LinkAnchor point defined earlier with usIDCombined together, it forms a complete jump link:
{# 列表页面，例如 index/index.html 或 {模型table}/list.html #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:150 }}</p>
<div>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
{# 这里的链接会跳转到对应文章详情页的评论区 #}
<a href="{{ item.Link }}#comments-{{ item.Id }}" class="view-comments">查看评论 ({{ item.CommentCount }})</a>
</div>
</div>
{% empty %}
<p>目前没有文章。</p>
{% endfor %}
{% endarchiveList %}
{# 如果是分页列表，别忘了添加分页导航 #}
{% pagination pages with show="5" %}
{# 分页代码 #}
{% endpagination %}
Here, href="{{ item.Link }}#comments-{{ item.Id }}"This line is crucial.item.LinkThe detail page URL of the current list item document will be automatically provided, and then we proceed through#comments-{{ item.Id }}To set the anchor point of the comments sectionIDAttach it to the end of the URL. This way, when the user clicks on this link, it will directly jump to the corresponding article detail page and automatically locate to the comment section of that page.
Integration and optimization
By combining the above two steps, we have achieved inarchiveListDynamically generated jump link to the comment area. This method is simple and efficient, fully utilizing the flexibility of the Anqi CMS template engine.
You can further optimize the user experience, for example:
- Smooth scrolling effect:By introducing some JavaScript code on the page, it can be achieved that when clicking on the anchor link, the page does not jump to the target location instantly, but scrolls smoothly to it, which appears more friendly.
- Comment count display:Utilize
item.CommentCountVariable, dynamically displays the comment count of the current article in the link text, to attract users to click. - Style beautification:Add appropriate CSS styles to the comment section and jump links to make them more prominent and beautiful.
The Anqi CMS, with its powerful content model and flexible template tags, makes this kind of personalized function easily accessible.I hope this guide can help you better utilize AnQi CMS, providing a more convenient and friendly browsing experience for your website visitors.
Frequently Asked Questions (FAQ)
1. Why did I not jump to the comment area after clicking the link after following the steps?
This is usually because of the anchor point of the comment areaIDWith you atarchiveListThe generated link does not match completely. Please check the following points:
- Comments section of the detail page
divHave you setid="comments-{{ archive.Id }}"?EnsureidThe properties are complete and correct, especiallycomments-Prefix and{{ archive.Id }}Section. archiveListLink inhrefWhether the attribute is used correctlyitem.Linkand#comments-{{ item.Id }}?Check the anchor part as well#comments-{{ item.Id }}Whether it matches the detail page'sIDremain consistent.- Check the browser developer tools:Open the browser developer tools (usually press F12), check the comments section of the detail page
divactualIDwhat it is, as well as the list page linkhrefIs the anchor part consistent with it.
2. What should I do if my article detail page does not have a comment section or the comment section structure is different.
If your article detail page currently does not have a comment section, you need to first refer to the Anqi CMS document incommentListthe tag description, inarchive/detail.htmlAdd and configure the comment feature. Ensure that the comment feature is displayed normally before following the first step to add one for it.id="comments-{{ archive.Id }}"The container. If you have other custom structures in your comment section, just make sure to set a dynamic for the outermost comment containerIDfor exampleid="my-custom-comments-{{ archive.Id }}")，thenarchiveListuse the corresponding anchor (for example#my-custom-comments-{{ item.Id }}）to do so.
Can I dynamically link to other parts of the article detail page?
Of course, this method is not limited to the comment section. As long as anyHTMLelement has a uniqueIDyou can bearchiveListconstruct the corresponding anchor link. For example, if you want to link to the "product parameters" section of the article, and this section is in the detail page, then inid="product-specs-{{ archive.Id }}"ofdiv, you can bearchiveListcan be createda href="{{ item.Link }}#product-specs-{{ item.Id }}"such links. The key is to keep the anchor in the list page linksIDwith the target element of theIDdynamic and consistent.