How to set a unique display layout for different types of articles (such as news, products)?

In website operation, content is not just the information itself, but also the way it is presented is equally important.Setting a unique display layout for different types of content (such as news, product introductions) can greatly enhance user experience, strengthen brand image, and even have a positive effect on search engine optimization (SEO).AnQiCMS (AnQiCMS) provides very flexible and powerful features in this aspect, allowing you to easily create exclusive visual styles for various content.

Content model: the foundation of layout customization

A safe CMS first establishes a structured foundation for different types of content through the concept of 'content model'.Imagine a typical news article, which may only need fields such as title, text, publication date, and author;And a product detail may require product name, multi-angle images, price, detailed specifications, purchase links, and more specific information.

In the Anqi CMS backend, you can define a set of fields for 'articles', another set for 'products', and even create custom models to adapt to more unique business needs.This underlying data structure difference naturally leads us to adopt different layouts in front-end design to optimize the display of the characteristics of each type of content.This flexible content model design of Anqi CMS is the first step in our implementation of diverse content display.

Template system: Core for diversified display

After we have a structured content model, the next step is how to present this content in the way we expect.The Anqi CMS uses an intuitive and powerful template system.All front-end pages of the website are composed of template files, they are usually in.htmlwith suffix, stored intemplateSpecific template folder under the catalog.

The AnQi CMS template system supports syntax similar to the Django template engine, which allows content operators or front-end developers to get started quickly. The system itself provides default template conventions for different content models, for example, the detail page of an article model may default to usingarticle/detail.htmland the product model list page may useproduct/list.htmlThis has provided a basic distribution of different content types.

However, the powerful aspects of Anqicms are not limited to this. It allows you to customize and override templates at a more refined level, which is the key to achieving a 'unique display layout':

• Customization at the category level:If you have a 'Science News' category and want the news list under it to have a special display style, such as a large card layout with thumbnails, you can set a 'category template' specifically for this category.Similarly, all the articles under this "Science News" category can also be specified to use a unified "document template" to ensure they maintain a consistent sense of technology in their visual presentation.In the category management interface, you can find these settings options, flexibly select or enter a custom template file name (for example, naming the category list page aslist-科技新闻.htmlSpecify for documents under this category:tech_detail.html)

• Customization at the article or product level:Sometimes, you might have an extremely important news report, or a flagship product, which needs a unique and even transcending category limit dedicated display page.AnQi CMS provides this ultimate flexibility. When publishing or editing a single document (article or product), you can directly specify a dedicated template file for this specific content in the "Document Template" field.This means that even if it belongs to a category with a universal template, the template specified for a single piece of content will take precedence, allowing your key content to have a completely personalized display stage.

• Single-page customization:In addition to articles and products, websites usually also have independent single pages such as "About Us" and "Contact Information".These pages often carry important brand information and need careful design.AnnAnQi CMS also provides the setting of 'single page template' in 'Page Management'.You can create a specific single page (such as a company profile page with ID 10) forpage/10.htmlOr customize the template name to give it a unique design style.

This multi-level template overlay mechanism allows Anqi CMS to perfectly adapt to various layout customization needs from macro to micro.The system will intelligently judge: Has a template been specified for the current single piece of content?If not, has a template been specified for the category of the content?If it is still not available, it will fall back to the default template of the content model.This priority rule ensures that you can always control the presentation of content in the most refined way.

Flexible data calling and display

After specifying unique templates for different content types and levels, it is also crucial to accurately call and display the corresponding data in these templates.The AnQi CMS template tag system makes this process very convenient.

No matter how you set up the beautiful card layout for news articles or design the complex picture and text layout for product details, you can use likearchiveDetail(Document Details),pageDetail(Single page detail) and other tags, easily get all content fields on the current page, including title, text, images, custom parameters, etc. For list pages,archiveListandcategoryListThe tag can help you filter and display content previews as needed.

What is more, if you define "custom fields" in the content model, such as the "material" and "target audience" of the product model, these fields can also bearchiveParamsLabels make it easy to call and display in a unique layout in the template, ensuring that each content element is presented properly.

By using these features of Anqi CMS, you can easily create a concise and efficient reading experience for news articles, provide a direct and rich visual impact for product displays, and create a professional and stable brand image for the company profile page.This is aimed at helping your website stand out in the information flood and reach your target audience in the most attractive way.

Frequently Asked Questions (FAQ)

1. Where should I place my custom template file in AnQi CMS?

Your custom template file should be placed intemplateThe folder of the template you are currently using. For example, if your template folder is nameddefaultThen, you can organize according to content type and priority. For example, for a document under a specific ID of an article model, you can createarticle/detail-{文档ID}.html. A list page for a certain category can be createdarticle/list-{分类ID}.html. And for a single page, it can be placed inpage/{单页ID}.htmlOf course, you can also specify a custom name directly in the background, just make sure the file exists in your template folder.

2. If I set a category template and a single document template for a content at the same time, which one will take effect?

AnQi CMS follows a priority rule when selecting templates: it will first check if it is for this specific article.Single documentThe template was specified, if any, it will be used first. If not specified, it will look up the content owner upwards.CategoryDid you specify a template. If the category is not specified either, it will finally fallback to the content所属的Content modelThe default template. In short, the template specified for a single document has the highest priority.

3. How to set up completely different page structures and styles for my 'Product Display' and 'News Information' content?

The AnQi CMS has already realized this distinction at the content model level.The system usually defaults to built-in 'article model' and 'product model'.You can design templates corresponding to these two models separately, for example in/template/你的模板目录/Createarticle/andproduct/a folder, and place each one separately.detail.htmlandlist.htmlThe template. In this way, the pages of articles and products will automatically use their own independent template files, thus having completely different page structures and styles.You can even introduce different CSS and JS files in these two templates to achieve a complete visual difference.