How can you implement a unique display style for content under a specific category in AnQi CMS?

In website operation, we often encounter such needs: a certain content category needs a unique display style to highlight the importance, uniqueness, or brand character of its content.For example, your 'news center' may require a concise list layout, while the 'selected cases' may require a more visually striking grid layout or slideshow display.AnQiCMS provides powerful template customization capabilities, making it intuitive and efficient to achieve this goal.

Why do you need to customize the display style for specific categories?

The unified website style is indeed important, but the diversity of content often requires a more flexible presentation way.Adopting a unique display style for specific categories not only enhances user experience but also allows visitors to distinguish different types of content at a glance, strengthens the brand image, and even has a positive effect on SEO optimization because designs that are unique and adaptable to the content are more likely to be favored by users.The flexible content model and modular design of Anqi CMS are exactly what is needed to meet such customized requirements.

How to implement a unique display style for a specific category in Anqi CMS?

The core of achieving this goal lies in the "Classification Template" function of Anqi CMS.It allows you to specify a dedicated template file for each category, thereby completely controlling the display of the category page and its content.

Step 1: Define the target category and design ideas

Before getting your hands dirty, first determine which category needs a unique style, as well as the visual effects and interactive experience you wish to present.For example, if you want the products under the "Our Products" category to be displayed in a card grid instead of the default list, then this "Our Products" is your target category.

Step 2: Create or prepare a dedicated template file

The template files of AnQi CMS are stored in/template/您的模板目录/. To provide a unique display style for a specific category, we need to create a new template file here.

AnQi CMS has flexible naming conventions for template files. For example, if the database table name corresponding to your product model isproduct, and you want the ID to be123The category (such as "Our products") has a unique display style, you can create a name forproduct/list-123.htmlThe template file. When accessing the category page, the system will automatically use this template specified by the category ID first.

Of course, you can also use a custom name, such ascustom/product_grid_layout.htmlThe benefit of using a custom name is that you can manage these special templates more flexibly and specify them manually in the background.

When creating templates, it is usually from the current theme you are using.bash.html(or similar public header files) inheritance to ensure the overall structure and public resources (such as CSS, JS) are preserved. For example, you can use it at the beginning of a new template.{% extends 'bash.html' %}.

Step 3: Use the new template in the background for the specified category

After the template file is ready, the next step is to apply it to the target category.

1. Log in to the AnQi CMS background.

2. Navigate to the 'Content Management' menu under 'Document Categories.'

3. Find the target category (such as 'Our Products') you want to apply the new style to, and click the 'Edit' button on the right.

4. In the category editing page, scroll down to the 'Other Parameters' area.

5. You will see a field named "Category Template". Here, enter the relative path and name of the custom template file you just created.

   • If you are using模型table/list-{分类ID}.htmlSuch automatic matching naming is theoretically unnecessary to fill in manually, the system will automatically match.But to ensure that nothing is missed or when you choose to customize the naming, it is more reliable to fill in the path directly.For example, if your file iscustom/product_grid_layout.html, then fill incustom/product_grid_layout.html.

6. Note the option 'Apply to child categories'. If you want all child categories under this category to inherit this unique display style, please check this option.If only the current category is needed, leave the default unchecked.

7. Click "OK" to save the category settings.

Fourth step: fill in the template content and style

Now, you have applied the new template to a specific category. In the new template file, you can use various template tags provided by Anqi CMS to retrieve data and build page layouts:

• Get category details:Use{% categoryDetail %}Tags can retrieve the title, description, and Banner image information of the current category.

  
  {% categoryDetail currentCategory with name="Title" %}
  <h1>{{ currentCategory }}</h1>
  {% categoryDetail description with name="Description" %}
  <p>{{ description }}</p>
  

• Get the document list under the category:This is the key to building the core content area. Using{% archiveList %}tags, and specifycategoryIdFor the current category ID andtype="page"Used for pagination,limitSet the number of items per page.

  
  <div class="product-grid-container">
  {% archiveList products with type="page" limit="12" %}
      {% for item in products %}
      <div class="product-card">
          <a href="{{ item.Link }}">
              <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="product-thumb">
              <h3 class="product-title">{{ item.Title }}</h3>
              {% if item.Price %}
              <span class="product-price">¥{{ item.Price }}</span>
              {% endif %}
          </a>
      </div>
      {% empty %}
      <p>此分类下暂无产品。</p>
      {% endfor %}
  {% endarchiveList %}
  </div>
  {# 如果需要分页，请添加分页标签 #}
  {% pagination pages with show="5" %}
      <div class="pagination-controls">
          {# ... 分页链接代码 ... #}
      </div>
  {% endpagination %}
  

• Add style:Don't forget to add the corresponding CSS style for your new layout. You can place the CSS file inpublic/static/您的模板目录/css/the directory, andbash.htmlor include it in your custom template.

By following these steps, you can easily achieve a unique display style for specific category content in Anqi CMS.

Further exploration: more refined customization.

In addition to specifying a template for the entire category, Anqi CMS also provides finer-grained control:

• Independent style for specific documents:If a specific document under a category requires a unique display effect, you can find the "Document Template" field in the "Other Parameters" when editing the document, and specify a dedicated template file (such asarticle/my_special_article.html)。Even if the document belongs to a category with a default category template, it will use the specified template first.
• Use custom fields to implement conditional styling:By using the "Content Model" feature, you can add custom fields to a specific model. In your category template, you can use the values of these custom fields to{% if %}Logical judgment to dynamically adjust the style of the content. For example, add a 'recommendation level' field to the 'product' model, and then display different background colors or corner markers in the template according to different recommendation levels.

The design concept of AnQi CMS is to provide an efficient, customizable, and scalable content management solution.By flexibly using category templates and content models, you can enhance the operation and display capabilities of your website to a new height.

---

Frequently Asked Questions (FAQ)

1. What is the difference between the custom category template and the default list template of the model?

For example, the default list template of the model (e.g.article/list.htmlorproduct/list.html) Is when you have not specified a template for a specific category, all categories under this model will use the general display template.And custom category templates allow you to break this uniformity, creating exclusive page layouts and styles for individual or a group of specific categories.This means you can design a news portal style list for the "news" category, and a service project display style list for the "service" category, without affecting the display of other categories.

2. What if I accidentally set up the category template wrong and it causes the page to not open?

Do not worry. If the page cannot be opened, it is usually due to an incorrect template file path, the file does not exist, or there are syntax errors in the template code.You can immediately log in to the Anqi CMS backend, re-enter the editing page of this category, clear the 'Category Template' field, and save the settings.The system will fallback to using the default list template of the category model, so the page can be displayed normally.Then, please check the naming, storage path, and code of the template file carefully.

3. How do I get the list of subcategories or associated tags under a custom category template?

In the custom category template, you can use the rich template tags of Anqi CMS to obtain various data. To get the subcategory list, you can use{% categoryList %}tags, and specifyparentIdto get the ID of the current category. For example:{% categoryList subCategories with parentId=category.Id %}. To get the tag list of the current category, you can in{% archiveList %}loop to get the tags of each document, or use{% tagList %}Labels to retrieve all labels or labels of specified categories. Detailed usage of these labels is explained in the AnQi CMS template development document, which is very convenient for you to build complex navigation and content association.