In website operation, we often need to rely on third-party statistical tools to analyze visitor behavior, or to obtain revenue through advertising platforms.Embed these third-party JavaScript (JS) codes securely and efficiently into the website template is a skill that every website operator needs to master.For those using AnQiCMS, understanding its template mechanism and built-in features can help us complete this task more securely.

AnQiCMS is an enterprise-level content management system developed based on the Go language, which has always paid great attention to performance and security from the beginning of its design.It provides a simple and efficient architecture that supports diversified content display and management.When embedding third-party JS code, we can fully utilize these features to find a balance between convenience and security.

Utilize the built-in AnQiCMS features: the preferred choice for safety and convenience

AnQiCMS provides a very convenient and relatively safe way to embed third-party statistics or advertising JS code, that is, through the "function management" module of the background.

When we need to integrate JS code such as Baidu Statistics, Google Analytics, or some advertising alliance, we usually need to place a piece of code on the website.<head>or<body>Within the tag. AnQiCMS has specially set up an area for '360/Toutiao and other JS automatic submission' under the 'Function Management' and 'Link Push' function.Although the name mentions a specific platform, this input box can actually be used to store any JS code snippet that needs to be globally embedded.

Specific operations:

  1. Log in to the AnQiCMS backend management interface.
  2. Find 'Function Management' in the left navigation bar.
  3. Click to enter the 'Link Push' page.
  4. There will be a text input box at the bottom labeled "360/Toutiao and other JS automatic submission". Enter the complete JS code (including<script>and</script>Paste the label into this input box.
  5. Save the settings.

Why is this method recommended?

Firstly, this method greatly enhancesSecurity. You do not need to directly touch the website template files, avoiding the risk of code errors or website crashes due to incorrect operations. Secondly, management onConvenienceIt is also self-evident that all JS code that needs to be globally embedded is concentrated in one place, making it convenient for unified management, updates, or deletion.

AnQiCMS processes this code and renders it on the front-end page through a name{{- pluginJsCode|safe }}The template tag, which injects the JS code you configure in the background securely into the page.This tag is usually placed in the public header or footer files of the website template, ensuring that the code loads normally on each page.Most official or officially developed AnQiCMS themes will default to include this tag, you do not need to perform any additional operations.

Directly edit the template file: Advanced customizable options

Even though built-in features are convenient, sometimes we may need to control the loading position, scope, or dynamically load scripts based on specific page logic more finely.In this case, directly editing the AnQiCMS template files becomes necessary.

The AnQiCMS template system uses a syntax similar to the Django template engine, using.htmlas the template file extension, and supportsincludeandextendsTags such as this provide us with modular development capabilities.

Common embedding locations and strategies:

  1. Global header JS (usually in)<head>within the tag):

    • Code that should be loaded early to ensure data accuracy (such as Google Analytics, Baidu Statistics).
    • Under the template root directory.bash.html(A public code file, usually containing headers, footers, and other inherited parts of all pages) of<head>Find the appropriate position to paste the code in the tag.
    • Or, to maintainbash.htmlKeep it tidy, you can create a separate JS snippet file, for examplepartial/scripts_head.htmlThen put the statistics code in it, and thenbash.htmlpass through{% include "partial/scripts_head.html" %}to refer to.
    • Example: 
      
{# template/你的模板/bash.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    {# 其他头部内容... #}
    {% include "partial/scripts_head.html" %} {# 引用自定义头部JS片段 #}
</head>
<body>
    {# 网站主体内容 #}
</body>
</html>

      
{# template/你的模板/partial/scripts_head.html #}
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_GA_ID');
</script>
{# 其他需要在头部加载的JS代码 #}

  2. Global bottom JS (usually before the</body>tag):

    • Code that does not affect page rendering, ads that can be loaded later, customer service chat plugins, or some unimportant statistical scripts.
    • Similarly, inbash.htmlthe file</body>Before the end tag, or throughincludeReference apartial/scripts_footer.htmlfile.
    • This method helps to improve the first screen loading speed of the page and enhance the user experience.

  3. Specific page JS:

    • If you need to load dedicated JS code on a specific page (such as a product details page, contact us page), you can edit the corresponding template file.
    • For example, the product details page usually corresponds to{模型table}/detail.htmlCorresponds to single page detail pagepage/detail.htmlYou can add code in these files.<head>or</body>Add code in the tag.
    • AnQiCMS's template inheritance mechanism allows you to overwrite the parent template in the child template.blockIfbash.htmlDefined a{% block custom_scripts %}{% endblock %}you can add in thedetail.htmlRewrite this block to insert a specific script.

Important hints in the operation:

  • Backup first:Before modifying any template file, you must backup the related files.You can edit the template online through the "Template Design" feature of the AnQiCMS backend, or you can directly modify it by connecting to the server via FTP/SFTP.
  • Version control: If you have a lot of customization for website templates, it is recommended to use Git and other tools for version control to trace and manage changes.
  • Note update:When updating the AnQiCMS system or template, the template files directly modified may be overwritten. Be sure to make a backup before updating and check and merge your changes after updating.
  • Performance consideration: Use as much as possibleasyncordeferProperties to load JS scripts, avoid blocking page rendering.
    
<script async src="your-script.js"></script>
<script defer src="your-other-script.js"></script>
  • Security precautions:Always obtain third-party JS code from a trusted official channel.Be vigilant of malicious scripts, which may steal user data, alter page content, or even carry out XSS attacks.AnQiCMS's own security mechanism can resist some attacks, but when embedding third-party code, you need to be responsible for the security of these codes.
  • Debugging and testing:After embedding the code, make sure to test the website's functionality on different browsers and devices, check the browser console for any JS errors.Utilize tools like Chrome DevTools to check page load performance, ensuring that third-party scripts do not slow down the website speed excessively.

Summary

Whether it is to choose the built-in functions provided by AnQiCMS or directly edit the template files, embedding third-party JS code safely and efficiently requires meticulous planning and rigorous operation. The built-in functions provide convenience and security, suitable for most general scenarios; while directly editing the template gives you the greatest flexibility and control, but also brings higher maintenance costs