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

Flexible Content Model: The Basis 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

When creating these models, you can define unique fields for each model.For example, an 'article' model may need fields such as 'author', 'publish date', 'keywords', etc.; while a 'product' model may need fields such as 'price', 'stock', 'brand', 'product parameters', etc.These custom fields are convenient for you to enter information when managing the background, and more importantly, they provide a rich data source for the personalized display on the front end.

Template Customization: Controlling the Presentation of Content

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

To achieve personalized display of different content types, mainly through the following methods:

  1. Distinguish content model types： English CMS distinguishes different content types through the "Model ID".For example, you may set the "articlearchiveListtags, and throughmoduleId="1"ormoduleId="2"Specify which model's data to retrieve. This allows you to display the latest articles and popular products with different layouts and styles on the same page, such as the homepage.

  2. Content Type Specific Template File Anqi CMS supports specifying dedicated templates for different content types, their subcategories, and even individual content items.

    • Model Details PageEnglish: By default, the article details will use{模型table}/detail.html，Product details page is similar. If you want the product details page and the article details page to have completely different layouts, just modify these template files separately.
    • Category list pageSimilarly, the article list page can be used{模型table}/list.htmlThe product category list page corresponds to it.
    • single page：For pages such as “About Us” and “Contact Us”, which are independent pages, Anqi CMS provides the “Single Page” feature. Their detail pages use the defaultpage/detail.htmltemplates.
    • template for specific content items：Furthermore, if you want a specific "product" or "page" to have a unique display, such as a special promotional product page, you can specify a custom template filename in the editing 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： English CMS built-in rich template tags, allowing you to conveniently obtain and display various data:

    • Articles and products: UsearchiveListTag to get content list, and byarchiveDetailRetrieve detailed information of a single tag content.archiveParamsThe tag is especially powerful, it allows you to traverse and display all the data of custom fields under the content model, whether it is price, size, author, or any other information you define.
    • single page: UsepageListLabel gets a single page list,pageDetailLabel gets the detailed content of a specific single page, including the page title, description, content area, etc.
    • Category:categoryListandcategoryDetailTags are used to retrieve and display classification information, these classifications are bound to specific content models, such as "Article Classification" or "Product Classification."
    • General tags:systemThe tag is used to get the global settings of the website (such as website name, Logo),contactThe tag is used to get the contact information,tdkLabel management page SEO information. These general information can be integrated into the page layout of all content types.
    • Logical controlBy:ifandforEnglish logic 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; choose different image display styles based on whether the article has a thumbnail; or show additional exclusive content for VIP users.

Practical application: Build a unique front-end experience

Imagine a scenario: Your website has both a technical blog and software product showcases.

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

With Safe CMS, you can easily achieve all this.First, create the "article" and "product" content models, and define their custom fields.article/list.htmlTo create a product list page,product/list.htmland use it inarchiveListTag combinationmoduleIdTo call and loop to display corresponding data, utilizingitem.自定义字段名To display customized content. The detail page is similarly,article/detail.htmlandproduct/detail.htmlIt will usearchiveDetailandarchiveParamsGet and render personalized data. For the "About Us" page, you can freely design the layout without being affected by other content types.page/about-us.htmlIn it, you can freely design the layout without being affected by other content types.

Through this method, the security CMS allows you to finely control the display of each content type on the front end, which not only enhances the user experience but also facilitates search engines in capturing more structured content, thereby optimizing SEO performance.

Common Questions (FAQ)

1. How to use a completely different layout for a specific article, product, or single page?You can edit the template file name customly when editing the article, product, or single page in the background, in the 'Document Template' or 'Single Page Template' settings.special-article.htmlThe system will prioritize this specified template over the default general template, thereby achieving a completely different layout. Make sure that the custom template file exists in your template directory.

2. I want to distinguish and display data of different content models on the same front-end page (such as displaying the latest articles and the latest products at the same time). How should I do it?You can utilizearchiveListTagsmoduleIdParameters. For example, on the homepage template, you can use{% 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, use different HTML structures and CSS styles to render in the template.latestArticlesandfeaturedProductsThese variables can be used to differentiate the display of 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 this in two main ways:

  1. Custom fields or recommended attributesIn the "article" content model, add a custom field such as "display style" (dropdown selection: large image, small image, no image), or use built-in "recommendation attributes" (such as the [f] slide tag for large image articles). In the frontend template, use{% if item.展示风格 == "大图" %}or{% if "f" in item.Flag %}Such condition judgment, to render different HTML structures and image sizes.
  2. Custom templateFor articles that require special display, you can directly specify an independent template file for the article, such asarticle/big-image.htmlDesign the layout of the large picture display in the template.