How to implement the automatic display of content collected on the website front end?

After content collection is completed, how to automatically display the obtained content on the website front-end is a problem that many content operators are very concerned about.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides a complete solution from content entry to front-end display.It passes through a powerful content model, flexible template tags, and a friendly SEO mechanism, making this process simple and efficient.

Next, we will explore how to use the various functions of AnQiCMS, so that the valuable content you collect can be automatically and beautifully displayed on the front end of the website.

One, build the "skeleton" for content: content model and classification planning

Before collecting content, or before planning to display the collected content on the front end, the first step, and also the most critical step, is to build an appropriate 'home' for the content that will be stored—the 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, and you may need fields such as title, source, publication time, abstract, and full text;If you collect product information, you may also need prices, inventory, parameter lists, multiple product images, and so on.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 an 'Information' model or a 'Product' model, and add custom fields as needed, such as 'Article Source', 'Author', and so on.These custom fields not only facilitate background management, but also allow the use of template tags on the front end to achieve richer content display.

At the same time, it is also crucial to have a reasonable planning for document classification and document tags.You can pre-create categories related to the theme of the collected content, such as "Industry News", "Technical Sharing", or "Product Update", and tag the content accordingly, such as "AnQi CMS", "Go Language", "SEO Optimization", and so on.These categories and tags are the foundation of content organization and front-end navigation, helping users quickly locate the information they are interested in.

Two, let the content "enter the door": content collection and storage

The AnQi CMS is built-in with the "Content Collection and Bulk Import" feature, which greatly simplifies the process of quickly importing external content into your website.Configure collection rules, and the system can automatically collect content from specified sources and import it in batches according to the content model and classification you preset.This not only saves a lot of tedious manual copy and paste work, but also ensures the quick update 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 Paraphrasing' and 'Automatic Keyword Expansion' (depending on the AnQiCMS version and module), to preliminarily process the collected content, making it better adapt to the positioning and SEO strategy of your website.In addition, the 'Time Factor - Scheduled Publishing Feature' also allows you to flexibly control the content's online time, avoiding the release of too much content at once, and realizing the 'trickling water' of content operation.

Three, let the content "appear": flexible application of front-end templates

Once the content is successfully stored, the next step is to make them beautifully displayed on the website front end.Anqi CMS uses a syntax similar to the Django template engine, allowing you to highly customize the display of content.Template files are usually named with.htmlwith suffix, stored in/templateunder the directory, and data is called through rich template tags.

1. content displayed on the list pageFor example, you would like to display the latest collected article list on the home page or some category page, you can usearchiveListThe tag can retrieve content based on 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"The content model specified is the article model.
   • categoryId="10"Limit to display articles with category ID 10 only.
   • type="list"Indicates to get a regular list instead of a paged list.
   • limit="10"Control to display 10 items.
   • order="id desc"Arrange the latest published content at the top.
   • {{item.Link}}/{{item.Title}}/{{item.Thumb}}/{{item.Description}}Called the link, title, thumbnail, and description of the article.
   • |truncatechars:120Is 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 into a readable date format.

2. Detail page display contentWhen a user clicks on an article in the list, detailed content needs to be displayed. In the detail page template (such asarticle/detail.html), the system will automatically recognize the current article, and you can use it directly.archiveor objectarchiveDetailTags to 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 should be noted here.{{archive.Content|safe}}. As the collected article content may contain HTML tags (such as images, tables, formatted text, etc.), use|safeThe filter is crucial. It informs the template engine that this content is safe, does not require HTML entity encoding, and ensures that the HTML code within the content is correctly parsed and rendered by the browser.

3. Categorization and tag navigationTo make it easier for users to 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 %}
     

     * **