In website operation, we often need to rely on third-party statistical tools to analyze visitor behavior, or through advertising platforms to generate revenue.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 friends 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 attached great importance to performance and security from the very beginning of its design.It provides a concise and efficient architecture that supports diverse content display and management.When embedding third-party JS code, we can fully utilize these features to find a balance between convenience and security.

Utilizing AnQiCMS built-in features: The preferred choice for safety and convenience

AnQiCMS provides a very convenient and relatively secure way to embed third-party statistics or advertising JS code, which is through the "Function Management" module in the background.

When we need to integrate JavaScript codes such as Baidu Statistics, Google Analytics, or some advertising alliances, there is usually a piece of code that requires us to place on the website.<head>or<body>Tag inside.AnQiCMS has a special area named "360/Top News etc. JS Auto Submission" under the "Function Management" section, for the "Link Push" feature.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 of the page with the text "360/Toutiao and other JS auto-submit". Paste the complete JS code (including<script>and</script>Label) paste it into this input box.
  5. Save settings.

Why is this method recommended?

Firstly, this method greatly enhancessafetyYou do not need to directly touch the website template files, which avoids the risk of code errors or website crashes due to misoperations. Secondly, the management side.convenienceIt is also evident that all the JavaScript code that needs to be globally embedded is concentrated in one place, which facilitates unified management, updates, or deletion.

AnQiCMS handles these codes during front-end page rendering, through a named{{- pluginJsCode|safe }}The template tag, which safely injects the JS code you configured in the backend into the page.This tag is usually placed in the public header or footer files of the website template to ensure that the code loads normally on each page.Most official or officially developed AnQiCMS themes will default include this tag, you do not need to perform any additional operations.

Directly edit template files: Advanced and customizable options

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

AnQiCMS's template system adopts syntax similar to Django template engine, using.htmlas the template file extension, and supportsincludeandextendsModule tags, which provide us with modular development capabilities.

Common embedding locations and strategies:

  1. Global header JS (usually in)<head>Tag inside):

    • Applicable to statistical codes that need to be loaded early to ensure data accuracy (such as Google Analytics, Baidu Statistics).
    • Under the root directory of the template.bash.html(Public code file, usually containing header, footer, and other inherited parts of the page) of<head>Find a suitable position within the tag and paste the code.
    • To maintainbash.htmltidy, you can create a standalone JS snippet file likepartial/scripts_head.htmlput the tracking code inside it, and thenbash.htmlreference it in{% include "partial/scripts_head.html" %}to use.
    • 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 at the end of</body>Label before:)

    • Applicable to advertisement codes, customer service chat plugins, or certain unimportant statistical scripts that do not affect page rendering and can be loaded later.
    • Similarly inbash.htmlthe file</body>Before the end tag, or throughincludeReference onepartial/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 detail page, contact us page), you can edit the corresponding template file.
    • For example, a product detail page usually corresponds to{模型table}/detail.html，single page detail page correspondingpage/detail.html. You can add code in these files.<head>or</body>tag.
    • The template inheritance mechanism of AnQiCMS allows you to overwrite the parent template in the child template.block.bash.htmlDefined a{% block custom_scripts %}{% endblock %}You can find it indetail.htmland rewrite this block to insert a specific script.

Important tips in operation:

  • Backup first:Before modifying any template file, be sure to back up the relevant files.You can edit templates online through the "Template Design" feature in AnQiCMS backend, or directly modify them 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 tools like Git for version control to facilitate rollback and management of changes.
  • Note: Update:When updating AnQiCMS system or template, the template files directly modified may be overwritten. Be sure to make a backup before the update and re-check and merge your changes after the update.
  • Performance considerations:Try to useasyncordeferproperties to load JavaScript scripts, to avoid blocking the 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 reliable official channels.Be vigilant against malicious scripts, which may steal user data, tamper with page content, or even perform 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 to ensure it works normally, and check the browser console for any JS errors.Use Chrome DevTools and other tools to check the page loading performance to ensure that third-party scripts do not slow down the website speed too much.

Summary

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