In AnQiCMS templates, referencing and displaying external static resources such as CSS stylesheets and JavaScript scripts is a key step to building a functional and visually appealing website.Understand its working principle and recommended practices can make our website development work more efficient and flexible.

Location of static resources

When building a website with AnQiCMS, style sheets (CSS), JavaScript scripts (JS), and images are indispensable parts that constitute the visual and interactive experience of the website. AnQiCMS has clear conventions for the organization of these static resources: all static files should be stored in the AnQiCMS installation directory under/public/static/In the folder.

For example, if your CSS file name isstyle.css, you would place it in/public/static/css/style.css. Similarly, JavaScript files likescript.jsmay be located in/public/static/js/script.js. This/public/static/The catalog will be directly mapped to the root directory of your website after it is deployed, via a web server (such as Nginx or Apache), which means they can be accessed directly through the URL.

In the template, refer to local static resources

When you need to include these locally stored static resources into AnQiCMS templates, the system provides a very convenient tag to help us dynamically generate the correct path, that isTemplateUrl. ThisTemplateUrlThe label will automatically retrieve the root path of the template file based on the configuration of your website, 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, usually in the<head>area.<link>tags, and combine{% system with name="TemplateUrl" %}Use the

tag to construct the path./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 your template root directory, then plus/static/css/main.cssYou can point to your style file.

Reference JavaScript script:

Similarly, introducing JavaScript files usually in<head>or<body>Before the end tag usage<script>Label.

If your JS file is/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 assign it to a variable first and then use it, for example:TemplateUrlAssign it to a 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 CDN (Content Delivery Network), such as some popular front-end frameworks (such as Bootstrap, jQuery) or specific library files.

Reference CDN resources is more direct, because they usually provide complete URL addresses. You just need to put these URLs directly into<link>or<script>the tag.

For example, to introduce 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 MathJax or Mermaid JavaScript libraries also 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 reasonably:To keep the project tidy, it is recommended to/public/static/directory createcss/js/imagessubfolders, and further divide them according to function or module, for examplecss/pages/home.cssorjs/modules/slider.js.
  • Handle cache issues:After developing or updating static resources, browsers may sometimes display outdated versions due to caching. In addition to clearing the browser cache, you can also force browsers to reload by adding a version number or timestamp to the resource link.