ThinkPHP 模板引入 CSS/JS 完整方法指南

ThinkPHP 模板提供多種引入靜態資源的方式，從原生 HTML 標籤到內建標籤庫，本文完整整理各種方法語法與適用場景。

方法一：原生 HTML（最通用）

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/style.css" />
<script src="__PUBLIC__/Js/main.js"></script>

__PUBLIC__ 會自動編譯為網站公開目錄路徑。

方法二：import 標籤（ThinkPHP 專用）

<!-- 預設從 Public 目錄載入，type 可省略（預設 js） -->
<import type="js" file="Js.common" />        <!-- Public/Js/common.js -->
<import type="css" file="Css.layout" />      <!-- Public/Css/layout.css -->

<!-- 指定自訂基礎路徑 -->
<import type="css" file="Css.theme" basepath="./Other" /> <!-- Other/Css/theme.css -->

方法三：load 標籤（自動偵測類型）

<load href="__PUBLIC__/Css/style.css" />
<load href="__PUBLIC__/Js/main.js" />

根據副檔名自動判斷輸出 <link> 或 <script>，最省事。

路徑常數對照表

最佳實踐建議

• 專案統一使用 load 標籤，減少手寫標籤錯誤
• CSS 放在 <head>，JS 放在 </body> 前
• 生產環境啟用模板快取，避免重複編譯
• 使用版本號或雜湊值查詢字串（?v=20240101）解決瀏覽器快取問題

常見問題

Q: import 標籤不生效？

A: 確認模板檔案編碼為 UTF-8、標籤庫已載入、檔案路徑正確（區分大小寫）。

Q: 如何引入 CDN 資源？

A: 直接使用完整 URL，或定義常數 CDN_URL 在模板中使用。