As an experienced website operations expert, I fully understand the importance of managing external resources in a CMS system.Introducing external CDN resources reasonably can not only significantly improve the website's loading speed and user experience, but also effectively alleviate the bandwidth pressure on the server.In such an efficient content management system as AnQiCMS, following its template design specifications and choosing the correct introduction position can make your work twice as efficient.

Understanding the template structure and philosophy of AnQiCMS

Firstly, we need to understand how the template files of AnQiCMS are organized.According to the design philosophy of AnQiCMS, it is committed to providing an efficient, customizable, and easy-to-expand solution.extends(Inheritance) andinclude[Function] and so on, which provides us with great flexibility in managing template code.

From the document, we can see that the template root directory of AnQiCMS is located in/templateEach independent template theme will have its own folder in this directory. The styles, JS scripts, images, and other static resources used by the template, if they are local files, are usually stored in/public/static/The catalog. However, when it comes to external CDN resources, the situation is different.

AnQiCMS template design encourages modularity and reuse. For example, the document mentionsbash.html[or commonly seen in examples]base.htmlSuch files, defined as 'public code', are used to store parts that are inherited by each page, such as the header and footer of the website.This structure is the key to understanding the location of external CDN resources.

Core recommendation: inbase.htmlIntroduce external CDN resources in the file

Then, the practice of introducing external CDN resources into the AnQiCMS template is to place it in the **base.htmlfile.

This file is typically the basic skeleton for all pages on your website. When you use inheritance in other page templates (such as the home pageindex.html, article detail page)detail.htmlor list pageslist.htmletc.),{% extends 'base.html' %}base.htmlAll content defined here, including any CDN resources you introduce, will be loaded automatically.

Why choosebase.html?

  1. Global consistency[en] Most external CSS frameworks (such as Bootstrap), JavaScript libraries (such as jQuery), or statistical codes (such as Google Analytics) are global resources for websites and need to be loaded on every page. Put them intobase.htmlEnsure these resources are correctly and consistently introduced on all pages, to avoid omissions.
  2. Maintain convenience.If the CDN link changes, or you need to add or delete a global CDN resource, you just need to modifybase.htmlA file, avoiding the need to repeat operations on each page template. This greatly reduces maintenance costs and the probability of errors.
  3. Avoid repeated loadingIf the same CDN resource is included in multiple page sections, although the browser has a caching mechanism, there is still a risk of duplicate requests when accessing different pages for the first time, which may increase the page loading burden.base.htmlIntroducing all at once ensures the unique loading of resources.
  4. Follows **best practices**: This conforms to the general **best practices** of template inheritance and resource management in modern web development.

The official documentation of AnQiCMS also confirms this. For example, when discussing how to correctly use Markdown in web pages and display mathematical formulas and flowcharts, the document explicitly states that the code for introducing external JS/CSS CDN resources such as MathJax and Mermaid should be added tobase.htmlThe header of the file:

<!-- 在 base.html 文件的头部添加以下内容 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

This explicit example provides direct guidance for our conclusion.

Why not recommend other template files?

  • Specific page template (such asindex.html,detail.html,list.html})These files are usually responsible for displaying the content of specific pages.If global resources are introduced here, they will not be loaded when accessing other pages, leading to missing features or style disarray.If repeated introductions are made in multiple places to cover all pages, it will cause code redundancy and a maintenance nightmare.
  • Code snippet directorypartial/Althoughpartial/Files under the directory can be accessed{% include "partial/header.html" %}etc. are referenced across multiple pages, but they are more commonly used for reusable UI components or small pieces of functional code. Placing global CDN resources here, although it allows for multiple references, is not as direct asbase.htmlThis "root template" declaration is clear and systematic. And, ifpartial/The file itself is not directly or indirectly included in all pages, and it may still occur that resources are missing.
  • /public/static/DirectoryThis directory is for storing AnQiCMS filesLocal static files[where you develop your own CSS, JS, images, etc.]Directly place the CDN link code snippet in this directory, which does not conform to its semantics as a static resource hosting, and cannot be automatically parsed and imported by the template engine.

Implementation details and **practice

Inbase.htmlWhen introducing external CDN resources, we also need to pay attention to some details to ensure **performance and compatibility:**

  1. CSS resources should be placed preferentially in<head>within the tagThis helps the browser load styles early, avoiding page flickering (FOUC, Flash of Unstyled Content), and improving user perceived performance.
  2. JavaScript resources should be placed at the top.<body>the bottom of the tag.: Unless some JS must be executed before the DOM is built, it is recommended to place it in.</body>Before the end tag. This can prevent JS from blocking page rendering, allowing users to see the page content faster.
  3. UseasyncordeferAttribute optimization for JS loadingFor non-critical or DOM-independent JS files, addasync(loaded and executed asynchronously, without blocking parsing) ordefer属性 that loads and executes delayed, and runs in order after the DOM parsing is completed, can further improve the page loading performance.
  4. NotecrossoriginandintegrityPropertyIf CDN provides, be sure to use these two properties.integrityProvide Subresource Integrity (SRI) verification to ensure that resources obtained from CDN have not been tampered with, enhancing security;crossoriginUsed for handling cross-domain resource requests.

In summary, placing the code of external CDN resources uniformly in the AnQiCMS template is a strategy that takes into account efficiency, maintainability, and performance.base.htmlThe file is a strategy that takes into account efficiency, maintainability, and performance.

Common Questions (FAQ)

1. Will the external CDN resources introduced affect the SEO performance of the website?Using CDN is generally beneficial for SEO.CDN can improve website loading speed, and loading speed is an important factor in search engine rankings.integrityThis ensures resource security and also helps improve user experience and website trust.AnQiCMS itself is SEO-friendly, with features like pseudo-static, 301 redirection, and rich SEO tools all helping to optimize your website, while CDN is the cherry on top.

2. If a CDN resource is only needed on a very few specific pages of the website, it should also be placedbase.html?This needs to be weighed. If the resource is very small and the impact on the performance of other pages is negligible after its introduction, then for the sake of simplifying management, it can be considered to be placed inbase.htmlIf the resource is large or used only on a few pages, placing it therebase.htmlcan lead to unnecessary loading, affecting the performance of all pages. In this case, a better approach is:

  • Inbase.htmlReserve a space{% block scripts %}or{% block styles %}Then, in the specific page template that requires this CDN, use{% block scripts %}{{ super() }} <!-- 引入CDN -->{% endblock %}to locally include.
  • If the requirements of a specific page are very complex, consider using AnQi