How to ensure that the custom system parameters set in the AnQiCMS backend can be correctly displayed in the frontend template?

In AnQi CMS, the flexible application of custom system parameters in the backend is the key to improving the maintainability and operational efficiency of the website.Many times, we may need some information that is not covered by the default system fields, such as specific external links, additional corporate honor information, or exclusive copy for a particular event.The AnQi CMS provides a convenient way to add these custom parameters and ensures they are presented accurately in the front-end template.

Understand the location of custom system parameter settings

Firstly, we need to clarify the setting entry for custom system parameters in the security CMS backend. There are mainly two places where such operations can be performed:

  1. Global Function Settings (System Settings):Visit the 'Backend Settings' menu in the backend, and select 'Global Function Settings'.Here, in addition to setting basic information such as website name, Logo, record number, etc., you can also find the 'Custom Settings Parameters' area.This area allows you to add custom information applicable to the entire site.
  2. Contact Information Settings (Contact Settings):Similarly, under the "Background Settings" menu, select "Contact Information Settings".In addition to standard fields such as contacts, phone numbers, and email addresses, there is also a 'Custom Settings Parameter' here, specifically used for adding additional information related to the website's contact methods, such as WhatsApp account, Facebook homepage link, etc.

When adding custom parameters at these two locations, you need to fill in three key items: "Parameter Name", "Parameter Value", and "Notes". Among which,Parameter nameThis is of utmost importance, it will be the unique identifier for calling this custom parameter in your frontend template.Please note that the system will automatically convert the parameter name you enter to camelCase (i.e., the first letter of each word is capitalized and there are no spaces in between), and when calling in the template, you need to use this converted camelCase parameter name.And the 'parameter value' is the specific content you want to display on the website front end, while 'remark' is for your convenience to remember and manage the purpose of the parameter.

Two, call custom parameters correctly in the frontend template

Once the custom parameters are set up in the background, the next step is to call them in the front-end template. AnQi CMS provides special template tags to achieve this:

  1. Call the custom parameter in the global function settings:For the custom parameters added in the "Global Function Settings", you need to use{% system %}Call by tag. For example, if you set a parameter namedHelpUrl(the parameter name isHelpUrl), its value ishttps://www.example.com/help

    <a href="{% system with name="HelpUrl" %}" target="_blank">帮助页面</a>
    

    If you want to assign the parameter value to a variable first and then use it, you can do so as follows:

    {% system helpPageLink with name="HelpUrl" %}
    <a href="{{ helpPageLink }}" target="_blank">帮助中心</a>
    
  2. Call the custom parameter in the contact information settings:Similarly, for custom parameters added in the "Contact Information Settings", you need to use{% contact %}tags. For example, if you add a name calledWhatsAppThe parameter, with a value of “+1234567890”, can be called in the template like this:

    <p>WhatsApp 联系:{% contact with name="WhatsApp" %}</p>
    

    Or assign it to a variable:

    {% contact whatsAppNumber with name="WhatsApp" %}
    <a href="https://wa.me/{{ whatsAppNumber }}" target="_blank">联系我们(WhatsApp)</a>
    

Important reminder:

  • The parameter name (name attribute) must be consistent with the camel case naming automatically converted by the background.For example, if the parameter name you enter in the background is "help link", the system may convert it toHelpLinkThen you must use it in the templatename="HelpLink".
  • If your custom parameter value contains HTML code (such as a link, an image tag, or formatted text), to ensure that these HTML codes are correctly parsed by the browser rather than displayed as text, you need to add in the output variable.|safefilter. For example:
    
    {% system customHtmlContent with name="CustomHtml" %}
    <div>{{ customHtmlContent|safe }}</div>
    

Three: Some Suggestions in Practice

  • Naming Standardization:Try to use English words to define 'parameter name', and keep it concise and meaningful, which is more convenient for memory and template calls. For example,SiteEmailvs.网站邮箱more general.
  • Distinguish between use cases:The parameters for global settings are applicable to general information across the entire website, while the parameters for contact information are more focused on various contact methods. Proper classification helps with management later on.
  • Immediate testing:Make sure to check the display effect on the corresponding front-end page immediately after you set or modify custom parameters in the background, to ensure that the parameters are called correctly.
  • Use the remark field:The 'Notes' field on the backend does not display on the front end, but it can help you record the purpose, value type, or precautions of custom parameters, facilitating team collaboration and future maintenance.

By using the above method, you can easily define and manage various custom system parameters in the Anqi CMS backend, and flexibly call them in the frontend template, thereby greatly enhancing the personalization and manageability of the website.


Common Questions (FAQ)

1. Why can't the custom parameter I set in the background be displayed in the frontend template?This usually has several reasons. First, please check the tags you are using in the template.{% system %}or{% contact %}Whether it matches the area set in the background. Secondly, the most important may be the spelling of the parameter name. Make surenameThe value of the attribute should be consistent with the camelCase naming automatically converted from the backend parameter name (for example)HelpUrlInsteadhelpurlorhelp_urlas well. Moreover, make sure that the parameter has been saved successfully in the backend and has not been overwritten by other configurations.

2. My custom parameter value is an image or link, but when displayed on the front end, it is only plain text, the link is not clickable, and the image is not displayed. Why is that?If your custom parameter value is itself HTML code (for example,<img src="..." />or<a href="...">链接文本</a>), then you need to add extra when outputting the variable in the frontend template,|safea filter. For example{{ myImageVar|safe }}This is to inform the template engine that this content is safe HTML and does not require escaping, ensuring that the browser can parse and display it correctly.

3. What types of system parameters can I customize? Is there a quantity limit?The Anqi CMS has a very flexible custom parameter feature, you can add any text, numbers, links, simple HTML code snippets, and other types of data as needed.For example, you can add company mission, deadlines for specific events, customer service online hours, etc.Theoretically, there is no strict limit on the number of customizable parameters that can be added, but for the performance and management convenience of the system, it is recommended to plan reasonably according to actual needs.For complex, structured content, it may be more suitable to implement through 'Content Model' or 'Single Page' features.