首頁 > 開發者 > CSS

ecshop自動解析模板中圖片,css，js的路徑

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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">

能自動替換路徑的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/lostphp.png">

將會被自動替換為

<img src="themes/模板目錄名/images/lostphp.png">

能自動替換路徑的圖片檔案一定要以路徑img開頭的圖片檔案
這種自動解析方便我們可以把這些css,js,img和模板放在一起而不用考慮實際的路徑
ecshop對圖片，CSS,JavaScript的路徑替換原則可以參看include/cls_template.php檔案裡面的smarty_prefilter_preCompile()的最後幾行正則替換:

 代碼如下 複製代碼
 /* 在頭部加入版本資訊 */
 $source = preg_replace('/<head>/i', "<head>\r\n<meta name=\"Generator\" content=\"" . APPNAME .' ' . VERSION . "\" />", $source);
 
 /* 修正css路徑 */
 $source = preg_replace('/(<link\shref=["|\'])(?:\.\/|\.\.\/)?(css\/)?([a-z0-9A-Z_]+\.css["|\']\srel=["|\']stylesheet["|\']\stype=["|\']text\/css["|\'])/i','\1' . $tmp_dir . '\2\3', $source);
 
 /* 修正js目錄下js的路徑 */
 $source = preg_replace('/(<script\s(?:type|language)=["|\']text\/javascript["|\']\ssrc=["|\'])(?:\.\/|\.\.\/)?(js\/[a-z0-9A-Z_\-\.]+\.(?:js|vbs)["|\']><\/script>)/', '\1' . $tmp_dir . '\2', $source);
 
 /* 更換編譯模板的編碼類別型 */
 $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);
 
 }
 
 /**
 * 處理庫檔案
 */
 elseif ($file_type == '.lbi')
 {
 /* 去除meta */
 $source = preg_replace('/<meta\shttp-equiv=["|\']Content-Type["|\']\scontent=["|\']text\/html;\scharset=(?:.*?)["|\']>\r?\n?/i', '', $source);
 }
 
 /* 替換檔案編碼頭部 */
 if (strpos($source, "\xEF\xBB\xBF") !== FALSE)
 {
 $source = str_replace("\xEF\xBB\xBF", '', $source);
 }
 
 $pattern = array(
 '/<!--[^>|\n]*?({.+?})[^<|{|\n]*?-->/', // 替換smarty注釋
 '/<!--[^<|>|{|\n]*?-->/', // 替換不換行的html注釋
 '/(href=["|\'])\.\.\/(.*?)(["|\'])/i', // 替換相對連結
 '/((?:background|src)\s*=\s*["|\'])(?:\.\/|\.\.\/)?(images\/.*?["|\'])/is', // 在images前加上 $tmp_dir
 '/((?:background|background-image):\s*?url\()(?:\.\/|\.\.\/)?(images\/)/is', // 在images前加上 $tmp_dir
 '/([\'|"])\.\.\//is', // 以../開頭的路徑全部修正為空白
 );
 $replace = array(
 '\1',
 '',
 '\1\2\3',
 '\1' . $tmp_dir . '\2',
 '\1' . $tmp_dir . '\2',
 '\1'
 );

注意事項:雖然說是自動解析了但是也是有要前提了，比如說ecsho.css會被解析成themes/模板目錄/ecshop.css哦
頁css/ecshop.css會被解析成themes/模板/css/ecshop.css哦，而像images會被解析而img不會解析， js會被解析而javascript不會解析，具體例子如下圖

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More