Security CMS template customization secret: skillful usemoduleDetailTags, making different content models shine with unique charm
In today's content-driven digital world, the attractiveness of a website does not only come from the quality of its content, but also from the exquisite form of its presentation and the smooth user experience.AnQi CMS knows this, it endows the operator with high flexibility with its powerful content model function, enabling them to create diverse content structures such as articles, products, events, etc. according to different business needs.However, having a flexible content model is not enough. How to let these different types of content have their own unique 'identity identifier' and visual presentation in the front-end template is a key link to improve the professionalism and user experience of the website.
Imagine when a user browses your website, an in-depth analysis article and a carefully crafted product introduction, if they can be visually distinguished by a dedicated icon or a unique style, it will undoubtedly greatly improve the recognition of information, guiding users to understand the content attributes more quickly. Today, let's delve into a powerful template tag in Anqi CMS -moduleDetailHow it helps us easily implement these personalized icons and style displays in the template based on the content model ID.
The unique charm of the Anqi CMS content model.
One of the core strengths of AnQi CMS is its flexible content model.This means you can fully define content types according to your own business logic, for example, creating an 'article model' for news information, a 'product model' for e-commerce goods, or an 'event model' for online activities.Each model can have its own unique fields, thus achieving highly customized content management.This design philosophy makes Anqi CMS not only a content publishing tool but also a content operation platform that can adapt to various business scenarios.
But when these diverse contents gather at the front end of the website, how can we identify the content models behind them? This leads tomoduleDetailthe application of tags.
moduleDetailLabel: The Window to Insight the Essence of Content Model
moduleDetailThe label, as the name implies, is used to obtain the 'document model detail data'.It's like a detective that can reveal the details of the content model it belongs to based on the clues of the content.By this tag, we can obtain the ID, name, link, and other key data of the content model, thereby providing the basis for dynamic display in the template.
This label's usage is very intuitive. If you are on a document detail page or in a document list loop, and you are already able to access the current document'sModuleId(The ID of the document model you belong to), then you can call it like this:
{% moduleDetail currentModuleInfo with id=archive.ModuleId %}
Here, archive.ModuleIdIs a hypothetical variable representing the content model ID obtained from the current document object.currentModuleInfoThis is a custom variable name we define for the model detail data obtained, for easy reference.
moduleDetailThe label can provide the following valuable information:
Id: The unique identifier of the content model. This is the direct basis for us to display specific icons or styles based on the model ID.Title: The display title of the content model, such as "Article Model", "Product Model". This is usually the friendly name set by the administrator in the background for the model.Name: The system name of the content model, usually a string in English, which may be used for URL aliases, etc.Link: The home page link of the content model.TableName: The table name corresponding to the content model in the database.
In this information,IdandTitle(orName) is the most commonly used attribute for implementing dynamic style and icon display.
Practice Exercise: Apply Custom Styles or Icons Based on Content Model ID
Now, let's look at how to make use of several actual scenarios,moduleDetailTags and the information they provide inject vitality into your security CMS website template.
Scenario one: Display exclusive icons based on model ID.
Assuming your website has an article model (ID 1) and a product model (ID 2), you want to display an icon representing its type next to each article or product title.
You can write the code like this at an appropriate location in the template, such as next to the document title:
{% set docModuleId = archive.ModuleId %} {# 假设从当前文档（archive）对象获取模型ID #}
{% moduleDetail moduleData with id=docModuleId %}
<h3 class="post-title">
{% if moduleData.Id == 1 %}
<i class="fas fa-newspaper article-icon" title="文章"></i> {# 文章图标 #}
{% elif moduleData.Id == 2 %}
<i class="fas fa-box-open product-icon" title="产品"></i> {# 产品图标 #}
{% else %}
<i class="fas fa-file-alt default-icon" title="其他内容"></i> {# 默认图标 #}
{% endif %}
<a href="{{ archive.Link }}">{{ archive.Title }}</a>
</h3>
This code first retrieves the ID of the content model the current document belongs to, then throughmoduleDetailTag to obtain the complete information of the model and store it inmoduleDatathe variable. Then, using simpleif-elif-elselogic, according tomoduleData.Idvalue, dynamically insert different CSS icon classes (such asfas fa-newspaperThus, it distinguishes articles and products visually.
Scenario two: Apply dynamic styles based on the model name.
In addition to displaying icons, we can also add dynamic CSS classes to the entire content block or specific elements based on the name of the content model, in order to provide richer style control.This is particularly useful when it comes to distinguishing the overall layout of article cards, product list items, and so on.
{% set docModuleId = archive.ModuleId %}
{% moduleDetail moduleData with id=docModuleId %}
{% set moduleClass = '' %}
{% if moduleData.Name == "文章模型" %}
{% set moduleClass = 'content-card-article' %}
{% elif moduleData.Name == "产品模型" %}
{% set moduleClass = 'content-card-product' %}
{% else %}
{% set moduleClass = 'content-card-default' %}
{% endif %}
<div class="content-card {{ moduleClass }}">
<div class="content-thumbnail">
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
</div>
<div class="content-body">
<h4 class="content-title"><a href="{{ archive.Link }}">{{ archive.Title }}</a></h4>
<p class="content-description">{{ archive.Description }}</p>
</div>
</div>
In this example, we base it on.moduleData.NameDynamic setting of a content model name.moduleClassVariable, then apply it todivthe class attribute of the container. This way, we can target it in CSS..content-card-articleand.content-card-productWrite different style rules to achieve visual differentiation in layout, background, borders, etc.
Scenario three: Obtain model links to build navigation or filtering
moduleDetailNot limited to style, it can also provide the model page ofLink. This is very useful for building dynamic navigation menus or filters.
{% moduleDetail articleModule with name="Link" id=1 %}
{% moduleDetail productModule with name="Link" id=2 %}
<nav class="main-navigation">
<ul>
<li><a href="{{ articleModule }}">查看所有文章</a></li>
<li><a href="{{ productModule }}">浏览产品目录</a></li>
</ul>
</nav>
Here we directly obtain the root links of the article model and product model, which can be easily integrated into the website navigation, allowing users to one-click access to the list page of a specific content model.
A more flexible implementation: combining CSS variables and mappings
When you have a variety of content models, within the template,if/elifConditional judgments may become lengthy. To maintain code conciseness and maintainability, you can consider combining CSS variables or performing more advanced mapping in the background.
An elegant way is to, in the template, for the content container