How to use the `{% diy %}` tag to get custom parameters and control formatting and styling on the front end?

As an experienced website operations expert, I know that the flexibility of a content management system (CMS) is the key to improving operational efficiency and website performance. AnQiCMS (AnQiCMS) stands out in this aspect due to its excellent customization, especially as it provides through{% diy %}The functionality of obtaining custom parameters by tags brings great convenience and imagination space for the layout and style control of front-end content.Today, let's delve into how to巧妙运用 this feature, making your website content both beautiful and functional.

{% diy %}Label: The core of custom parameters is located here

In AnQi CMS,{% diy %}Tags are a powerful tool to get the parameters you customize in the background.These custom parameters are usually defined in modules such as 'System Settings' or 'Contact Information Settings', and you can create any number of key-value pairs (parameter names and values) according to your business needs.For example, you can define a 'Company Slogan', a 'Special Service Icon URL', or even a 'Segment containing HTML advertisements'.

The basic syntax of its use is:{% diy 变量名称 with name="字段名称" %}

here,nameThe attribute corresponds to the "parameter name" you set in the background, and变量名称It is the local variable used in the front-end template to receive and process this parameter value. For example, if you set a custom parameter named "CompanySlogan" in the background, with a value of "We illuminate life with innovation", then in the front-end template, you can obtain it in the following way:

{% diy slogan with name="CompanySlogan" %}

Once a parameter is assigned tosloganyou can use this variable anywhere in the template{{ slogan }}Output its content. This mechanism of separating data from the view is the basis for flexible layout and style control.

From backend to frontend: obtain custom parameters and structure content.

The first step in front-end layout and style control is to ensure that custom parameters can be correctly obtained and integrated into the HTML structure.{% diy %}The tag is born for this. It can receive parameter values that can be plain text, image URLs, or even rich text content containing HTML fragments.

For simple text content, you can directly output:<h1>{% diy with name="PageTitle" %}</h1>

But to better control the layout and style, we usually assign it to a variable and then wrap the variable content in HTML tags with specific semantics and class names.

The core strategy is:Try to use semantic HTML tags to wrap content and define styles through CSS classes (class).This not only conforms to the Web standard, but also makes maintenance and expansion easier.

Practice: Layout and style control of various custom parameters

Let's look at several specific examples to see how different types of custom parameters can be beautifully typeset and styled on the front end.

1. A plain text type custom parameter (such as a company slogan)

Assuming you have customized a parameter in the background, namedCompanySloganIts value is "AnQi CMS: Your Content Management Expert". You want to display this slogan prominently at the top of the website.

Backend definition: Parameter name:CompanySloganParameter value:安企CMS：您的内容管理专家

Front-end template (combined HTML and CSS):

`html {% comment %} Get the custom parameter of CompanySlogan {% endcomment %} {% diy sloganText with name=“CompanySlogan”