How to set and get custom website sidebar content using the `{% diy %}` tag?

As an experienced website operations expert, I am well aware that the flexibility of the website content management system is crucial for operational efficiency.AnQiCMS (AnQiCMS) provides us with many powerful content management features with its concise and efficient architecture.Today, let's delve into one of the very practical and flexible features - how to make use of{% diy %}Set and get custom website sidebar content.

Unlock the secret to custom CMS sidebar of AnqiCMS.{% diy %}Flexible use of tags

In website operation, the sidebar (Sidebar) often plays an important role.Whether it is to display the latest news, popular articles, ad slots, social media links, or important announcement information, a well-designed, easy-to-update sidebar can greatly enhance user experience and website conversion rates.However, if it is necessary to modify the template code every time the sidebar content is updated, it will undoubtedly bring a huge burden to the operation work.Aanqi CMS is well-versed in this, through its powerful{% diy %}Tags, provide us with an elegant solution, making sidebar content management simpler than ever before.

I. Understanding the need for custom sidebar

Imagine your website is running a marketing campaign and needs to add a prominent banner or countdown timer to the sidebar of all article pages.Or, would you like to adjust the list of recommended products according to the change of seasons, or even to optimize SEO by regularly updating some core keywords related text links.If this content is hard-coded in the template, any change requires the involvement of developers, which is not only time-consuming and labor-intensive, but may also pose potential risks due to unfamiliarity with the code.

We need a mechanism at this point that can easily adjust any content of the sidebar through the back-end management interface without modifying the template file.{% diy %}The tag is just for this. It allows us to define any number of custom content blocks in the Anqi CMS backend, and dynamically call and display these contents at any position on the website frontend, especially in the sidebar.

Part two: Unveiling{% diy %}Tags: Entry to custom content

{% diy %}Tags play the role of a 'universal content container' in Anqi CMS.The core function is to obtain the corresponding "parameter value" based on the preset "parameter name" from the "custom setting parameters" in the background.These parameter values can be plain text, HTML code snippets, or even image links.This design concept allows the various non-structured content areas of the website (such as the sidebar) to be separated from the core content publishing process, realizing independent and convenient management.

This means that once the backend is set up, operations personnel can update the website's sidebar, footer information, popup announcements, and any other small blocks of content that need to be dynamically displayed in multiple places on the page, without touching a single line of code.

Step 3: Practical Operation: Set Custom Sidebar Content

Now, let's practice step by step how to{% diy %}Tags to add vitality to our website sidebar.

1. Define your custom parameters in the background

Firstly, we need to create or modify the custom content used for the sidebar in the Anqicms background management system.

1. Log in to the backend:Access your AnQi CMS backend management address (usually)your-domain/system/)
2. Navigate to the settings area:In the left menu, find the "Background Settings" category. Anqi CMS provides multiple areas to define custom parameters, such as "Global Function Settings" or "Contact Information Settings".For such general sidebar content, we usually add it in the 'Global Function Settings'.Click to enter the "Global Settings".
3. Add custom parameters:At the bottom of the "Global Function Settings" page, there is usually an area for "Custom Setting Parameters". Click the "Add Custom Setting Parameter" button (or a similar entry).
4. Enter parameter information:
   • Parameter name:This is the most important identifier, equivalent to the unique ID of this custom content block, for front-end template calls. Please use a combination of letters, numbers, and underscores to ensure its uniqueness and descriptiveness, for exampleSidebarLatestNewsTitle(Sidebar latest news title),SidebarAdBannerHtml(Sidebar banner HTML).
   • Parameter value:Enter the content you want to display in the sidebar. This can be simple text, such as "Hot Recommendations", or complex HTML code snippets, such as an ad block with links and images:

     
     <a href="/promotion-page" target="_blank">
         <img src="https://en.anqicms.com/uploads/ad-banner.jpg" alt="最新促销活动" style="max-width: 100%;">
     </a>
     

   • Note:This is an optional field, used to explain the purpose of this parameter. Good remarks can help you or your team members quickly understand the use of each parameter during later maintenance.
5. Save settings:After filling in, click the save button to ensure that your custom parameters have been successfully entered into the system.

2. In the template usage{% diy %}Label fetch content

Next, we need to modify or create your website template file so that it can call the custom content defined just now in the sidebar.

1. Locate the template file:According to your template structure, the sidebar content is usually located in a separate template fragment file (such aspartial/aside.html), or directly embedded in the main layout file (such asbase.htmlIn the background. You can find these files to edit in the "Template Design" function.
2. Insert{% diy %}Tags:Insert at the location where you want to display custom content.{% diy %}.
   • Directly output the content:If you want to print the parameter value directly, you can use it like this:

     
     <div class="sidebar-block">
         <h3>{% diy with name="SidebarLatestNewsTitle" %}</h3>
         <!-- 其他侧边栏内容，如文章列表 -->
     </div>
     

   • Assign the content to a variable and render it safely (recommended for handling HTML content):If your parameter value contains HTML code, to ensure that HTML is parsed correctly and not displayed as plain text, and to avoid potential security risks (XSS), we recommend assigning it to a variable and using|safeThe filter performs rendering.

     
     <div class="sidebar-block ad-area">
         {% diy adContent with name="SidebarAdBannerHtml" %}
         {% if adContent %} {# 判断参数值是否存在 #}
             {{ adContent|safe }} {# 使用 |safe 过滤器确保HTML代码被浏览器解析 #}
         {% else %}
             <p>暂无广告</p> {# 如果后台未设置内容，可以显示备用信息 #}
         {% endif %}
     </div>
     

     Please note,|safeThe filter is very important. It tells the Anqi CMS template engine that the content you provide is safe and can be rendered directly as HTML without escaping.
3. Save template:After modification, save the template file and clear the website cache (usually there is a "update cache" function in the background), so that the changes take effect immediately.

Now,