How does AnQiCMS display the latest article list and its publication time on the front end?

In website operation, displaying the latest released content to visitors in a timely manner can not only effectively improve user experience but also enhance the activity of the website.AnQiCMS (AnQiCMS) provides an intuitive and powerful template tag feature, allowing you to easily display the latest article list and its publication time on the website front page.

Understanding the article display mechanism of AnQi CMS

The AnQi CMS uses template tags to call and display website data.This means that you do not need to write complex backend code, just use predefined tags in the template file, and the system can automatically extract and present the required content from the database.For the article list, we mainly usearchiveListTags andstampToDateTime formatting tags.

Core Steps: Call the latest article list and publish time

To display the latest article list and their publish time on the front page, we can follow the following simple steps:

1. Determine the source and sorting method of the articleFirstly, we need to tell Anqi CMS which articles to display and how to sort them.archiveListTags are the key to obtaining the article list.

   • Specify content model (moduleId)In Anqi CMS, articles, products, and other items belong to different 'content models'. Usually, the content model ID for articles is 1. Therefore, you can setmoduleId="1"Make sure we get the article.
   • Specify sorting (order): To display the latest articles, we need to sort by the article's publishing time (usually corresponding to the ID in the database or the creation time) in descending order.order="id desc"It is a commonly used method, which sorts articles in descending order by article ID. Since IDs are incremented, this is usually equivalent to sorting by publishing time from new to old.
   • Limit the number of displayed items (limit): You can limit the number of articles displayed in the list according to your page design, for examplelimit="10"It will display the latest 10 articles.
   • List type (type): For regular list display, it is usually set totype="list".

2. UsearchiveListLabel to retrieve dataIn your template file (for example, the homepage of the websiteindex.htmlor the article list pagearchive/list.htmletc), usingarchiveListtag to wrap the structure of your article list.

   {% archiveList archives with moduleId="1" order="id desc" limit="10" type="list" %}
       {# 文章列表将在这里循环显示 #}
   {% endarchiveList %}
   

   Here, we assign the obtained article list to a variable namedarchives.

3. Loop to output the article title, link, and publication time archiveListThe tag will return an array of article objects, you can useforLoop through this array and extract the details of each article.

   • Article title: Pass{{item.Title}}To display the article title.
   • Article link: Pass{{item.Link}}To get the detail page link of the article.
   • Release Time: The creation time of the article is stored initem.CreatedTimefield, which is a timestamp. To display it in a readable date format, we need to usestampToDatethe tag for formatting, for example{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}Will format it as "Year-Month-Day Hour:Minute".

Complete code example:

Place the following code snippet in the template location where you want to display the latest article list, such as a block or sidebar file on the homepage:

<div class="latest-articles-list">
    <h3>最新文章</h3>
    <ul>
        {% archiveList archives with moduleId="1" order="id desc" limit="10" type="list" %}
            {% for item in archives %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    <span class="article-title">{{ item.Title }}</span>
                    <span class="article-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span> {# 显示年-月-日 #}
                </a>
            </li>
            {% empty %}
            <li>暂无最新文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

This code will generate an unordered list containing the latest 10 articles.Each article displays its title and publication date. If there are no articles, it will display 'No latest articles available.'The prompt.

Location to place the template code.

This code can be flexibly placed in any template file of your website. For example:

• Home page (index.html): is usually used to display the featured content of the website.
• Sidebar (partial/sidebar.html)In a blog or information site, the sidebar is often used to display popular articles, the latest articles, and so on.
• Specific category page (archive/list.html): You can highlight the latest articles under a category at the top or bottom of a category page.

By following these steps, you can easily display the latest article list and its publication time on the front end of the Anqi CMS-built website, providing fresh and valuable content to visitors.

Frequently Asked Questions (FAQ)

1. Q: How do I display the latest articles under a specific category?A: You canarchiveListthe tag withcategoryIdParameters are used to specify the article category. For example, if your category ID is 5, you can write it like this:{% archiveList archives with moduleId="1" categoryId="5" order="id desc" limit="10" type="list" %}.

2. Q: The display format of the publish time is not satisfactory, how to adjust?A:stampToDateThe second parameter of the tag is the format string. You can adjust it as needed. For example,"2006年01月02日"It will display as "2006-01-02""15:04"It will display as "15:04" (time only). Please refer to the Go language formatting rules for setting it.

3. Q: If the article list is long, I need a pagination feature, how should I implement it?A: If you need to display pagination, you can usearchiveListlabel'stypethe parameter to"page", then combinepaginationtags together. For example:{% archiveList archives with moduleId="1" order="id desc" limit="10" type="page" %}… (article list loop) …{% pagination pages with show="5" %}(pagination link){% endpagination %}Pagination navigation will be generated below the article list.