模板与资源

模板通常需要引用资源，如 js、css、img 等。

资源存放位置

资源存放在模板同级的 _files 目录下。如：

• templates/1/default

  • _files

    • css

      • main.css

    • img

      • logo.png

    • js

      • main.js

  • index.html

  • channel.html

  • article.htl

资源引用方式

在模板中，需要使用变量 ${files} 获取资源地址前缀。如：

• <link rel="stylesheet" href="${files}/css/main.css">

• <script src="${files}/js/main.js"></script>

• <img src="${files}/js/main.js">

${files} 变量会解析成模板资源的路径：/templates/1/default/_files，最终的地址如下：

• <link rel="stylesheet" href="/templates/1/default/_files/css/main.css">

• <script src="/templates/1/default/_files/js/main.js"></script>

• <img src="/templates/1/default/_files/js/main.js">

常见错误

一个非常常见的错误就是，使用相对路径获取资源。如：

• <link rel="stylesheet" href="_files/css/main.css">

• <script src="_files/js/main.js"></script>

• <img src="_files/img/logo.png">

表面上看，好像没有什么问题。但模板的存放地址和访问地址是不同的，相对路径是访问地址的相对路径，而非存放地址的相对路径。

以栏目页模板为例：

• 模板存放地址：templates/1/default/channel.html

• 模板访问地址：https://www.example.com/channel/news

• 资源引用地址：_files/css/main.css

• 资源完整地址：https://www.example.com/channel/news/_files/css/main.css

这个地址显然无法访问到想要的资源。

• 资源存放地址：templates/1/default/_files/css/main.css

如果希望引用任意地方的资源，则应该使用完整路径。如：

<script src="/myres/js/my.js"></script>