In AnQi CMS, the homepage carries the important responsibility of attracting visitors and displaying the latest dynamics.Generally, displaying the latest article list in a prominent position on the homepage is an effective way to enhance user experience and guide content browsing.AnQi CMS with its flexible template system and powerful content management features makes this operation very direct and efficient.
Understand the content structure of Anqi CMS
Before getting started with showcasing the latest articles, we first need to have a basic understanding of the content organization method of Anqi CMS.AnQi CMS allows users to define different types of content through the 'content model', such as 'article model', 'product model', and so on.Every article belongs to a specific model and can be further divided into different categories.At the template level, Anqi CMS provides a rich set of tags to help us extract and display the required data from these structured contents.
The core method to display the latest article list on the homepage
We will mainly rely on the Anqicms provided to display the latest articles released on the homepagearchiveListTemplate tag. This tag is specifically used to retrieve lists of various documents (including articles) and provides multiple parameters to accurately control the content we want to display.
First, make sure your homepage template file (usually/template/你的模板名/index.html) is ready. Then, add it at the location where you want to display the article list,archiveList.
Key parameter analysis:
moduleIdThis parameter is used to specify which content model article you want to retrieve. By default, the article model usually corresponds tomoduleIdWith1. If you have customized the content model, please check the corresponding ID of your article model in the background "Content Management -> Content Model".orderTo get the 'latest published' articles, we need to sort by publication time in reverse order. You can setorder="id desc"ororder="CreatedTime desc".id descusually means sorting in reverse order by the creation order of the articles in the database.CreatedTime descIt is clear that it is in reverse order according to the release time. In practice, the two may have similar effects, butCreatedTime descexpresses "latest release" more accurately.limitThis parameter is used to control the number of articles displayed. For example,limit="10"It will display the most recent 10 articles.type: By default,archiveListlabel'stypethe parameter to"list"It will directly list the specified number of articles.
How to build an article list:
archiveListThe tag creates an iterable array of articles within itself. We can useforLoop to process each article one by one, and extract the title, link, publication time, abstract, or thumbnail information of each article for display. Each article is usually named in the loop.itemYou can go throughitem.Title/item.Linkand so on.
For the publication time of the article, AnQi CMS returns a timestamp. In order to display it in the date format we are accustomed to, we need to usestampToDateLabel formatting. This tag is very flexible and can output various date and time styles based on the format string you provide.
Example code and interpretation
Here is a simple code example showing how to display the latest 5 articles published on the Anqi CMS homepage:
<section class="latest-articles">
<h2>最新发布</h2>
<ul class="article-list">
{% archiveList archives with moduleId="1" order="CreatedTime desc" limit="5" %}
{% for item in archives %}
<li class="article-item">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
<h3>{{ item.Title }}</h3>
<p class="article-meta">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
<p class="article-description">{{ item.Description|truncatechars:100 }}</p>
</a>
</li>
{% empty %}
<li class="no-articles">目前还没有最新文章发布。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
Code interpretation:
{% archiveList archives with moduleId="1" order="CreatedTime desc" limit="5" %}:- Here is a variable named
archivesthat will contain the list of articles we have retrieved. moduleId="1"We specified that we are getting the content under the 'article model'.order="CreatedTime desc"Ensure that the articles are arranged from new to old based on the publication time.limit="5"Limited to displaying only the latest 5 articles.
- Here is a variable named
{% for item in archives %}: Loop through.archivesEach article. In each loop, the data of the current article can be accessed throughitemVariable access.{% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">{% endif %}: This part of the code checks if the article has a thumbnail (item.Thumb), and if it does, it displays the picture.<h3>{{ item.Title }}</h3>: Display the article title.<p class="article-meta">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>:item.CreatedTimeGet the timestamp of the article's publication.stampToDate(..., "2006-01-02")Format the timestamp into a string in the format of “Year-Month-Day”. You can modify the format string as needed, for example"2006年01月02日 15:04"Will display more detailed time.
<p class="article-description">{{ item.Description|truncatechars:100 }}</p>: Display the summary of the article (item.Description) Here, the following was used.truncatechars:100Filter, truncates the summary to a maximum of 100 characters, and automatically adds an ellipsis to prevent the content from being too long and affecting the layout.{% empty %}<li class="no-articles">目前还没有最新文章发布。</li>{% endfor %}: This is a very practical structure. IfarchivesThe list is empty (i.e., no articles meet the criteria), it will displayemptythe content of the block instead of displaying an empty list.
**Practical Recommendations and Optimization**
- Control the number of displays.The home page article list should not be too long, generally 5-10 articles are enough, too many articles may affect page loading speed and user attention.
- Optimize image loadingIf you have many thumbnails in your article, consider adding the lazy load attribute to the images to improve the loading speed of the first screen.The AnQi CMS supports lazy loading of images in content details.
- Improve article contentEnsure each article has a clear title, an attractive thumbnail, and a concise summary. These elements are crucial for increasing the click-through rate of the article list.
- SEO-friendly: Article titles and links are an important part of search engine optimization, ensuring
item.Titleanditem.Linkproper use helps search engines better understand your content.
By following these steps, you can easily display the latest published article list on the homepage of the Anqi CMS website.The AnQi CMS template tag function is powerful and intuitive, making content display very flexible.
Frequently Asked Questions (FAQ)
1. Can I display the latest articles in a specific category on the homepage?
Of course you can. You canarchiveListthe tag withcategoryIdParameters to specify the ID of one or more categories. For example, to display the latest articles with category ID 2, you can change the tag to:{% archiveList archives with moduleId="1" categoryId="2" order="CreatedTime desc" limit="5" %}If you want to display multiple category articles, the IDs should be separated by commas, likecategoryId="2,3,4".
What will be displayed if my article does not have an uploaded thumbnail?
In Anqi CMS, if you do not manually upload a thumbnail when publishing an article, but the article content contains images, the system will automatically try to extract the first image in the article content as a thumbnail. If the article content does not contain any images either, then in the templateitem.Thumboritem.LogoWill be empty, you can use{% if item.Thumb %}such a judgment to avoid displaying a broken image link, or set a default placeholder to ensure the beauty of the page.
3. How to adjust the display format of the article publishing time?
The display format of the article publishing time is determined bystampToDateThe second parameter (format string) determines. This format string follows the Go language's time formatting rules. For example:
"2006-01-02": Display as年-月-日For example,2023-10-27)"2006年01月02日": Display asXXXX年XX月XX日For example,2023年10月27日)"2006-01-02 15:04": Display as年-月-日 时:分For example,2023-10-27 14:30) You can modify this format string according to your needs to achieve the desired display effect.