首页 Typo3正文

TYPO3 CMS分析HTML模板

kumb Typo3 2020-07-17 12:15:27 240 0

6.3.3 分析HTML模板

分析示例网站

(1)分析布局。示例网站的布局是上中下结构,如图6-41所示。

img

图6-41 示例网站布局

(2)分析index.html文件。打开“/Resources/Private/index.html”目录下的“index.html”文件,其程序组成如下:

img
img
img
img

重组index.html文件

(1)创建目录。在“/ext_mydemo_one/Resources/Private/”目录下,创建“Layouts”“Partials”和“Templates”三个目录。

(2)创建和编辑DefaultLayout.html文件。在“Layouts”目录下新建文件“DefaultLayout.html”,将以下index.html文件内的IE8兼容标签部分复制到新建的文件内:

img
img

并增加图6-42所示的三个标签。

img

图6-42 新建的DefaultLayout.html文件

(3)创建和编辑DefaultTemplate.html文件。在“/Resources/Private/Templates/”目录下,新建DefaultTemplate.html文件,并将以下index.html文件内的main-container标签部分复制到新建文件内:

img
img

并添加以下标签:

img

新建的DefaultTemplate.html文件如图6-43所示。

(4)创建和编辑Header.html文件。在“/Resources/Private/Partials/”目录下新建Header.html文件,并将以下index.html文件内的header-container标签部分复制到新建文件内:

img
img

图6-43 新建的DefaultTemplate.html文件

新建的Header.html文件如图6-44所示。

img

图6-44 新建的Header.html文件

(5)创建Footer.html文件。在“/Resources/Private/Partials/”目录下新建Footer.html文件,选择“/Resources/Private/index.html”文件内的footer-container标签部分:

img

将它复制到新建的Footer.html文件内,如图6-45所示。

img

图6-45 新建的Footer.html文件


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

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

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

发表评论

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