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

The flexible application of background custom system parameters in AnQi CMS 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 copywriting for a specific event.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 entry point for custom system parameter settings in the Anqi CMS backend. There are mainly two places where such operations can be performed:

  1. Global Function Settings (System Settings):Visit the 'Background Settings' menu in the backend, select 'Global Feature Settings'.Here, in addition to setting the website name, Logo, filing number and other basic information, you can also find the 'Custom settings parameters' area.This area allows you to add custom information that is applicable to the entire site.
  2. Contact Information Settings (Contact Settings):Similarly, under the "Background Settings" menu, select "Contact Information Settings".In addition to contact information, phone, email, and other conventional fields, there are also "custom settings parameters" here, which are specifically used to add additional information related to the website's contact information, such as WhatsApp account, Facebook homepage link, etc.

When adding custom parameters at these two places, you need to fill in three key items: 'Parameter name', 'Parameter value', and 'Notes'. Among them,Parameter NameIt is of great importance, it will be the unique identifier for calling this custom parameter in your front-end template.Please note that the system will automatically convert the parameter name you enter to camel case (i.e., the first letter of each word is capitalized, with no spaces in between), and you need to use this converted camel case parameter name when calling it in the template.The 'parameter value' is the specific content you want to display on the website front-end, and the 'note' is for your convenience to remember and manage the purpose of the parameter.

Correctly call the custom parameter in the front-end template

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

  1. Call the custom parameter in the global function setting:You need to use the custom parameters added in the "Global Function Setting"{% system %}Call a label. For example, if you set a parameter namedHelpUrl(parameter name isHelpUrl), its value is “https://www.example.com/help", “那么在模板中，您可以通过以下方式显示它：

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

    If you wish to assign the parameter value to a variable before using 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 namedWhatsAppThe parameter, its value is “+1234567890”, when calling in the template, you can write it 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 you enter the parameter name 'help link' in the background, 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 parsed correctly by the browser rather than displayed as text, you need to add to the output variable.|safea filter. 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 names" and keep them concise and meaningful, which is more convenient for memory and template calls. For example,SiteEmailThan网站邮箱more general.
  • Distinguish usage scenarios:The parameters set globally are applicable to the general information of the entire site, while the parameters set for contact information are more focused on various contact methods. Reasonable classification is helpful for later management.
  • Timely testing:After you set or modify custom parameters in the background, be sure to view the display effect on the corresponding page in the front end immediately to ensure that the parameters are called correctly.
  • Use the remark field:The "Note" field on the back end does not display on the front end, but it can help you record the purpose, value type, or notes of complex custom parameters, facilitating team collaboration and future maintenance.

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

Frequently Asked Questions (FAQ)

1. Why can't I display the custom parameter I set in the background when calling it in the front-end template?This usually has several reasons. First, please check the tags you are using in the template.{% system %}or{% contact %}Does it match the region set in the background. Secondly, the most important may be the spelling of the parameter name. Make surenameThe value is automatically converted to camel case naming from the background parameter name (for exampleHelpUrlinstead ofhelpurlorhelp_url). In addition, confirm that the parameter has been saved successfully in the background 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 an extra when outputting the variable in the front-end template|safethe filter. For example{{ myImageVar|safe }}This is to inform the template engine that this content is safe HTML, which does not need to be escaped, ensuring that the browser can correctly parse and present it.

3. What types of system parameters can I customize? Is there a limit on the number?The AnQi CMS custom parameter function is very flexible, you can add any text, numbers, links, simple HTML code snippets, and other types of data as needed.For example, you can add the company's mission, the deadline for specific activities, customer service online hours, etc.In theory, there is no strict limit to the number of custom 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.