How to independently configure the message verification code in the AnQiCMS multi-site environment?

Overview of the AnQiCMS multi-site mechanism

To understand how to independently configure the留言验证码, first you need to understand the AnQiCMS multi-site operation mechanism.In AnQiCMS, even if multiple sites are deployed on the same server, they can be managed through a unified entry by reverse proxy and the multi-site management function in the background, but each site is highly independent in terms of logic.They can have their own domain name, their own database (or shared database but data isolation), independent template files, even independent backend management permissions.This 'physical coexistence, logical isolation' feature provides the foundation for our independent configuration of message verification code.

The core idea of independently configuring the message verification code

In the multi-site management context of AnQiCMS, the independent configuration of留言验证码is not dependent on a super switch spanning all sites.In contrast, each site has the right to decide whether to enable this security measure and how to present it on their own frontend page.

  1. Background switch independent control:Each AnQiCMS background of the site provides an independent message verification code enable/disable option.
  2. Flexible integration of front-end templates:The display logic of the captcha and the form submission method need to be realized by modifying the corresponding template file of the site, and different sites can use different templates or make differentiated modifications to the same template.

Next, we will detail the specific configuration process.

Detailed explanation of the configuration process

To independently configure the留言验证码 for a specific site in the AnQiCMS multi-site environment, you need to follow the following steps:

Step one: Enter the target site's backend management interface

First, you need to access the backend of the specific site where you want to configure the message verification code. Each site usually has its independent backend access address,http://your-site-one.com/system/orhttp://your-site-two.com/system/Please use the administrator account of this site to log in.

Step two: Enable the comment captcha feature of the target site.

Login to the target site's backend and navigate to the "Function Management" module.Here, you will find an entry named “Website Message Management” or something similar.Click to enter, and you will usually have a dedicated settings page that allows you to configure options related to leaving messages.Among them, you should see a clear option, such as "Whether to enable the comment verification code function.Please check or select “Yes” to enable this feature, then save your settings.

This step is a crucial link, which activates the captcha generation and verification logic on the backend for the current site.

Step 3: Modify the website template to integrate the captcha

It is not enough to enable the feature only in the background, you also need to integrate the display elements of the captcha and the submission logic into the front-end form of your website's message or comment section.AnQiCMS supports Django template engine syntax, allowing you to flexibly customize the front-end display.

  1. 定位template file:The message or comment form is usually located in a specific file under the template directory of your site, such asguestbook/index.html(used for the message page) or in the comment area template of the article detail page. You candesign-director.mdThe template directory structure introduced in the document is used to locate these files.

  2. EnglishFind the corresponding form and then you need to insert the HTML and JavaScript code related to the captcha at an appropriate position (usually before the submit button).English translation: The AnQiCMS provides convenient template tags and API interfaces.

    <div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                return response.json()
              })
              .then(res => {
                document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id)
                document.getElementById('get-captcha').setAttribute("src", res.data.captcha)
              }).catch(err =>{console.log(err)})
    });
    document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
  </script>
</div>

    If the front-end template of your current site integrates the jQuery library, you can also use a more concise jQuery syntax:

    <div style="display: flex; clear: both">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
  <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
  <script>
    $('#get-captcha').on("click", function (e) {
      $.get('/api/captcha', function(res) {
        $('#captcha_id').attr("value", res.data.captcha_id)
        $('#get-captcha').attr("src", res.data.captcha)
      }, 'json')
    })
    $('#get-captcha').click(); // 页面加载时自动获取一次验证码
  </script>
</div>

    The key to this code is:

    • captcha_id：An hidden field used to store the unique identifier of the captcha for backend verification.
    • captcha：The text box for user input of the captcha.
    • get-captcha：A<img>Label, used to display the captcha image and dynamically load and refresh it with JavaScript.
    • JavaScript code: Responsible for obtaining the initial captcha when the page loads and refreshing the captcha image when the captcha image is clicked. It is used to/api/captchaInterface communicates with AnQiCMS backend.

Step four: Test and verification

After completing the above configuration, please make sure to clear the site cache (if applicable) and test the message or comment feature on the front-end page.You should be able to see the captcha image displayed normally, and when submitting the form, the system will strictly require that the correct captcha be entered./api/captcha) Is the data returned normally.

Application and thinking in practice

Additionally, since the template is an independent asset for each site, even if multiple sites use the same base template, you can customize the captcha for a specific site by copying the template and making fine adjustments.