How to implement automatic display of content on the website front-end after content collection?

How to automatically display the collected content on the website front-end is a very concerned issue for many content operators.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides a complete solution from content入库 to front-end display.It makes this process simple and efficient with its powerful content model, flexible template tags, and friendly SEO mechanism.

Next, we will explore together how to use the various features of AnQiCMS to automatically and beautifully display the valuable content you collect on the front end of the website.

I. Building the 'skeleton' for content: Content Model and Classification Planning

Before content collection, or before planning to display the collected content on the front end, the first step and the most critical one is to build a suitable 'home' for the content to be stored - a content model.The 'Flexible Content Model' feature of Anqi CMS allows you to customize the content structure according to your business needs.

Imagine that you are collecting industry information, which may require fields such as title, source, release time, abstract, and full text; if you are collecting product information, you may also need fields such as price, stock, parameter list, and multiple product images.By defining these content model fields in the background, you can ensure that the collected data is stored in a standardized manner.For example, you can create a 'Information' model or a 'Product' model, and add custom fields according to your needs, such as 'Article Source', 'Author', etc.These custom fields not only facilitate backend management, but also allow for content to be displayed more richly on the frontend through template tags.

At the same time, a reasonable 'document classification' and 'document tagging' plan is also crucial.You can pre-create categories related to the collection content topics, such as 'Industry News', 'Technical Sharing', or 'Product Updates', and tag the content accordingly, such as 'AnQi CMS', 'Go Language', 'SEO Optimization', etc.These categories and tags are the foundation for content organization and front-end navigation, helping users quickly locate the information they are interested in.

II. Inviting content 'in': Content Collection and Storage

The 'Content Collection and Bulk Import' feature is built into Anqi CMS, which greatly simplifies the process of quickly importing external content into your website.By configuring collection rules, the system can automatically fetch content from specified sources and batch import it according to the content model and categories you have预设 preset.This not only saves a lot of tedious manual copy and paste work, but also ensures quick updates of content, especially suitable for websites that need to frequently update industry information and materials.

When adding content, you can also take advantage of functions such as 'Automatic Article Content Spin' and 'Automatic Keyword Expansion' (depending on the AnQiCMS version and module), to perform preliminary processing on the collected content, making it better adapt to the positioning and SEO strategy of your website.In addition, the "Timing Factor - Scheduled Release Feature" allows you to flexibly control the release time of content, avoiding the release of too much content at once, and realizing the "trickling water, continuous operation" of content operation.

III. Letting content 'make its debut': Flexible Use of Front-end Templates

Once the content is successfully stored, the next step is to have them beautifully displayed on the website's front end.The Anqi CMS uses a syntax similar to the Django template engine, allowing you to highly customize the display of content..htmlwith suffix, stored in/templateUnder the directory, and call data using rich template tags.

1. Display content on the list page.For example, you would like to display the latest collected article list on the homepage or a category page, you can usearchiveListThis tag can fetch content based on your specified conditions (such as model ID, category ID, display quantity, sorting method, etc.).

   {% archiveList archives with moduleId="1" categoryId="10" type="list" limit="10" order="id desc" %}
       {% for item in archives %}
       <div class="news-item">
           <a href="{{item.Link}}">
               <img src="{{item.Thumb}}" alt="{{item.Title}}" />
               <h3>{{item.Title}}</h3>
               <p>{{item.Description|truncatechars:120}}</p>
           </a>
           <span class="pub-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
       </div>
       {% endfor %}
   {% endarchiveList %}
   

   In the above example:

   • moduleId="1"Specified the content model as article model.
   • categoryId="10"Limit to display articles with category ID 10.
   • type="list"Indicates to get a regular list instead of a paginated list.
   • limit="10"Controls to display 10 items.
   • order="id desc"Rearranges the latest published content to be at the top.
   • {{item.Link}}/{{item.Title}}/{{item.Thumb}}/{{item.Description}}Called the link, title, thumbnail, and description of the article.
   • |truncatechars:120It is a filter used to truncate the description text to ensure it is displayed at a moderate length.
   • stampToDate(item.CreatedTime, "2006-01-02")is a time formatting function that converts timestamps to readable date formats.

2. Details page display contentWhen the user clicks on an article in the list, the detailed content needs to be displayed. In the detail page template (such asarticle/detail.html), the system will automatically identify the current article, and you can directly usearchivean object orarchiveDetailTranslate the content of the value field to 【en】call various fields of the article.

   <h1>{% archiveDetail with name="Title" %}</h1>
   <div class="meta-info">
       <span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
       <span>发布日期：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
       <span>浏览量：{{archive.Views}}</span>
       {% tagList tags with itemId=archive.Id limit="5" %}
       {% if tags %}
       <span>标签：{% for tag in tags %}<a href="{{tag.Link}}">{{tag.Title}}</a> {% endfor %}</span>
       {% endif %}
       {% endtagList %}
   </div>
   <div class="article-content">
       {{archive.Content|safe}}
   </div>
   

   It is especially important to pay attention to here 【en】{{archive.Content|safe}}[en] Due to the collected article content possibly containing HTML tags (such as images, tables, formatted text, etc.), using|safeThe filter is crucial.It will inform the template engine that this content is safe and does not require HTML entity encoding, thereby ensuring that the HTML code within the content is correctly parsed and rendered by the browser.

3. [en] Category and tag navigationIn order for users to easily find the content they are interested in, the display of categories and tags is also indispensable.

   • Category list:UsecategoryListTags can conveniently build navigation menus or category blocks.

     
     {% categoryList categories with moduleId="1" parentId="0" %}
     <ul>
         {% for cat in categories %}
         <li><a href="{{cat.Link}}">{{cat.Title}}</a></li>
         {% endfor %}
     </ul>
     {% endcategoryList %}
     

     * **