When introducing external CDN resources in a template, which template file is recommended to add the relevant code to?

As an experienced website operations expert, I fully understand the importance of managing external resources in a CMS system.Reasonably introducing external CDN resources can not only significantly improve the loading speed and user experience of the website, but also effectively alleviate the server bandwidth pressure.In an efficient content management system like AnQiCMS (安企CMS), following its template design specifications, choosing the correct placement will make your work twice as efficient.

Understanding AnQiCMS's template structure and philosophy

Firstly, we need to understand how AnQiCMS template files are organized.According to the design philosophy of AnQiCMS, it is committed to providing an efficient, customizable, and extensible solution.Its template system is similar to the Django template engine, supportingextends(inheritance) andincludeWith functions like (referencing), this provides us with great flexibility in managing template code.

We can see from the document that the template root directory of AnQiCMS is located/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/Table of contents. 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 appears in examples)base.htmlA file like this is defined as 'public code', used to store the parts that each page inherits, such as header and footer.This structure is the key to understanding the introduction position of external CDN resources.

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

So, the practice of introducing external CDN resources into the AnQiCMS template is to place it inbase.htmlthe file.

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

Why choosebase.html?

1. Global consistency: 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. Place them intobase.htmlThese resources can ensure that they are correctly and consistently introduced on all pages, avoiding any omissions.
2. Maintain convenience.If the CDN link changes, or if you need to add or delete a global CDN resource, you just need to modifybase.htmlA file, without the need to repeat operations in each page template. This greatly reduces maintenance costs and the probability of errors.
3. Avoid repeated loadingIf the same CDN resource is introduced locally on multiple pages, although the browser will have a caching mechanism, there is still a risk of repeated requests when accessing different pages for the first time, which may increase the page load burden. Inbase.htmlLoaded once, ensuring the uniqueness of resources.
4. Follows **practices**: This conforms to the general **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 use Markdown correctly on web pages and display mathematical formulas and flowcharts, the document clearly points out 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 clear example provides direct guidance for our conclusion.

Why not recommend other template files?

• Specific page template (such asindex.html,detail.html,list.htmletc.)These files usually only handle the content display of specific pages.If global resources are introduced here, they will not be loaded when accessing other pages, resulting in missing features or style disarray.If introducing repeatedly at multiple places to cover all pages, it will cause code redundancy and a maintenance nightmare.
• Code snippet catalogpartial/: Althoughpartial/Files in the directory can be accessed through{% include "partial/header.html" %}In 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 can achieve multiple references, is not as good as doing it directly inbase.htmlThis 'root template' is declared clearly and systematically. Moreover, ifpartial/The file itself is not directly or indirectly included in all pages, and it may still be prone to missing resources.
• /public/static/Table of contentsThis directory is the storage of AnQiCMSLocal static files(the place where you develop your own CSS, JS, images, etc.)Directly place the CDN link code snippet in this directory, which does not comply with its semantics as a static resource host 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 in priority<head>Within the tag.This helps the browser load styles early, avoiding page flicker (FOUC, Flash of Unstyled Content), and improving user perception performance.
2. JavaScript resources should be placed at<body>the bottom of the tag: Unless a JS must be executed before the DOM is built, it is recommended to place it at</body>Before the closing tag. This can prevent JS from blocking the page rendering, allowing users to see the page content faster.
3. UseasyncordeferAttribute optimization for JS loading: Add for non-critical or JavaScript files that do not depend on the DOM structureasync(Loaded and executed asynchronously, without blocking parsing) ordefer(Load and execute deferred, in order after DOM parsing is complete) property, which can further improve page loading performance.
4. NotecrossoriginandintegritypropertyIf CDN is provided, be sure to use these two properties.integrityProvide sub-resource integrity (SRI) verification to ensure that resources obtained from CDN have not been tampered with, enhancing security;crossoriginUsed to handle cross-domain resource requests.

In summary, the code of external CDN resources is unified in the AnQiCMS template'sbase.htmlfile, which is a strategy that takes into account efficiency, maintainability, and performance.

Frequently Asked Questions (FAQ)

1. Does introducing external CDN resources affect the SEO performance of a website?Using CDN reasonably is usually beneficial for SEO.CDN can improve website loading speed, and loading speed is an important factor in search engine ranking.At the same time, ensure that all CDN resources introduced can be loaded normally, without dead links, and useintegrityProperties to ensure resource security, which also helps improve user experience and website trust.AnQiCMS itself is SEO-friendly, its static page generation, 301 redirects, and rich SEO tools are all helping you optimize your website, and CDN is the cherry on top.

2. If a CDN resource is only needed on a few specific pages of a 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 after introduction is negligible, then for the sake of simplifying management, it can be considered to be placed inbase.html. But if the resource is large or only used on a few pages, place it inbase.htmlThis will cause unnecessary loading and affect the performance of all pages. In this case, a better approach is to:

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