Detailed Explanation of the Method of Importing Resource File in ThinkPHP Template Engine

Generally speaking, the traditional way for web pages to import external resource files such as JS and CSS is to use them directly in template files:

<script type='text/javascript' src='/Public/Js/Util/Array.js'>
<link rel="stylesheet" type="text/css" href="/App/Tpl/default/Public/css/style.css" />

ThinkPHP's template engine provides special tags to simplify the above import.

1. import tag

The first is the import tag, which is imported in the namespace mode of import function similar to ThinkPHP, for example:

<import type='js' file="Js.Util.Array" />

The Type attribute defaults to js, so the following effect is the same:

<import file="Js.Util.Array" />

You can also support batch import of multiple files, such as:

<import file="Js.Util.Array,Js.Util.Date" />

To import an external CSS file, you must specify the value of the type attribute, such as:

<import type='css' file="Css.common" />

In the above way, the default starting path of import is the Public directory under the root directory of the website. If you need to specify other directories, you can use the basepath attribute, for example:

<import file="Js.Util.Array" basepath="./Common" />

If the imported file contains a "." sign, you can use:

<import file="Js.Util.Array#min" />

Indicates importing the/Public/Js/Util/Array. min. js resource file.

It also supports version number import of resource files, such as:

<import type='js' file="Js.Util.Array?v=120" />

It can also be supported when importing multiple files

<import type='js' file="Js.Util.Array?125,Js.Util.Date?130" />

The improt tag supports judgment loading, such as first judging whether the name variable is set:

<import type='js' file="Js.Util.Array" value="name" />

Or more complex, you can even use functions:

<import type='js' file="Js.Util.Array" />

0

The compiled template cache is:

<import type='js' file="Js.Util.Array" />

1

2. load tag

The second is the load tag, which imports the public JS or CSS of the current project through URL, for example:

<import type='js' file="Js.Util.Array" />

2

Special template tags can be used in href attributes, such as:

<load href="!-PUBLIC-!/Js/Common.js" />

The Load tag does not need to specify the type attribute, and the system will automatically judge according to the suffix.
Of course, the load tag also supports conditional judgment calls:

<import type='js' file="Js.Util.Array" />

4

The system also provides two tag aliases js and css usage and load1, for example:

<import type='js' file="Js.Util.Array" />

5

The load tag also supports importing multiple resource files at the same time, even different types of resource files:

<import type='js' file="Js.Util.Array" />

6