ecshop定义模板css与JS 路径的分析

2016-09-07 22:02 来源：www.chinab4c.com 作者：ecshop专家

  ecshop中模板中路径的处理给我们模板的制作带来了极大的方便
    ecshop会自动解析模板文件中的图片，css文件，js文件的路径，但并不是所有的图片，css文件，js文件的路径都会替换，
例如在dwt模板文件中有：
<link href="css/index.css" rel="stylesheet" type="text/css">
将会自动替换成
<link href="themes/模板目录名/css/index.css" rel="stylesheet" type="text/css">
例如在dwt模板文件中有：
<link href="css/public.css" rel="stylesheet" type="text/css">
将会被自动替换为
<link href="themes/模板目录名/css/public.css" rel="stylesheet" type="text/css">

能自动替换路径的css文件一定要以路径css开头的css文件

例如在dwt模板文件中有：
<script type="text/javascript" src="js/index.js"></script>
将会被自动替换为
<script type="text/javascript" src="themes/模板目录名/js/index.js"></script>
能自动替换路径的js文件一定要以路径js开头的js文件

例如在dwt模板文件中有：
<img src="images/icon.png">
将会被自动替换为
<img src="themes/模板目录名/images/icon.png">
能自动替换路径的图片文件一定要以路径img开头的图片文件
这种自动解析方便我们可以把这些css,js,img和模板放在一起而不用考虑实际的路径
ecshop对图片，CSS,JavaScript的路径替换原则可以参看include/cls_template.php文件里面的smarty_prefilter_preCompile()的最后几行正则替换:

  1. /* 在头部加入版本信息 */
  2. $source = preg_replace('/<head>/i', "<head>\\r\\n<meta name=\\"Generator\\" content=\\"" . APPNAME .' ' . VERSION . "\\" />", $source);
  3.  
  4. /* 修正css路径 */
  5. $source = preg_replace('/(<link\\shref=["|\\'])(?:\\.\\/|\\.\\.\\/)?(css\\/)?([a-z0-9A-Z_]+\\.css["|\\']\\srel=["|\\']stylesheet["|\\']\\stype=["|\\']text\\/css["|\\'])/i','\\1' . $tmp_dir . '\\2\\3', $source);
  6.  
  7. /* 修正js目录下js的路径 */
  8. $source = preg_replace('/(<script\\s(?:type|language)=["|\\']text\\/javascript["|\\']\\ssrc=["|\\'])(?:\\.\\/|\\.\\.\\/)?(js\\/[a-z0-9A-Z_\\-\\.]+\\.(?:js|vbs)["|\\']><\\/script>)/', '\\1' . $tmp_dir . '\\2', $source);
  9.  
  10. /* 更换编译模板的编码类型 */
  11. $source = preg_replace('/<meta\\shttp-equiv=["|\\']Content-Type["|\\']\\scontent=["|\\']text\\/html;\\scharset=(?:.*?)["|\\'][^>]*?>\\r?\\n?/i', '<meta http-equiv="Content-Type" content="text/html; charset=' . EC_CHARSET . '" />' . "\\n", $source);
  12.  
  13. }
  14.  
  15. /**
  16. * 处理库文件
  17. */
  18. elseif ($file_type == '.lbi')
  19. {
  20. /* 去除meta */
  21. $source = preg_replace('/<meta\\shttp-equiv=["|\\']Content-Type["|\\']\\scontent=["|\\']text\\/html;\\scharset=(?:.*?)["|\\']>\\r?\\n?/i', '', $source);
  22. }
  23.  
  24. /* 替换文件编码头部 */
  25. if (strpos($source, "\\xEF\\xBB\\xBF") !== FALSE)
  26. {
  27. $source = str_replace("\\xEF\\xBB\\xBF", '', $source);
  28. }
  29.  
  30. $pattern = array(
  31. '/<!--[^>|\\n]*?({.+?})[^<|{|\\n]*?-->/', // 替换smarty注释
  32. '/<!--[^<|>|{|\\n]*?-->/', // 替换不换行的html注释
  33. '/(href=["|\\'])\\.\\.\\/(.*?)(["|\\'])/i', // 替换相对链接
  34. '/((?:background|src)\\s*=\\s*["|\\'])(?:\\.\\/|\\.\\.\\/)?(images\\/.*?["|\\'])/is', // 在images前加上 $tmp_dir
  35. '/((?:background|background-image):\\s*?url\\()(?:\\.\\/|\\.\\.\\/)?(images\\/)/is', // 在images前加上 $tmp_dir
  36. '/([\\'|"])\\.\\.\\//is', // 以../开头的路径全部修正为空
  37. );
  38. $replace = array(
  39. '\\1',
  40. '',
  41. '\\1\\2\\3',
  42. '\\1' . $tmp_dir . '\\2',
  43. '\\1' . $tmp_dir . '\\2',
  44. '\\1'
  45. );
复制代码
(责任编辑：chinab4c)