How to reference and display external static resources (such as CSS, JS) in the template?
In AnQiCMS templates, referencing and displaying external static resources such as CSS stylesheets and JavaScript scripts is a key step in building a functional and visually appealing website.Understand its working principle and recommended practices, which can make our website development work more efficient and flexible.
Location of static resources
When using AnQiCMS to build a website, style sheets (CSS), JavaScript scripts (JS), and images, among other static files, are an indispensable part of构成网站视觉和交互体验。AnQiCMS has clear conventions for organizing these static resources: all static files should be stored in your AnQiCMS installation directory under/public/static/in the folder.
For example, if your CSS file is namedstyle.css, you would place it in/public/static/css/style.css. Similarly, a JavaScript file likescript.jscould be located in/public/static/js/script.js. This/public/static/The directory, after your website is deployed, will be directly mapped to the root directory of your website through a web server (such as Nginx or Apache), which means they can be accessed directly through the URL.
Refer to local static resources in the template
When you need to incorporate these locally stored static resources into the AnQiCMS template, the system provides a very convenient tag to help us dynamically generate the correct path, that isTemplateUrl. ThisTemplateUrlThe tag will automatically obtain the root path of the template file based on your website configuration, ensuring that your resource links are always correct, regardless of where your website is deployed in any subdirectory or subdomain.
Reference CSS stylesheet:
To reference a CSS file, it is usually in the template's<head>area<link>tags, and combine{% system with name="TemplateUrl" %}Use the tag to construct the path.
Assuming your CSS file is in/public/static/css/main.cssIn the template, you can write it like this:
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/static/css/main.css">
here,{% system with name="TemplateUrl" %}It will be replaced with the URL of the root directory of your template, then added with/static/css/main.csswhich will point to your style file.
Reference JavaScript script:
Similarly, the introduction of JavaScript files is usually in<head>or<body>Used before the end tag<script>.
If your JS file is in/public/static/js/app.jsThe template reference method is as follows:
<script src="{% system with name="TemplateUrl" %}/static/js/app.js"></script>
If you want to build a more complex URL directly in the template code, you can also first assign it toTemplateUrla variable and then use it, for example:
{% system templateUrl with name="TemplateUrl" %}
<link href="{{ templateUrl }}/static/css/style.css" rel="stylesheet">
Reference external CDN static resources
In addition to local resources, we often also use static resources provided by external CDNs (Content Delivery Networks), such as some popular front-end frameworks (such as Bootstrap, jQuery) or specific library files.
Referencing CDN resources is more direct, as they usually provide complete URL addresses. You just need to put these URLs directly into<link>or<script>the tag.
For example, to include a GitHub Markdown stylesheet, you can do it like this:
<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" />
Introduce JavaScript libraries such as MathJax or Mermaid and follow the same pattern:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Some practical tips
- Organize files logically:To keep the project tidy, it is recommended to
/public/static/Create in the directorycss/js/imagesetc. subfolders, and further subdivide according to function or module, for example,css/pages/home.cssorjs/modules/slider.js. - Handle cache issues:After developing or updating static resources, browsers may sometimes display old versions due to caching. In addition to clearing the browser cache, you can also force the browser to reload by adding a version number or timestamp to the resource link.