Detailed explanation of how to import resource files in ThinkPHP template engine_PHP tutorial

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

<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 one is the import tag. The import method adopts a namespace method similar to ThinkPHP’s import function, for example:

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

The Type attribute defaults to js, ​​so the following effects are the same:

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

It can also support batch import of multiple files, for example:

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

The value of the type attribute must be specified when importing external CSS files, for example:

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

The above methodThe default import starting path 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 "." symbol, you can use:

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

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

It also supports importing version numbers of resource files, for example:

<import type='js' file="Js.Util.Array&#63;v=120" />

It can also support when importing multiple files

<import type='js' file="Js.Util.Array&#63;125,Js.Util.Date&#63;130" />

The improt tag supports judging loading . For example, the following first judges whether the name variable is set:

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

Or more complex, can even take a function :

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

The compiled template cache is:

<&#63;php
if(isset($_GET['name'])): 
&#63;>
<script type="text/javascript" src="/Public/Js/Util/Array.js"></script>
<&#63;php
endif;
&#63;>

2.load tag

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

<load href="/Public/Js/Common.js" />
<load href="/Public/Js/Date.js&#63;v=235" />
<load href="/Public/Css/common.css" />

You can use special template tags in the href attribute, for example:

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

Load tag does not need to specify the type attribute, the system will automatically determine based on the suffix.
Of course, the load tag also supports conditional judgment calls:

<load href="/Public/Js/Common.js" value="name" />

The system also provides two tag aliases js and css. The usage is consistent with load, for example:

<js href="/Public/Js/Common.js" />
<css href="/Public/Css/common.css" />

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

<load href="/Public/Js/Common.js,/Public/Css/common.css" />