首页 Typo3正文

TYPO3 CMS导入CSS、JavaScript和JQuery

kumb Typo3 2020-07-17 12:15:29 248 0

6.3.5 导入CSS、JavaScript和JQuery

导入CSS

(1)打开已复制到“/Resources/Private/”目录下的index.html文件,分析其中的CSS部分,如图6-52所示。

img

图6-52 index.html文件中的CSS部分

(2)导入CSS。在“/Configuration/TypoScript/Library/”目录下的2000_page.ts文件内导入CSS标签。导入CSS后的2000_page.ts文件如图6-53所示。

img

图6-53 导入CSS后的2000_page.ts文件

注意:normalize.css和main.css位于“/Resources/Public/Css/”目录下。

(3)登录后台,清理缓存,查看运行结果,如图6-54所示。

img

图6-54 添加CSS样式后的网页

(4)查看页面源代码。右击所浏览的网页,在弹出的快捷菜单中选择“查看页面源代码”(如图6-55所示),即可找到CSS语句,如图6-56所示。

img

图6-55 查看页面源代码

img

图6-56 页面源代码中的CSS语句

导入JavaScript

(1)分析index.html文件中的JavaScript部分。打开复制到“/Resources/Private/”目录下的index.html文件,分析其中的JavaScript标签,如图6-57所示。

img

图6-57 index.html中的JavaScript标签

(2)导入JavaScript。在“/Configuration/TypoScript/Library/”目录下的2000_page.ts文件内写入以下语句:

img

导入JavaScript后的2000_page.ts文件如图6-58所示。

img

图6-58 导入JavaScript后的2000_page.ts文件

(3)清理缓存,浏览,查看页面源代码,如图6-59所示。

img

图6-59 页面源代码中的JavaScript

导入JQuery

(1)查看index.html文件中的JQuery部分。打开复制到“/Resources/Private/”目录下的index.html文件,分析其中的JQuery 标签,如图6-60所示。

img

图6-60 index.html中的JQuery标签

(2)导入JQuery。在“/Configuration/TypoScript/Library/”目录下的2000_page.ts文件内,导入jquery.min.js和jquery-1.11.2.min.js标签。导入JQuery标签后的文件如图6-61所示。

img

图6-61 导入JQuery标签后的文件

(3)存盘,清理缓存,浏览,页面源代码中的JQuery语句如图6-62所示。

img

图6-62 页面源代码中的JQuery语句


我们致力于为三农(农业、农村、农民)提供专业物联网解决方案,同时也提供应用软件、微信小程序、手机App、企业网站的开发和跨境电商建站、网络营销等服务,站长微信号(mywit_net),添加后备注“黎辉物联网”,如有相关需求也可通过电子邮件(12tc@sina.cn)与我们取得联系

本站内容均来自互联网,如有涉及到侵权行为,请你及时与站长联系删除!

本文链接:https://www.kumb.cn/2948.html

发表评论

评论列表(0人评论 , 248人围观)
☹还没有评论,来说两句吧...