如何套用html模板文件,套用DEMO教程

一、套用首页index.html为例

1、创建App文件》IndexApp.php文件

注:因为这是前台页面,所以统一放到H5应用下,即将IndexApp.php文件放置于文件夹:Application\H5\Controller

注:下面这个截图是MyApp.php,只是举例截图而已

f65fc8f3a1a8f8cdbf3a97d9165de619.png

2、创建Act函数方法

如下图示

4e8f6d4b209b0bca77dcc140e8f7d4d9.png

3、复制资源文件:images、js、css

将DEMO中的这些文件夹复制至H5这个文件夹:Public\home

注:仅复制:图片、JS、CSS相应文件夹就行,其它文件无需复制

4、模板代码处理创建模板文件index.html,创建于该文件夹下Application\H5\View\Index

如下图为demo的源代码

9d5dfd3d000699fe6f65ecf9347c4a55.png

4.1、下图中的1:将demo的源代码中的头部单独统一抽出来放在header.html模板中

4.2、下图中的2:将主菜单部分的代码统一抽出来放在menu.html模板中

4.3、下图中的3:图片路径的转换,需要加个前缀(js文件和css文件的引用也是用这个前缀{{$smarty.const.__APP__}})

4.4、下图中的4:a链接菜单需要换成这种动态方式

4.5、下图中的5:将底部代码统一抽出来放在footer.html模板中

520b12609e54b740f34ae88f060c2034.png

5、要及时用浏览器浏览相应http://localhost本地环境页面检查显示是否正常,必须保证与原demo页面显示一致才行

二、下面再介绍一个套DEMO时快速给js/css/img加前缀的方法(注:IDE是Zend Studio,其他IDE的话,不清楚有没相同功能,可以自己试试)

1、右键点前台的View目录,搜索

1d5df66e1ae9a0a2caca494fe6521686.png

2,搜索内容填上

(["|'])(images|js|style|css)\/

并把正则表达式那个选项打勾

f216fcde9ac52fabf48b1c8d1b638be6.png

3、搜索,就可以搜出所有需要替换的文本了,如下图

59f5e7f030b124dcec76fe2813625534.png

4、右键点搜索结果的空白地方,选替换全部

a81ae2848c150aea343600d6f86d5fa6.png

5、替换内容填

\1{{\$smarty.const.__APP__}}\2/

同样把正替表达式那个选项勾上

341644d65c0d12b598db5e0c7462a154.png

6、点OK,就可以自动给所有需要加前缀的地方加是前缀了

补充说明:第5点这个替换内容可以自己根据实际情况修改,比如js/css/img并不是放在 Public/home或Public/wap下的(用dream_shop框架的经常就这样),而是多了一层目录,比如ys项目的js就是放在Public/wap/ys/js,那第5点替换的时候就得写成

\1{{\$smarty.const.__APP__}}ys/\2/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值