The display layout of website content is a key factor in attracting visitors, improving user experience, and optimizing search engine rankings.A clear, beautiful and feature-rich layout that allows your website to stand out among competitors.AnQiCMS (AnQiCMS) is an efficient content management system that provides high flexibility, allowing you to freely customize the display of website content according to your actual needs.

This article will delve into how to customize the content display layout of the Anqi CMS, helping you turn your creativity into reality and create a website with a unique style.

The core cornerstone of content layout customization: template and content model

The basis for implementing personalized content display layout in Safe CMS lies in its powerfultemplate engineandFlexible Content Model.

Your website's frontend style and structure are all stored in/templateTemplate files under the directory control.These template files use a syntax similar to Django, you can imagine them as the 'blueprints' of a website. By editing these files, you can precisely control the way content is presented.At the same time, the content model of Anqi CMS is like different types of "content containers", allowing you to customize fields according to business needs (such as articles, products, events, etc.) to ensure that each type of content can be stored and displayed in the most suitable way for its characteristics.

The implementation path for custom content display layout

Custom content display layout is not achieved overnight, it usually involves two main aspects: basic adjustment through backend configuration, and fine-grained control through template files.

1. Adjust basic layout through backend configuration

The backend of Anqi CMS provides many convenient options, allowing for the initial adjustment of website layout and content association without modifying the code.

  • Flexible navigation menu management: The navigation of the website is an important way for visitors to understand the structure and content of the website.In the "Background Settings" -> "Website Navigation Settings" of AnQi CMS, you can easily create and manage menus for different locations (such as top main navigation, footer navigation, sidebar navigation).Each navigation item can be associated with a specific category, single page, or external link, and even supports multi-level dropdown menus.You can set the display name, subtitle, description for each navigation item, and adjust their display order.This way allows you to build a website structure that conforms to the user's browsing habits.

  • Category and Single Page Exclusive Template:Imagine you want the list page of a specific article category (such as "News动态") to have a different style from the "Product showcaseThe AutoCMS provides such capabilities.In "Content Management" -u003e "Document Categories" or "Page Resources" -u003e "Page Management", you can specify an independent template file for each category or single page.Select or enter the corresponding template file name in the background settings, and the system will use the specified template to render the page, achieving differentiated local layout.

  • Global Information and SEO Basics:The website's global settings such as logo, name, record number, copyright information, and home page TDK (Title, Description, Keywords) configuration, although seemingly simple, directly affects the brand image and search engine visibility of the website.These can all be managed under 'Background Settings' -> 'Global Feature Settings' and 'Home Page TDK Settings'.Properly configure this information is an important step to ensure the consistency of the website's overall style and SEO-friendly.

  • Optimize URL Structure with Static Rules:Although it does not directly affect the page layout, the 'Function Management' -> 'URL Rewrite Rules' is crucial for the link structure of the website.An concise, meaningful URL is not only user-friendly, but also helps search engines understand the page content.Auto CMS provides various built-in URL rewrite rules and supports custom rules, making your website URLs more standardized and indirectly enhancing user experience and SEO effects.

2. Deeply Control Template Files for Refinement:

When you need deeper customization, such as adjusting the HTML structure of specific blocks, introducing new CSS/JS styles, or combining the display content in a unique way, you need to directly edit the template file.

  • Understand the structure and organization of template files:All your template files are located in:/template/您的模板目录. Among them,config.jsonthe basic information of the template is defined. To improve code reusability, the common part is usually stored in suchbash.html（Page basic skeleton）andpartial/catalog (reusable code snippets, such as sidebars, breadcrumbs). Understanding these conventions can help you locate and modify the required files more quickly.

  • Using powerful template tags and filters:This is the core of AnQi CMS for dynamic content display.The AutoCMS is built-in with a rich set of template tags (Tag) and filters (Filter), which are your 'toolbox' for retrieving data, controlling logic, and processing content in templates.

    • Data call tags:

      • Content list and detail:
        • archiveList: Used to display lists of articles, products, and other content on the homepage, list pages, search results pages, and other locations. You can accesscategoryId(指定分类，English)moduleId(指定内容模型，English)limit(显示数量，English)order(排序方式，English)type(列表类型，如，English)pageUsed for pagination,related用于相关内容) 等参数，flexibly筛选和排序内容。例如，您可以在首页显示“最新文章”，在产品分类页显示“hot selling products”。
        • archiveDetail：Used to display detailed information of a single content (article, product). Throughname="字段名称"title, content, images, custom fields, etc.
        • categoryList/categoryDetail：Get the list of categories or detailed information of a specific category, such as category name, description, image, and subcategories.
        • pageList/pageDetail：Get the list of single pages or detailed information of a specific single page.
        • tagList/tagDetail/tagDataList：Used to display the tag cloud, tag details, and content list under the tag of the website.
        • prevArchive/nextArchive：Display the “Previous” and “Next” links on the content detail page to enhance the continuity of user browsing.
      • Global and auxiliary information:
        • system/contact/tdkThese tags help you call the global information such as website name, Logo, contact information, TDK, etc. set in the background at any location on the page, ensuring the synchronization of information in the public area.
        • navList：Directly call the navigation menu data configured on the background, combinedforLoop to build a multi-level navigation structure.
        • bannerList：Used to call the background settings carousel, to achieve dynamic image display on the homepage or other pages.
        • linkList：Conveniently list the website's friend links.
        • languages/tr：Used for language switching and text translation on multilingual websites.

    • Logical control tags:

      • forLoop: Traverse.archiveList/categoryList/pageListThe content set obtained by tags such as , which realizes the generation of dynamic lists. You can combine.forloop.CounterVariables such as `auto` are used to add different styles to list items.
      • ifCondition judgment: Show or hide specific content blocks based on the condition.For example, determine whether to display the image by judging whether the article has a thumbnail, or display different content based on the user's login status.

    • Auxiliary and structured tags:

      • includeExtracts common HTML code snippets such as headers, footers, sidebars, etc., throughincludeTags are introduced at the required locations, greatly improving the reusability and maintainability of the template.
      • extendsThis is the core of template inheritance, where you can define a basic skeleton template (such asbase.html），include all the common structure of all pages, then throughblockthe tag definition can be rewritten by child templates. Child templates rewriteextendsthe tag inheritance, and only rewriteblockThe content inside greatly simplifies template development.
      • macro: Defines reusable code snippets, similar to functions, used to generate complex HTML structures, improving code neatness.
      • jsonLdIf you need to add custom JSON-LD structured data to optimize SEO for the page, you can use this tag for flexible configuration.

    • Filter (Filters):Filters are used for secondary processing and formatting of the data obtained from tags. For example:

      • safe：To prevent HTML content from being escaped, often used to display the content input from a rich text editor.
      • thumb：To get the thumbnail of an image.
      • truncatechars/truncatewords：To truncate a string or HTML content to a specified length.
      • stampToDate：Format the timestamp into a readable date and time.
      • add/replace/trim等：Perform various string or number operations.

  • Markdown content and advanced display:The CMS supports Markdown editor, which means you can easily insert Markdown formatted text into the content. If your content includes mathematical formulas or flowcharts, you can use the template'sbase.htmlIntroduce CDN resources at the beginning to ensure they render correctly. When you need to convert Markdown formatted content to HTML display,renderFilter, such as{{ archive.Content|render|safe }}.

Practice recommendations, make layout customization more convenient

  1. Start with existing templates:The fastest way to customize is to copy an existing template and then modify it on this basis.The default template of AnQi CMS is usually a good starting point, and you can adjust it step by step until you are satisfied.
  2. Make good use of the background preview:After modifying the template file, using the preview feature in the background to check the effect in time can greatly improve efficiency.
  3. Responsive design cannot be ignored:Considering the popularity of mobile devices, your website layout should have good responsive capabilities to ensure a high-quality browsing experience on different screen sizes.The auto CMS supports adaptive, code adaptation, and PC+mobile independent site mode, you can choose as needed.
  4. SEO friendliness:When customizing layouts, always consider SEO.The structure of reasonable titles (H1, H2), clear content hierarchy, image Alt attributes, Meta tags, and more are all important factors in improving search engine visibility.

Through these features of Anqi CMS, you can flexibly combine various elements to build a content display layout that meets your brand image and business needs, making your website more attractive and competitive.

Common Questions and Answers (FAQ)

Q1: How do I operate to use a unique list page template for a specific article category?

A1:You can easily implement this requirement in the background. First, you need to create your exclusive list page template file under the template directory (for exampletemplate/您的模板名称/article/), named aslist-news.html.Then, go to the "Content Management" -u003e "Document Category" in the AnQi CMS backend, find the article category you want to customize, and click edit.list-news.htmlThen save it. This way, when visitors browse this category, your custom list page layout will be applied.

Q2: How to implement the display of 'Previous/Next' and 'Related Articles' on the content detail page?

A2:This can be achieved through the built-in template tags of AnQi CMS. In your article or product details page template:

  • Previous/Next:Use{% prevArchive prev %}...{% endprevArchive %}and{% nextArchive next %}...{% endnextArchive %}Tags. They will automatically retrieve the data of the previous and next articles of the current article, and you just need to call the link and title within the tag.{{prev.Link}}and{{prev.Title}}Call the link and title.
  • Related articles:Use `{% archiveList archives with type=“related” limit=“N” %}…{% endarchiveList