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

As an experienced website operations expert, I know that the flexibility of the website content management system is crucial for operational efficiency.Auto CMS (AutoCMS) provides us with many powerful content management functions with its concise and efficient architecture.{% diy %}Label setting and getting custom website sidebar content.

Unlock the secret to custom sidebar of Anqi CMS:{% diy %}Flexible Use of Tags

In website operation, the sidebar (Sidebar) often plays an important role.Whether it is displaying the latest news, popular articles, ad spaces, 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 each time the sidebar content is updated, it will undoubtedly bring a huge burden to the operation work.{% diy %}Labels provide an elegant solution, making the content management of the sidebar unprecedentedly simple.

1. Understand the needs of 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, you want to adjust the list of recommended products according to the change of seasons, or even optimize SEO by regularly updating some core keywords-related text links.If this content is hardcoded in the template, any change requires the intervention of a developer, which is not only time-consuming and labor-intensive, but may also lead to potential risks due to unfamiliarity with the code.

This is when we need a mechanism that can easily adjust any content of the sidebar without modifying the template file through the backend management interface.{% diy %}Tags are born for this.It allows us to define any number of custom content blocks in the AnQi CMS backend, and dynamically call and display these content blocks at any location on the website front end, especially in the sidebar.

Part Two: Unveiling{% diy %}Label: Custom content entry

{% diy %}Labels play the role of a 'universal content container' in AnQi CMS.Its 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 idea makes it possible for various non-structured content areas (such as sidebars) on the website to be separated from the core content publishing process, achieving independent and convenient management.

This means that, as long as the settings are set up in the background, operations personnel can update the website's sidebar, footer information, popup announcements, and any other small pieces of content that need to be dynamically displayed in multiple places on the page, just like publishing articles, without touching a single line of code.

三、实战操作：Set Custom Sidebar Content

Now, let's go step by step to practice, 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 for the sidebar in the Anqi CMS background management system.

1. Log in to the backend:Access your CMS backend management address (usually)your-domain/system/).
2. Navigate to the settings area:In the left menu, find the "Background Settings" category.The AutoCMS provides multiple areas where you can define custom parameters, such as 'Global Function Settings' or 'Contact Information Settings'.For such general content as the sidebar, we usually add it in the 'Global Function Settings'.Click to enter "Global Function Settings".
3. Add custom parameters:At the bottom of the "Global Feature Settings
4. Enter parameter information:
   • Parameter name:This is the most important identifier, equivalent to the unique ID of this custom content block, for use by the front-end template. Please use a combination of letters, numbers, and underscores to ensure it is unique and descriptive, for exampleSidebarLatestNewsTitle(Sidebar latest news title)、SidebarAdBannerHtml(Sidebar advertisement 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 usage of each parameter during later maintenance.
5. Save settings:Filled in after, click the save button to ensure that your custom parameters have been successfully entered into the system.

2. Use in the template{% diy %}Label to retrieve content

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

1. 定位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.html）in. You can find these files to edit in the "Template Design" feature in the background.
2. Insert{% diy %}Tags:Insert at the location where you want to display custom content.{% diy %}Label.
   • Directly output the content:If you want to directly print the parameter value, 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 correctly parsed and not displayed as plain text, and to avoid potential security risks (XSS), we recommend assigning it to a variable and using|safeFiltering for 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 CMS template engine that the content you provide is safe and can be rendered directly as HTML without escaping.
3. Save template:Modify the content and 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,