The website content display layout is a key factor in attracting visitors, improving user experience, and optimizing search engine rankings.A clear, beautiful, and functional layout that enables your website to stand out among competitors.AnQiCMS (AnQiCMS) is an efficient content management system that provides high flexibility, allowing you to 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 website, helping you turn your creativity into reality and create a unique style website.

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

The basis for achieving personalized content display layout in AnQi CMS lies in its powerfulTemplate engineandFlexible content model.

Your website's frontend style and structure are stored in/templateDirectory template file 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.), ensuring 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

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

1. Adjust basic layout through backend configuration

The AnqiCMS backend provides many convenient options, without modifying the code, you can achieve the preliminary adjustment of the website layout and content association.

  • Flexible navigation menu management:The navigation of the website is an important way for visitors to understand the structure and content of the site.In Anqi CMS, under the "Background Settings" -> "Website Navigation Settings", 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 you can build a website structure that conforms to users' browsing habits.

  • Category and single page exclusive template:Imagine you want the list page of a specific article category (such as "News Update") to have a different style from the list page of "Product Display", or the "About Us" single page needs a unique layout.The AnQi CMS provides such capabilities. In "Content Management" -> "Document Classification" or "Page Resources" -> "Page Management", you can specify an independent template file for each category or single page.Just 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 differential layout at the local level.

  • Global information and SEO basics:The website's Logo, name, filing number, copyright information, and home page TDK (Title, Description, Keywords) settings, although seemingly simple, directly affect the brand image and search engine visibility of the website.These can be managed in the "Background Settings" -> "Global Function 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-friendliness.

  • Optimizing URL structure with static rules:Although it does not directly affect the page layout, the "feature management" -> "pseudo-static rules" are crucial for the website's link structure.A concise and meaningful URL is not only user-friendly but also helps search engines understand the content of the page.AnQi CMS provides various built-in pseudo-static rules and supports custom rules, making your website URL more standardized, indirectly improving user experience and SEO effects.

2. Deeply control the template files for fine-grained control:

When you need a deeper level of customization, such as adjusting the HTML structure of a specific block, 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 the template file:All your template files are located in:/template/您的模板目录Below. Among them:config.jsonDefined the basic information of the template. To improve code reusability, the common part is usually stored in such asbash.html(Page basic skeleton) andpartial/Directory (reusable code snippets, such as sidebar, breadcrumbs) in. 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. AnQi CMS is built-in with rich template tags (Tag) and filters (Filter), which are your 'toolbox' for obtaining data, controlling logic, and processing content in the template.

    • Data call tags:

      • Content list and details:
        • 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(Specify category,)moduleId(Specify content model,)limit(Display number,)order(Sorting method,)type(List type, such as)pageused for pagination,relatedUsed for related content) etc. parameters, flexible in filtering and sorting content. For example, you can display 'Latest Articles' on the homepage, and 'Best Selling Products' on the product category page.
        • archiveDetailUsed to display detailed information of a single content (article, product). Byname="字段名称"Calling title, content, images, custom fields, etc.
        • categoryList/categoryDetailGet the list of categories or detailed information of a specific category, such as category name, description, image, and subcategories.
        • pageList/pageDetailGet the list of single pages or detailed information of a specific single page.
        • tagList/tagDetail/tagDataListUsed to display the website tag cloud, tag details, and content list under the tag.
        • prevArchive/nextArchiveDisplays "Previous" and "Next" links on the content detail page to enhance user browsing continuity.
      • Global and auxiliary information:
        • system/contact/tdkThese tags can help you call the global information such as the website name, Logo, contact information, TDK, etc. set in the background at any location on the page, ensuring the synchronization of public area information.
        • navList: Directly call the background configuration of the navigation menu data, combinedforLoop to build a multi-level navigation structure.
        • bannerListUsed to call the carousel set in the background to achieve dynamic image display on the homepage or other pages.
        • linkListConveniently list the friend links of the website.
        • languages/trUsed for language switching and text translation on multilingual websites.

    • Logic control tags:

      • forLoop: TraversearchiveList/categoryList/pageListContent set obtained from tags, to implement dynamic list generation. You can combine withforloop.CounterVariables, to add different styles to list items.
      • ifConditional judgment: Display or hide specific content blocks based on conditions.For example, determine whether an article has a thumbnail to decide whether to display an image, or display different content based on the user's login status.

    • Auxiliary and structured tags:

      • include: Extract common HTML code fragments such as headers, footers, sidebars, and pass throughincludeLabels are introduced in the required places, 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.htmlIt includes the common structure of all pages, then throughblockThe tag defines the part that can be rewritten by the child template. The child template throughextendsInherits the tag and only overridesblockThe content inside greatly simplifies template development.
      • macro: Defines reusable code snippets, similar to functions, used to generate complex HTML structures, improving code cleanliness.
      • jsonLd: If you need to add custom JSON-LD structured data to optimize SEO for the page, you can use this tag for flexible configuration.

    • Filters (Filters):The filter is used to perform secondary processing and formatting on the data obtained from the tags. For example:

      • safe: Prevents HTML content from being escaped, often used to display the content entered in a rich text editor.
      • thumbGet image thumbnail.
      • truncatechars/truncatewordsTruncate string or HTML content to a specified length.
      • stampToDateFormat timestamp into a readable date and time.
      • add/replace/trimPerform various string or number operations.

  • Markdown content and advanced display.The AnqiCMS supports Markdown editor, which means you can easily insert Markdown formatted text into your content. If your content includes mathematical formulas or flowcharts, you can place them in the template'sbase.htmlIntroduce CDN resources in the header to ensure they render correctly. When you need to convert Markdown content to HTML for display, you can userendera filter such as{{ archive.Content|render|safe }}.

Practice suggestions, make layout customization more convenient

  1. Start with existing templates:The quickest way to customize is to copy an existing template and modify it on this basis.The default template of AnQi CMS is usually a good starting point, you can gradually adjust until you are satisfied.
  2. Make good use of the backend preview:After modifying the template file, using the preview function in the background to view 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 Anqi CMS supports adaptive, code adaptation, and PC + mobile independent site mode, and you can choose according to your needs.
  4. SEO friendliness:When customizing layouts, always consider SEO. A reasonable title structure (H1, H2), clear content hierarchy, image Alt attributes, Meta tags, and so on, are important factors in improving search engine visibility.

By using these features of AnQi CMS, you can flexibly combine various elements to build content display layouts that match your brand image and business needs, making your website more attractive and competitive.

Frequently Asked Questions (FAQ)

Q1: How do I set up 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 in the template directory (for exampletemplate/您的模板名称/article/) under your custom namelist-news.htmlThen, go to the 'Content Management' section of the Anqi CMS backend -> 'Document Category', find the article category you want to customize, and click edit.In the 'Other Parameters' section of the editing page, find the 'Category Template' field, and enter the name of the template file you just created (for examplelist-news.html)，then save it. This way, when visitors browse the category, your custom list page layout will be applied.

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

A2:This can be realized through the built-in template tags of AnQi CMS. In your article or product detail 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, you just need to call the link and title through the tag.{{prev.Link}}and{{prev.Title}}Just call the link and title.
  • Related articles:Use `{% archiveList archives with type=“related” limit=“N” %}…{% endarchiveList