ThinkPHP 5.0 怎么在模板中引入 CSS 和 JS 文件?教程

千萱吖_3620

千萱吖_3620

2026-09-20

236人浏览

原创

最稳方式是用asset()函数生成资源url,它自动适配public目录、域名、子目录及https/cdn;文件须放public/static/下,如{:asset('static/css/app.css')},禁用__public__和标签。

thinkphp 5.0 怎么在模板中引入 css 和 js 文件?教程

直接用 asset() 函数最稳

ThinkPHP 5.0 官方推荐且最不易出错的方式,是用内置的 asset() 辅助函数生成资源 URL。它会自动拼接 public 目录、域名、子目录(如部署在子路径下),还能自动处理 HTTPS 和 CDN 场景。

前提是你的 CSS/JS 文件确实放在 public/static/css/public/static/js/ 下(这是 TP5 默认约定):

  • public/static/css/app.css → 写成 {:asset('static/css/app.css')}
  • public/static/js/utils.js → 写成 {:asset('static/js/utils.js')}

注意:asset() 不接受以 / 开头的绝对路径(比如 /static/css/app.css),否则会跳过 base URL 拼接,导致路径错乱;也不支持跨域或协议相对路径写法(如 //cdn.example.com/app.js)。

__PUBLIC__ 常量容易路径错,慎用

很多老教程教你在模板里写 <link href="__PUBLIC__/static/css/app.css">,但这个常量在 TP5.0 中默认未定义,必须手动配置 view_replace_str 才能生效。一旦配错层级(比如多跳一级或少跳一级),浏览器控制台就会报 404,而且错误路径很难一眼看出问题。

常见错误现象:

  • 页面空白或样式丢失,Network 面板显示 GET /static/css/app.css 404
  • 实际文件在 public/static/css/,但请求发到了 /public/static/css//admin/static/css/
  • 本地开发正常,上线后路径全崩——因为 __PUBLIC__ 的值依赖于服务器 DocumentRoot 和重写规则

如果你非要用,必须在 config.php 里明确补全:

return [
    'view_replace_str' => [
        '__PUBLIC__' => '/static',
    ],
];

这里 /static 是指从域名根开始算的路径,对应物理位置 public/static/

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

<load></load> 标签在 TP5.0 中已废弃

TP5.0 的模板引擎(ThinkTemplate)不支持 <load href="xxx"></load> 这类 ThinkPHP 3.x / 4.x 的 XML 风格标签。如果模板里写了这个,解析时会原样输出为 HTML 注释或直接报错,浏览器根本不会加载资源。

你可能会看到这些现象:

  • 源码里出现未闭合的 <load> 标签,被浏览器当无效 HTML 忽略</load>
  • 模板编译失败,日志报 Parse error: syntax error, unexpected 'load'
  • 页面无报错但 JS/CSS 没生效——其实压根没被插入到 HTML 中

替代方案只有两种:用 asset() 函数,或者标准 HTML 标签 + __ROOT__(需确保已配置)。

JS 放哪儿?别再塞 里了

虽然语法上允许把 <script src="%7B:asset('static/js/main.js')%7D"></script> 放在 ,但 TP5.0 模板通常用于渲染完整页面,而多数 JS 依赖 DOM 就绪。硬塞在 head 里容易触发 Cannot read property 'xxx' of null

更稳妥的做法:

  • 通用 JS(如 jQuery、Vue)放 ,加 defer 属性:<script defer src="%7B:asset('static/js/jquery.min.js')%7D"></script>
  • 页面专属 JS 放在 前,确保 DOM 已加载完毕
  • 避免在模板中写内联 <script>console.log(...)</script>,调试完就删——TP5 编译缓存可能让旧 JS 残留

另外,TP5.0 默认不开启静态资源版本号,上线后记得手动加查询参数防缓存,比如 {:asset('static/js/main.js')}?v=1.0.2,否则用户可能一直跑旧版 JS。

php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

php css thinkphp js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.15

3716

6

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.27

837

5

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.28

1678

6

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

2023.08.01

2986

7

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

2023.08.10

5785

11

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

2023.08.10

4931

7

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

2023.08.21

1737

9

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

2023.08.22

2351

5

css禁止点击事件
css禁止点击事件

实现css禁止点击事件的方法有使用CSS的pointer-events属性和使用JavaScript禁用点击事件。本专题为大家提供点击事件相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

1993

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习