As an expert well-versed in website operation, I am more than happy to detail how to conveniently and relatively safely call QQ contact numbers and convert them into user-friendly clickable links in AnQiCMS templates.This not only improves user experience but also takes into account information protection.

Call QQ contact number separately and safely in AnQiCMS template and generate click link

In modern website operations, providing convenient contact methods is a key factor in improving user experience and promoting business conversion.QQ as a commonly used instant messaging tool in China, its contact function is widely used on corporate websites.AnQiCMS as an efficient content management system, provides flexible template tags, allowing us to easily integrate such features.However, while ensuring convenience, we also need to consider how to protect these information, preventing them from being easily crawled by malicious bots.

Next, we will discuss step by step how to implement this requirement in AnQiCMS templates.

Step 1: Configure the QQ contact number in AnQiCMS background

Firstly, you need to make sure that the QQ number is correctly configured in the AnQiCMS background.AnQiCMS provides a dedicated "Contact Information Settings" module for unified management of various contact information on the website.

You can find it in the background navigation menu“Backend Settings”then select“Contact Information Settings”.After entering this page, you will see the preset contact information fields, which include the item 'Contact QQ'.Please enter your QQ number accurately here.If the default field is not enough to meet your needs, AnQiCMS also supports custom parameter settings, but for QQ numbers, the default 'QQ' field is usually sufficient.

Important reminder:Ensure that the QQ number you enter is public, usable for contact, and the temporary session feature of QQ has been enabled. Otherwise, the user may not be able to initiate a session normally when clicking.

第二步：在AnQiCMS模板中调用QQ号码

AnQiCMS's template system uses a tag syntax similar to Django, making data calls intuitive and powerful. To call the QQ number configured in the background, we can use the built-incontactLabel.

contactThe label is specifically used to obtain various data from the "Contact Information Settings" on the back end. Its basic usage is tonamespecify the field to be obtained. For the QQ number, the field name isQQ.

For example, you can directly obtain the QQ number in the template like this:

{# 直接调用后台配置的QQ号码 #}
{% contact with name="QQ" %}

Or, it is more recommended to assign it to a variable for more flexible use and processing later:

{# 将QQ号码赋值给一个变量contactQQ #}
{% contact contactQQ with name="QQ" %}{{ contactQQ }}

At this time,{{ contactQQ }}Will output the QQ number you filled in the background.

Step 3: Safety considerations - Avoid exposing the QQ number directly.

Although the above method can successfully obtain and display the QQ number, directly displaying it in plain text in the HTML source code will increase the risk of being harvested by spam robots or data crawlers.These crawlers will scan web page source code, collect contact information to send spam or engage in other nuisance activities.

To provide convenience while adding a layer of protection, we recommend using JavaScript to dynamically generate QQ links, thus avoiding the QQ number from appearing directly in a recognizable format in the HTML source code when the page is loaded.

Fourth step: Generate clickable QQ chat links dynamically with JavaScript

The core idea is: only place a placeholder element in HTML, then use JavaScript to obtain the QQ number and construct a clickable QQ chat link, and finally dynamically insert this link into the placeholder.Even if a simple crawler grabs the HTML source code of the page, it cannot directly obtain the complete QQ number and click the link.

The general format of QQ chat links is usuallytencent://message/?uin=您的QQ号码&site=&menu=yesorqqwpa://im/chat?qq=您的QQ号码. The former is more general.

The following is a template code snippet for implementing this function, you can place it in the AnQiCMS template file,<body>in the appropriate position inside the tag, such as the footer or sidebar:

{# HTML占位符：用于显示QQ联系链接，初始可以是空的或者带有加载提示 #}
<div id="qq-contact-container">
    <span>正在加载QQ联系...</span>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 从AnQiCMS模板标签中获取QQ号码，并赋值给JavaScript变量
        // 这里的 {% contact contactQQ with name="QQ" %}{{ contactQQ }}{% endcontact %} 
        // 确保输出的QQ号码是纯数字，没有额外的HTML标签。
        // 如果您希望更安全，也可以将这个QQ号码在后端进行Base64编码，然后在JS中解码。
        const rawQqNumber = "{% contact contactQQ with name='QQ' %}{{ contactQQ }}{% endcontact %}";
        const qqNumber = rawQqNumber.trim(); // 清除可能存在的空白字符

        const qqContactContainer = document.getElementById('qq-contact-container');

        if (qqNumber) {
            // 2. 构造QQ聊天链接
            const qqLink = `tencent://message/?uin=${qqNumber}&site=&menu=yes`;

            // 3. 创建a标签元素，并设置属性
            const qqAnchor = document.createElement('a');
            qqAnchor.href = qqLink;
            qqAnchor.target = '_blank'; // 新窗口打开
            qqAnchor.rel = 'noopener noreferrer'; // 增强安全性
            qqAnchor.title = '点击通过QQ与我联系';
            qqAnchor.textContent = `QQ:${qqNumber}`; // 显示QQ号码，但实际链接是JS生成的

            // 4. 将生成的链接插入到占位符中
            qqContactContainer.innerHTML = ''; // 清除加载提示
            qqContactContainer.appendChild(qqAnchor);
        } else {
            qqContactContainer.innerHTML = '<span>QQ联系方式暂无</span>';
        }
    });
</script>

Code analysis:

  1. {% contact contactQQ with name='QQ' %}{{ contactQQ }}{% endcontact %}This is an AnQiCMS template tag, used to obtain and directly output the QQ number configured in the background as plain text, embedded in the JavaScript string. Note{% endcontact %}It is necessary, even if it looks empty in the example, but it ensures the correct closure of the tag.
  2. document.addEventListener('DOMContentLoaded', function() { ... });: Ensure the DOM is fully loaded before executing JavaScript to avoid operating on non-existent elements.
  3. rawQqNumber.trim(): English: Trim the obtained QQ number to remove any leading or trailing whitespace characters to ensure the number is pure.
  4. tencent://message/?uin=${qqNumber}&site=&menu=yes: This is the standard URL protocol used to initiate a temporary session in QQ.
  5. document.createElement('a'): Create through JavaScript<a>elements, rather than writing directly in HTML.
  6. target='_blank',rel='noopener noreferrer': These properties are practices in web development._blankOpen the link in a new window,noopener noreferrerIt enhances security, preventing newly opened pages from exploiting.window.openerAccessing your original page is very important for preventing phishing attacks.
  7. qqAnchor.textContent = \QQ:${qqNumber}`;`: Set the display text for the link, informing the user that this is a QQ contact method.
  8. qqContactContainer.innerHTML = ''; qqContactContainer.appendChild(qqAnchor);: Clear the placeholder content, and the dynamically generated<a>Label added to the page.

Through this method, the QQ number is not exposed in the form of a static HTML link, but is dynamically created by the client JavaScript after the page is loaded.This can effectively resist most web crawlers that do not parse JavaScript.

Step 5: Test and Maintenance

Before deploying to the online environment, please make sure to test on different browsers and devices to ensure that the QQ link can be clicked normally and initiate a session with the QQ client.At the same time, it is also a good habit to clear the system cache and browser cache of AnQiCMS to ensure that you see the latest modified effect.

If your website has enabled the multi-site management feature and different sites need to call different QQ numbers, you cancontacttag.siteIdParameters to specify the site ID, for example{% contact contactQQ with name='QQ' siteId='2' %}.

Common Questions (FAQ)

1