Unlock the potential of frontend templates: The Art of AnQiCMS Back-end Custom System Parameters in English

In the operation of the website, we often encounter such situations: front-end templates need to display some non-standard, but crucial information for the business, such as a special marketing activity link, contact information other than WeChat and phone, such as WhatsApp, or a specific page bottom disclaimer.If each modification touches the code, it will undoubtedly greatly reduce the operational efficiency.AnQiCMS as an enterprise-level content management system, deeply understands this, and provides us with flexible and powerful custom system parameter functions, allowing us to easily manage these 'special requirements' in the background and seamlessly call them in the front-end template, thus achieving fine-grained operation of content and display.

This article will delve into how to customize system parameters in the AnQiCMS backend, and guide you on how to elegantly call these parameters in the frontend template, ensuring that your website can maintain efficient content updates while satisfying various unique display requirements.

Understanding requirements: Why customize system parameters?

The operation of the website is a dynamic process, and the content display requirements often change.AnQiCMS has built-in rich predefined fields, which are enough to deal with most common content, such as website name, copyright information, contact phone number, etc.But there are always some personalized needs that cannot be met by general fields.

  • Multiple channel contact information:In addition to the default phone, email, and WeChat, you may also need to display WhatsApp, Telegram, or Facebook Messenger links.
  • Temporary marketing event:The homepage or a specific area of the website needs a prominent banner that points to the latest promotion page, and the link needs to be updated frequently.
  • Specific page statement:An industry-specific legal statement or risk warning needs to be displayed on a certain product category page.
  • Integration of third-party services:Embed a dynamic adjustment of a third-party statistics code ID or API Key.

Faced with these scattered but important requirements, modifying the template file each time is not only inefficient but also prone to introducing errors.The custom system parameter feature of AnQiCMS is exactly born to solve these pain points, it liberates these 'variables' from the code, and entrusts them to the operation personnel for centralized management in the background.

AnQiCMS Backend: Entry for parameter customization.

In AnQiCMS backend, the customization of system parameters is mainly concentrated in several sub-menus under the "Backend Settings" area. These two areas are the starting points for parameter expansion:

  1. Global function settings(help-setting-system.mdReference):This area mainly manages the basic information of the website, such as the website name, Logo, filing number, and website address.It is more important that it provides a section for "custom setting parameters", allowing you to add any parameters related to the global configuration of the website that are not in the default list.For example, you can define a "Help Page Link (HelpUrl)" or "Website Theme Color (ThemeColor)" here, etc.

  2. Contact information settings(help-setting-contact.mdReference):This is where all external contact methods are managed, such as contacts, phone numbers, addresses, email addresses, WeChat ID, etc.Similarly, this module also has the 'Custom settings parameters' feature, which is very suitable for adding additional social media links or specific business contact information, such as the WhatsApp account mentioned earlier.

Through these two entries, you can abstract the content that may originally be hard-coded in the template into parameters that can be flexibly configured in the background according to the actual business scenario.

Precise Customization: Creation and Management of Custom Parameters

Let us take the example of adding a custom parameter named "Help Page Link" in the "Global Feature Settings" to demonstrate the creation process.

  1. Navigate to the settings page:Log in to the AnQiCMS backend, click on the "Backend Settings
  2. Add custom parameters:Scroll to the bottom of the page, find the "Custom Setting Parameters" area. Click the "Add Custom Parameter" button.
  3. Enter parameter information:
    • Parameter name:This is the most important field, which will serve as the 'identifier' when you call this parameter in your frontend template. It is recommended to use the English camelCase naming convention for code neatness and readability, such asHelpUrlPlease avoid using Chinese or special symbols, as this may cause template parsing errors.
    • Parameter value:Enter the actual content of the parameter, for examplehttps://en.anqicms.com/helpThis value can be plain text, a URL, or even a short HTML code snippet (if necessary, front-end calls should pay attention to safe escaping).
    • Note:This is an optional but strongly recommended field to be filled in.Here is a clear Chinese description of the parameter's purpose, for example, 'Link to the User Help and Support page', which will greatly help other operation personnel or future you to understand the meaning of this parameter.
  4. Save:The form has been filled in, click the save button. At this time, a new custom parameter has been successfully added and is now effective.

The same steps apply to the custom parameters in the "Contact Information Settings". For example, you can add a "Parameter Name" ofWhatsAppwith a value of+861234567890，Note for “Customer WhatsApp Contact Number” parameter.

Front-end template: How to elegantly call custom parameters?

AnQiCMS's template engine adopts a syntax style similar to Django, which makes it intuitive and efficient to call backend parameters in the frontend. The core lies in using specific tags ({% tag %}) 和 variable ({{ variable }}) to get data. For the custom parameters we just created, we will mainly use{% system %}/{% contact %}and{% diy %}these tags.

  1. Call the custom parameter in the global function settings:{% system %}For custom parameters created in the "Global Function Settings", you can use{% system %}tags to call. For example, to get the one we defined earlier,HelpUrl:

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

    If you wish to store the value obtained into a variable for later processing, you can do it like this:

    {% system helpPageUrl with name="HelpUrl" %}
<a href="{{ helpPageUrl }}" target="_blank">访问我们的帮助页面</a>

    So, even if the links on the help page change in the future, you only need to modify the parameter values in the AnQiCMS backend without touching any code.

  2. Call the custom parameter in the contact information settings:{% contact %}Similar