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

In website operation, we often encounter such needs: a specific content category requires a unique display style to highlight the importance, uniqueness, or brand tone of its content.For example, your 'News Center' may require a concise list layout, while 'Featured Cases' may need a more visually impactful grid layout or slideshow presentation.AnQiCMS provides powerful template customization capabilities, making it intuitive and efficient to achieve this goal.

Why do we need to customize the display style for a specific category?

The uniform style of a website is important, but the diversity of content often requires a more flexible presentation method.Adopt a unique display style for specific categories, which not only enhances user experience, allowing visitors to distinguish different types of content at a glance, but also strengthens the brand image and even has a positive effect on SEO optimization, as unique and content-adaptive designs are more likely to be favored by users.The 'Flexible Content Model' and 'Modular Design' of AnQi CMS are exactly designed to meet such customized needs.

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

The core of achieving this goal lies in the 'Category Template' feature of the AnQi CMS.It allows you to specify a dedicated template file for each category, thus completely controlling the display style of the category page and its content.

Step 1: Clarify the target category and design concept

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

Step 2: Create or prepare a dedicated template file

The template files for 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.

The AnQi CMS has flexible naming conventions for template files. For example, if the database table name corresponding to your product model isproductand you wish to set the ID to123of the category (such as 'Our products') has a unique display style, you can create one namedproduct/list-123.htmlThe template file. When accessing this category page, the system will automatically prioritize this template specified with the category ID.

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

When creating a template, it is usually from the theme you are currently using,bash.htmlinherit, to ensure the overall structure and common resources (such as CSS, JS) are preserved. For example, you can use at the beginning of the new template.{% extends 'bash.html' %}.

Third step: Specify the new template in the background.

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

1. Log in to the Anqi CMS backend.

2. Navigate to the "Content Management" menu and select "Document Categories".

3. Find the target category (e.g., "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 "Classification 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 does not require manual entry theoretically, the system will match automatically.But to ensure safety or when you choose to customize the name, directly entering the path is more reliable.custom/product_grid_layout.htmlIf not, fill incustom/product_grid_layout.html.

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

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

Step 4: 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 the page layout:

• Get category details:Use{% categoryDetail %}Tags can retrieve the title, description, Banner image, and other 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 area for constructing core content. Use.{% archiveList %}Tag, and specifycategoryIdFor the current category ID, as well as.type="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 store the CSS file inpublic/static/您的模板目录/css/the directorybash.htmlor include it in your custom template.

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

Further Exploration: More refined personalized 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 within a category requires a unique display effect, you can find the "Document Template" field under "Other Parameters" while editing the document, and specify a dedicated template file (for example,article/my_special_article.htmlSuch a document, even if it belongs to a category with a default category template, will prioritize using its own specified template.
• Use custom fields to implement conditional styles: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 content.For example, add a 'recommendation level' field to the 'product' model, and then display different background colors or corner marks in the template based on the different recommendation levels.

The design concept of Anqi CMS is to provide an efficient, customizable, and easily scalable content management solution.By flexibly applying classification templates and content models, you can elevate the operation and content display capabilities of your website to a new height.

---

Common Questions (FAQ)

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

The default list template of the model (e.g.,article/list.htmlorproduct/list.htmlThe default display template is used when no template is specified for a specific category, and all categories under this model will follow it.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 item display style list for the "Service" category, without affecting the display of other categories.

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

Don't worry.If the page cannot be opened, it is usually due to an incorrect template file path, a missing file, or 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's model, so the page can be displayed normally.Then, please carefully check the naming, storage path, and code of the template file.

3. How can I get the list of subcategories or associated tag lists under a custom category template?

In the custom category template, you can use the rich template tags of AnQi CMS to retrieve various data. To get the subcategory list, you can use{% categoryList %}Tag, and specifyparentIdthe ID of the current category. For example:{% categoryList subCategories with parentId=category.Id %}To get the tag list of the current category's content, you can in the{% archiveList %}loop to get each document's tags, or use{% tagList %}Get all tags or tags of a specified category by label.The detailed usage of these tags is described in detail in the template development document of Anqi CMS, which is very convenient for you to build complex navigation and content association.