When operating a website, we often encounter such needs: we need to display some flexible and variable site information on the front-end page, such as the year of establishment of the company, customer service hotline, promotional language for specific pages, or a short announcement.This information may need to be updated frequently, if you go to modify the template file each time, it is inefficient and prone to errors.Fortunately, AnQi CMS provides us with a very convenient way to manage and display custom site parameters on the back end, making content operation more efficient and flexible.

Define your custom site parameters in the background

To display custom parameters on the front-end page, we first need to define them in the Anq CMS backend.

Usually, you can find inBackend settings.Global SettingsOption.After entering the global settings page, you will see some default settings such as website names, Logos, etc.Below, there is a "Custom Setting Parameters" area.This is where we create custom parameters.

Click "Add Custom Parameter" and you will see three input boxes:

  • Parameter NameThis is the "name" you will use when calling this parameter in the front-end template. Anqi CMS will automatically convert it to camel case (for example, if you enter公司成立年份, it is recommended to use when calling in the templateCompanyFoundYear). For easy memory and use, it is recommended to enter meaningful English names, such asCompanySlogan(Company slogan) orCustomerServiceHotline(Customer service hotline).
  • Parameter valueThis is the content you want to display on the front-end page. You can enter any text, numbers, or even HTML code.
  • NoteThis field is purely for your own management and understanding of the parameter's purpose, it will not be displayed on the front-end page.

For example, suppose you want to display a company slogan at the bottom of your website: "AnQi CMS, making your website safer and more efficient!" You can set it up like this:

  • Parameter Name:CompanySlogan
  • Parameter value:安企CMS，让网站更安全、更高效！
  • Note:网站底部宣传语

After the settings are completed, remember to click Save.

It is worth mentioning that in addition to the global settings,Contact information settingsIt also provides similar custom parameter functions. If you need to add specific contact information such as WhatsApp numbers, Skype accounts, and so on, but do not want to change the template structure, you can define it in the same way there, just that the front-end call will use{% contact %}.

Call and display the parameter in the front-end template

After defining the parameters in the background, the next step is how to call and display them in the front-end template.The Anqi CMS template system is very flexible, using syntax similar to the Django template engine, making it easy for you to get started.

For the oneGlobal SettingsWe define the custom parameters, mainly used in{% system %}Tag. Its basic usage is as follows:

{% system 变量名称 with name="后台定义的参数名" %}

Or, if you do not want to define an additional variable for the parameter value, you can output directly:

{% system with name="后台定义的参数名" %}

Let's use the one defined aboveCompanySloganas an example. If you want to use a template (such as the footerpartial/footer.htmlDisplay this slogan as follows, you can write the code like this:

First, define a template variable for this parameter value, for example:slogan:

{% set slogan = '' %} {# 提前声明变量，这是一个好习惯 #}
{% system slogan with name="CompanySlogan" %}
<p>{{ slogan }}</p>

This code first declares a variable named:sloganand then uses this variable,{% system %}Tag will backgroundCompanySloganAssign the value of the parametersloganVariable, finally inpDisplay in the tag{{ slogan }}.

If you backgroundCompanySloganThe parameter value is安企CMS，让网站更安全、更高效！Then the page will display:

<p>安企CMS，让网站更安全、更高效！</p>

Processing a parameter value containing HTML code

Sometimes, the parameter value you customize may not just be plain text, it may also contain HTML code, such as content with links or styles. For example, you are inCompanySloganThe input for the "parameter value" is:

<b>安企CMS</b>，让网站更<i>安全</i>、更高效！<a href="/about">了解更多</a>

If used directly{{ slogan }}For security reasons, the template engine of Anq CMS automatically escapes HTML tags, causing the original HTML code to be displayed on the page instead of the parsed effect. To display correctly, you need to use|safeFilter:

{% set slogan = '' %}
{% system slogan with name="CompanySlogan" %}
<p>{{ slogan|safe }}</p>

Add|safeAfter the filter, the template engine will know that this content is safe and will parse and display it as HTML code.

Custom parameters for calling contact information

If you are inContact information settingsParameters defined in it, such as adding aWhatsAppfield, then in the front-end template, you need to use{% contact %}tag to call:

{% set whatsappNumber = '' %}
{% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
  <p>WhatsApp: {{ whatsappNumber }}</p>
{% endif %}

Some practical tips and注意事项

  • Make the code cleanerYou can use{% set %}tags to define temporary variables, and{% system %}or{% contact %}Label the values first, assign them to these variables, and then display them. This makes your template code clearer, especially when you need to use the same parameter multiple times.

  • Set default valueSometimes, you may not be sure whether a custom parameter has been set to a value. To avoid blank spaces on the page, you can use|defaultSet a default display content for the filter:

    {% set slogan = '' %}
{% system slogan with name="CompanySlogan" %}
<p>{{ slogan|default:"我们致力于提供优质服务" }}</p>

    IfCompanySloganNot set in the background, the page will display "We are committed to providing high-quality service."

  • Multi-site management: If you use the multi-site feature of Anqicms and want to call the custom parameters of a specific site, you can do so in{% system %}and{% contact %}the tag withsiteIdthe parameter to specify the site. For example:{% system siteName with name="SiteName" siteId="2" %}This will retrieve the website name of the site with ID 2.

  • Clear cacheAfter custom parameters are modified in the background, the front-end page may not be updated immediately.This is because AnQi CMS has a caching mechanism.You need to find the 'Update Cache' option in the background, click Clean System Cache, and then refresh the front-end page to see the latest content.

By using these features provided by AnQi CMS, you can easily display the customized site parameters on the frontend page, achieving flexible content management and greatly enhancing the operation efficiency of the website.

Frequently Asked Questions (FAQ)

1. Why did I set custom parameters in the background, but they didn't show up on the front-end page?

It is likely a caching issue.After modifying the custom parameters on the AnQi CMS backend, you need to go to the "Update Cache" feature and click to clear the system cache.After the cleanup is complete, refresh your front-end page, and you should see the updated content usually.{% system %}or{% contact %}label'snameIs the attribute exactly matched with the 'parameter name' set in the background (including case)?

2. I have customized parameter values that contain HTML code, such as a<b>tag, why does it display in the original on the page<b>instead of the bold text?

This is an AnQi CMS default behavior for security reasons, the template engine will automatically escape HTML tags to prevent potential XSS attacks. If you are sure that the HTML content in the custom parameters is safe and you want it to be rendered normally, please add it when outputting template variables|safeFilter, for example{{ yourParam|safe }}.

3.{% system %}/{% contact %}and{% diy %}What are the differences between the tags? Which one should I use to display custom parameters?

These tags are all used to display custom content, but they have different application scenarios:

  • {% system %}It is mainly used to obtain the site-level general parameters defined in "Background Settings" -> "Global Settings", such as website name, copyright information, and customized global slogans.
  • {% contact %}Used to retrieve the contact information defined in the "Background Settings" -> "Contact Information Settings", including the default contact method and the custom contact method fields (such as WhatsApp).
  • {% diy %}Used to retrieve more scattered, non-site level or non-contact related custom content defined in the "Background Settings" custom content area. For the topic of "How to display the background customized site parameters on the front-end page", it is usually preferred to use{% system %}.