As an experienced website operations expert, I fully understand how important the flexibility and update efficiency of website content are in the increasingly fierce online competition.AnQiCMS (AnQiCMS) with its powerful functions and friendly template system, provides us with many operational tools.{% diy %}Labels, see how they help us easily control the custom information on the front-end pages, making website content operations more intelligent and efficient.

Anqi CMS Magic Box: use{% diy %}Labels easily control front-end custom information

In website operation, we often need to display some personalized information, such as the latest marketing slogans, temporary announcement notifications, special descriptions of a page, or supplementary contact methods that do not belong to the regular categories.If each modification requires changing the front-end template code, it will be a tedious and error-prone task, especially for operators with a non-technical background, which is a difficult barrier to overcome.

Anqi CMS is well-versed in this, providing us with a powerful feature:{% diy %}Tag.The appearance of this tag is like adding a content management 'magic box' for website operators, it allows us to directly configure custom information in the background, and then flexibly display it on the front-end page through simple template tags, and all of this can be done without touching a single line of code!

{% diy %}The secret of labels: the source of custom information

To understand{% diy %}Labels, we first need to understand where these "custom information" comes from. They did not appear out of thin air, but were created by you manually in the Anqi CMS backend.

The AnqiCMS backend design is very user-friendly, in“Background Settings”Under the menuGlobal function settingsorthe "Contact Information Settings"modules, you will find a setting named"Custom Setting Parameters"The area. This is where we perform 'magic'.

Click to add a new custom parameter, you need to fill in two key pieces of information:

  1. Parameter name (Name):This is like giving your custom information a unique 'name', for exampleWebsiteSlogan(Website slogan),ServiceHotline(Customer service hotline) orWechatOfficialAccount(WeChat Official Account).This name will be the key identifier for calling this information in your frontend template.For ease of management and reading, I suggest using CamelCase or meaningful English names.
  2. Parameter value (Value):This is the content you really want to display on the frontend page, which can be text, numbers, a link, or even a brief HTML code snippet if needed.

For example, suppose your company has recently launched a new slogan, you can add it in the "Global Function Settings" under the "Custom Setting Parameters":

  • Parameter name: CompanyMotto
  • Parameter value: “用创新驱动未来,以服务成就客户!”

Configuration completed and saved, this custom information quietly lies in the background, waiting for your{% diy %}tag to wake it up.

Front-end display:{% diy %}The clever use of tags

Once the background configuration of custom information is set, displaying it on the front-end page becomes extremely simple.{% diy %}The basic usage of tags is:

{% diy with name="您在后台设置的参数名" %}

Or, if you want to store the value you get into a variable first and then proceed further, you can write it like this:

{% diy myCustomValue with name="您在后台设置的参数名" %}{{ myCustomValue }}

HerenameThe parameter is mandatory, it must match the 'parameter name' set in the 'custom settings parameters' on the backend, including case sensitivity.

Also, if you use the multi-site management function of Anqi CMS and want to call custom information from other sites, you can also do so bysiteIdspecifying the site ID with the parameter:

{% diy otherSiteSlogan with name="WebsiteSlogan" siteId="2" %}

In most cases, for custom information of a single site or calling the current site,siteIdthe parameter does not need to be filled in.

Practice session: Let the slogan and social links come to life

Let us experience two real-life scenarios{% diy %}The power of tags:

Scenario one: dynamically display the slogan of the website

Your website header needs to display an eye-catching slogan, which may be updated periodically according to marketing activities.

  1. Backend configuration:

    • Enter "Backend Settings" -> "Global Function Settings" -> "Custom Setting Parameters".
    • Add a new parameter:参数名is set toWebsiteSlogan,参数值is set to"安企CMS,让你的网站管理更简单!"
    • Save.
  2. Front-end template call:

    • Before yourheader.htmlIn the template file that needs to display the port number, add the following code:
    <p class="website-slogan">{% diy with name="WebsiteSlogan" %}</p>
    

    Now, the front-end page will dynamically display the slogan you set in the background. When you want to change the slogan, just modify it in the background.WebsiteSloganThe parameter value, the front-end content will be updated immediately, without touching a line of front-end code.

Scenario two: Flexible management of social media links

The website footer usually has social media icons like Facebook, Twitter, etc., which, when clicked, jump to the corresponding social homepage. If these links need to be adjusted,{% diy %}Tags can also be useful.

  1. Backend configuration:

    • Enter "Backend Settings" -> "Contact Settings" -> "Custom Setting Parameters".
    • Add a new parameter:
      • 参数名is set toFacebookPageUrl,参数值is set to"https://www.facebook.com/your-anqicms-page"
      • 参数名is set toTwitterProfileUrl,参数值is set to"https://twitter.com/your-anqicms-profile"
    • Save.
  2. Front-end template call:

    • Before yourfooter.htmlIn the template file, you can construct social media links like this:
    <div class="social-links">
        <a href="{% diy with name="FacebookPageUrl" %}" target="_blank" rel="nofollow">
            <i class="icon-facebook"></i> <!-- 假设您使用了图标字体 -->
        </a>
        <a href="{% diy with name="TwitterProfileUrl" %}" target="_blank" rel="nofollow">
            <i class="icon-twitter"></i>
        </a>
    </div>
    

    In this way, your social media links are not only dynamically controllable, but even if a link is not configured on the backend, the front end will not display a broken link, but leave it blank (of course, you can also use conditional judgment to control the display more finely).

{% diy %}The value and advantages

{% diy %}Tags may seem simple, but they contain great operating value behind them:

  • Flexibility and independence:Allow the website's text content, links, and other elements to脱离 template hard coding, so that operations personnel can complete daily content updates and adjustments without relying on the technical team.
  • Reduce maintenance costs:Avoided frequent modifications to template files, reduced the risk of errors introduced by code changes, greatly improved the maintenance efficiency of the website.
  • Quickly respond to the market:Responding to sudden marketing activities, announcement releases, or information updates, it can take effect immediately, enhancing the agility of the website.
  • Unified content management:Concentrate scattered custom information in the background management to make it easier to search and maintain in a unified manner.

Use tips

  1. Naming conventions:Choose clear and meaningful English names for your custom parameters, as this will greatly enhance the readability and maintainability of the template. Avoid using overly general names such asText1/LinkA.
  2. Reasonable usage scenario: {% diy %}The tag is most suitable for text or links that do not change frequently and have a relatively fixed format.For complex structures that require a lot of formatting, it is still recommended to manage through articles, single-page modules, etc.
  3. Caution: Safety!If you allow{% diy %}The tag outputs HTML content, please ensure that the background input HTML code is safe, and avoid security risks such as XSS attacks. In most cases,{% diy %}The text will be automatically escaped for security, but if you need to output raw HTML, you may need to cooperate|safefilter.
  4. Multi-site compatible:RemembersiteIdParameter, it is your powerful assistant when switching content sources in a multi-site environment.

In summary,{% diy %}The tag is a "treasure" that Anqi CMS provides for website operators, perfectly connecting backend configuration with frontend display, making the management and update of website content unprecedentedly convenient and efficient. Master and make good use of this tag,