How to implement personalized front-end display for different types of content (articles, products, single pages) in AnQi CMS?

In Anqi CMS, realizing personalized front-end display of different types of content (such as articles, products, and single pages) is one of its core advantages, and it is also the key for content operators to achieve brand differentiation and improve user experience.This is mainly due to the flexible content model design and powerful template customization capabilities of Anqi CMS.

Flexible content model: the foundation of personalized display

The core of AnQi CMS lies in its 'flexible content model'.This means that you are not limited to fixed "article" or "product" types, but can customize various content models according to your actual business needs.For example, you can create a "blog" model for blog articles, a "product" model for e-commerce goods, and even a "position" model for recruitment information.

When creating these models, you can define unique fields for each model.For example, an "article" model may require fields such as "author", "publish date", "keywords", etc.And a "product" model may need fields such as "price", "inventory", "brand", "product parameters", etc.These custom fields are not only convenient for you to enter information in the background management, but more importantly, they provide rich data sources for the personalized display on the front end.

Template customization: controlling the way content is presented

AnQi CMS uses a template engine syntax similar to Django, which allows front-end developers or operators with some coding experience to highly customize every page of the website. All front-end display logic is controlled by template files, which are usually stored in/templatedirectory.

To implement personalized display of different content types, mainly through the following ways:

1. Distinguish content model types: The AnQi CMS distinguishes different content types through "Model ID".For example, you may set the 'Article' model ID to 1, and the 'Product' model ID to 2.In the template file, when you need to call the content list, you can usearchiveListLabel, and throughmoduleId="1"ormoduleId="2"Specify which model's data to retrieve. This way, you can display the latest articles and popular products with different layouts and styles on the same page, such as the homepage.

2. Content type dedicated template file Anqi CMS supports specifying dedicated templates for different content types, their subcategories, and even individual content items.

   • Model detail page: By default, the article details will use{模型table}/detail.htmlThe product detail page is similar. If you want the product detail page and the article detail page to have completely different layouts, just modify these template files separately.
   • Category list page: Similarly, the article list page can be used{模型table}/list.html, The product category list page corresponds to.
   • single page: For independent pages such as "About Us" and "Contact Us", AnQi CMS provides a "single page" feature. Their detail pages use the defaultpage/detail.htmlTemplate.
   • template for specific content items: Further, if you want a unique display for a specific "product" or "page", such as a special promotional product page, you can specify a custom template file name in the edit interface of the product or page in the background (for exampleproduct/special-offer.htmlorpage/about-us-v2.html）。The system will prioritize loading these specified templates to achieve ultra-fine-grained personalization.

3. Use template tags to dynamically render data.： CMS Security built-in rich template tags, allowing you to conveniently obtain and display various data：

   • Articles and products: Use.archiveListTag to get content list, and througharchiveDetailLabel to get detailed information of a single content. Where,archiveParamsThe tag is particularly powerful, it allows you to traverse and display the data of all custom fields under the content model, whether it is price, size, author, or any other information you define.
   • single page: Use.pageListTag to get the list of single pages,pageDetailTag to get the detailed content of a specific single page, including page title, description, content area, etc.
   • Category:categoryListandcategoryDetailTags are used to retrieve and display category information, these categories are bound to specific content models, such as 'Article Category' or 'Product Category'.
   • General Tag:systemThe tag is used to get the global settings of the website (such as website name, Logo),contactThe tag gets the contact information,tdkTag management page SEO information. These common information can be integrated into the layout of pages of all content types.
   • Logical control: WithifandforLogical control tags, you can implement complex conditional judgments and loop outputs in the template.For example, display "Buy Now" or "Out of Stock Notification" based on whether the product is in stock.Based on whether the article has a thumbnail, select a different image display style;Or show additional exclusive content for VIP users.

Practical application: Create a unique front-end experience

Imagine a scenario: Your website has both a technology blog and a software product showcase.

• Blog articlesIn the article list page, you may want to display the title, author, publication date, and summary of each article.On the detail page, in addition to these basic information, it is also hoped to display article tags, views, and a sidebar for displaying the article catalog.
• Software productsOn the product list page, you may want each product card to display the product name, price, product features, and thumbnail.On the detail page, it is necessary to display detailed product image slides, detailed parameters (such as version, supported platforms), feature description, user reviews, and purchase button.

By using AnQi CMS, you can easily achieve everything. First, create the 'article' and 'product' content models, and define the custom fields for each.Then, create for the article list pagearticle/list.html, to create a product list pageproduct/list.html, and use it inarchiveListLabel combinationmoduleIdUse to call and loop to display corresponding dataitem.自定义字段名To display customized content. The detail page is the same.article/detail.htmlandproduct/detail.htmlWill usearchiveDetailandarchiveParamsTo retrieve and render personalized data. For the "About Us" page, you canpage/about-us.htmlfreely design the layout without being affected by other content types.

In this way, Anqi CMS allows you to finely control the display of each content type on the front end, not only improving the user experience but also making it easier for search engines to capture more structured content, thereby optimizing SEO performance.

Frequently Asked Questions (FAQ)

How to use a completely different layout for a specific article, product, or single page?You can edit the article, product, or single page in the background by filling in a custom template filename in the 'Document Template' or 'Single Page Template' settings when doing so, for examplespecial-article.html. The system will use this specified template first, rather than the default general template, to achieve a completely different layout. Please make sure that the custom template file exists in your template directory.

2. How can I differentiate the display of different content models on the same frontend page (for example, displaying the latest articles and the latest products at the same time)?You can usearchiveListlabel'smoduleIdParameter. For example, you can use in the home page template{% archiveList latestArticles with moduleId="1" limit="5" %}to get the article, and then use{% archiveList featuredProducts with moduleId="2" limit="3" %}Get the product. Then, render it with different HTML structures and CSS styles separatelylatestArticlesandfeaturedProductsThese two variables can be used to distinguish different content models on the same page.

3. Can I create multiple different display styles for the same content model (such as articles)? For example, some articles show large images, while others show a list of small images?Yes, it can. You can achieve it in two main ways:

1. Custom field or recommended attributeIn the 'Article' content model, add a custom field such as 'Display Style' (dropdown options: Large Image, Small Image, No Image), or use built-in 'Recommended Properties' (such as the [f] slide tag to mark large image articles). Use it in the frontend template, using{% if item.展示风格 == "大图" %}or{% if "f" in item.Flag %}This conditional judgment is used to render different HTML structures and image sizes.
2. Custom template: For a few articles that need special display, a separate template file can be specified for the article, such asarticle/big-image.html, and design the layout of the large picture display in the template.