Drive AnQi CMS: Flexibly customize system-level parameters and efficiently call them in front-end templates

As an experienced website operations expert, I fully understand the importance of a flexible and customizable content management system for the efficient operation of a company.AnQiCMS (AnQiCMS) boasts its high-performance architecture based on the Go language and rich features, excelling in content publishing, multi-site management, and SEO optimization. Especially in the customization and invocation of system-level parameters, it provides great convenience, allowing operators to easily handle all aspects of the website.

Today, let's delve into how Anqi CMS allows you to customize system-level parameters and flexibly call them in front-end templates, thus achieving more dynamic and personalized website content presentation.

Why to customize system level parameters?

In the operation of daily websites, we often encounter some information that needs to be displayed uniformly throughout the site, such as the company's customer service phone number, unified social media links, corporate vision, special announcement text, or some configurations that need to be quickly adjusted during specific periods.If this information is all hard-coded in the template, once it needs to be modified, it means that multiple template files need to be modified, which undoubtedly increases the maintenance cost and also raises the risk of errors.

The system-level parameter customization feature of AnQi CMS is to solve this pain point.It allows us to manage these global data centrally in the background and call them on demand in the front end through concise template tags, achieving the separation of content and presentation, which greatly enhances the flexibility and operational efficiency of the website.

Customize your exclusive parameters in AnQi CMS backend

The backend settings area of AnQi CMS is the core hub for managing these system-level parameters.We can easily add and manage custom parameters through the 'Global Settings' and 'Contact Information Settings' entries.

  1. Custom parameter in global function settings

    First, log in to your Anqi CMS backend, navigate to the "Background Settings" area on the left menu, and then select "Global Function Settings."}On this page, you will see the website name, website logo, filing number, and other default system parameters.The bottom of the page usually has an area for "custom setting parameters".

    Click the 'Add' button to create a new custom parameter. Here you need to fill in three key pieces of information:

    • Parameter NameThis is the unique identifier you call this parameter in the front-end template. It is recommended to use camelCase naming, for exampleCompanyMottoorHolidayNoticefor easy understanding and distinction.
    • Parameter valueThis is the actual content carried by the parameter. It can be plain text, a URL link, or even a brief HTML code snippet (if needed to render HTML directly on the front end).
    • NoteAdd a clear description of this parameter for the purpose of understanding by you and other team members, and to avoid confusion.

    For example, if your company has a core corporate vision that needs to be displayed on multiple pages, you can set it up like this:

    • Parameter name:CompanyVision
    • Parameter value:以创新驱动，赋能数字营销新时代！
    • Note:企业文化愿景，用于首页和关于我们页面

  2. Custom parameters in the contact information settings.

    Similarly, in the "background settings", select the "contact settings" entry.Here is a default contact information including name, phone number, address, email, etc.Similar to the global settings, there is also a "custom setting parameters" area at the bottom of the page.

    If you need to add some custom information that does not belong to the default contact method, such as the company's WhatsApp link or specific holiday customer service hours, you can add them here. For example:

    • Parameter name:WhatsAppLink
    • Parameter value:https://wa.me/xxxxxxxxxxxx
    • Note:公司WhatsApp联系链接

    This way of categorizing and managing custom parameters helps maintain the order and maintainability of background configurations.

3. Flexibly call custom parameters in the front-end template.

Anqi CMS uses a syntax similar to Django template engine, making front-end template development intuitive and efficient.Once you define system-level parameters in the background, you can flexibly call them in the front-end through specific template tags.

AnQi CMS providessystemThe tag is used to obtain parameters for global feature settings andcontactThe label is used to obtain the parameters for contact information settings. Whether it is a built-in parameter of the system or a parameter you customize, it is called through these two labels.

The basic syntax for calling these parameters is:{% 标签名称 变量名 with name="参数名" %}. Among them,标签名称can besystemorcontact,参数名It is the "parameter name" you defined in the background.

  1. Call the parameters from the global settings.

    Using what we defined earlier,CompanyVisionFor example, in your front-end template (such asindex.htmlorbase.htmlYou can call it like this:

    <div class="company-slogan">
    <p>{% system with name="CompanyVision" %}</p>
</div>

    If you want to store the parameter value in a variable first, so as to perform more complex logical judgments or use it multiple times, you can usesetTags:

    {% set companyVision = '' %}
{% system companyVision with name="CompanyVision" %}


{% if companyVision %}
<div class="company-slogan">
    <p>{{ companyVision }}</p>
</div>
{% else %}
<div class="company-slogan-fallback">
    <p>抱歉，公司愿景正在更新中...</p>
</div>
{% endif %}

    This code not only called the parameters, but also demonstrated how to useifLogical judgment label, displays the backup content when the parameter value is empty, which enhances the robustness of the website.

  2. Call the parameter in the contact information setup

    Similarly, for the parameters defined in the contact information setupWhatsAppLinkThe calling method is also very similar: 

    {% set whatsappLink = '' %}
{% contact whatsappLink with name="WhatsAppLink" %}


{% if whatsappLink %}
<a href="{{ whatsappLink }}" target="_blank" rel="nofollow">联系我们 (WhatsApp)</a>
{% endif %}

    Here we also addedtarget="_blank"andrel="nofollow"Property, this is a good practice for external link SEO optimization and user experience.

  3. Handle parameters containing HTML content.

    If your custom parameter value includes HTML code and you want the front-end to parse and render these HTML directly rather than display the original code, you need to use|safeFilter. For example, if you have an announcement with special formatting or links:

    Backend parameter settings:

    • Parameter name:ImportantNotice
    • Parameter value: `Please visit our href=“/faq”