dedecms織夢手機模板使用和製作方法

最後更新：2017-06-21 來源：互聯網

上載者：User

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

標籤：index 檔案複製 location curl list nav 導航代碼 symbian

1、手機模板命名規則

在新織夢的default模板中，除了原有的模板外，多了些手機模板，主要手機模板如下：

index_m.htm 首頁模板

index_default_m.htm 頻道頁模板

list_default_m.htm 列表頁模板

list_default_sg_m.htm 列表頁模板

article_article_m.htm 內容頁模板

article_default_m.htm 內容頁預設範本

search_m.htm 搜尋網頁模板

head_m.htm 頂部模板

footer_m.htm 底部模板

熟悉織夢電腦網站模板製作的站長，一眼大體就能明白這些手機模板對應的用法和製作。這些手機模板和pc模板在製作、調用上還是有些區別的。下面說一下具體的區別。

2、手機模板和pc模板的不同

（1）手機模板的命名不同

從上面手機模板的命名就可以看出，手機模板和pc模板的命名區別就是在pc模板後加“_m” ，例如pc首頁模板是index.htm，對應的手機模板就是index_m.htm ；pc列表頁模板是list_article.htm ，對應的手機列表頁模板就list_article_m.htm 。

並且製作pc模板時，應該有一個pc模板，就做一個對應的手機模板，命名如上，這樣電腦和手機訪問時，對應頁面都可以正常顯示。

（2）手機模板調用的資源位置不同

pc模板製作時，調用的css、js、images都在模板檔案夾中，例如預設default模板中的css、js、images都在其中。而手機模板調用的css、js、images等資源都在網站根目錄/m/assets檔案夾下。

當然我們可以在手機模板中把資源調用的位置設定到模板檔案夾內。但我分析了一下，覺的預設的手機模板資源這樣調用還是有好處的，把手機模板資源和pc模板資源分開，這樣當我們又做了一個pc模板，想把現有的手機模板添加到這個新pc模板中時，只需要把手機模板檔案複製一份到新pc模板中就可以了，手機的 css、js等資源都不用動。簡單說，就是對手機資源管理方便。

所以建議手機模板資源按照預設範本一樣，放到根目錄對應檔案夾下。

（3）網站根目錄的m檔案夾

新織夢的根目錄下多了m檔案夾，這個就是手機訪問的檔案夾，剛才說了手機模板資源就在m檔案夾下。除此之外m檔案夾下還有index.php、list.php、view.php，當我們訪問手機站時，其實就是訪問這3個檔案，動態訪問手機站。

所以如果你想用電腦查看一下自己的手機站，方法就是訪問：http://你的網域名稱/m ，就可以查看手機網站了。

（4）pc模板中的設定

當我們用手機訪問網站時，會自動跳轉到手機模板，這需要在pc模板中添加跳轉的js代碼。在<head></head>添加代碼。

* 首頁模板中添加如下代碼：

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.php"></p>
 <p><script type="text/javascript">if(window.location.toString().indexOf(‘pref=padindex‘) != -1){}else</p> 
<p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p>
 <p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-</p>
 <p>|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?</p>
 <p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p> 
<p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.php";}else if</p>
 <p>(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

　　* 列表頁模板添加如下代碼：

*內容頁模板添加如下代碼

其中上面的js是電腦網站跳轉到手機網站的代碼，而<meta http-equiv="mobile-agent" ....>是用來告訴百度，手機網站的地址，主要用於seo。

pc模板添加上面代碼後，手機訪問網站時，就會自動跳轉到手機網站模板了。

（5）手機模板的設定

剛才說過了手機網站訪問的是網站根目錄的m檔案夾下的index.php，list.php，view.php ，手機網站是訪問動態網頁面，而不像pc站中的靜態頁面。

手機模板製作時，有兩個地方和pc模板不同。

一、欄目超連結不同

在pc模板中，如導覽列，欄目超連結調用如下：

{dede:channel type=‘top‘ row=‘10‘ }</p> <p><a href=‘[field:typeurl/]‘ >這是欄目內容</a></p> <p>{/dede:channel}

手機模板調用欄目超連結代碼如下：

{dede:channel type=‘top‘ row=‘10‘ }</p> <p><a href=‘list.php?tid=[field:id/]‘ >這是欄目內容</a></p> <p>{/dede:channel}

二、文章列表超連結不同

pc模板中文章列表超連結調用代碼如下：

{dede:arclist row=‘10‘ }</p> <p><a href=‘[field:arcurl/]‘ >這是文章標題</a></p> <p>{/dede:arclist}

　　手機模板調用文章列表超連結代碼如下：

{dede:arclist row=‘10‘ }</p> <p><a href=‘view.php?aid=[field:id/]‘ >這是文章標題</a></p> <p>{/dede:arclist}

除了這兩個超連結不一樣，其他的織夢標籤通用。

（6）預設的手機搜尋網頁模板search_m.htm不能用

經測試發現，預設的手機搜尋模板search_m.htm不能用，但用手機搜尋時，搜尋結果用的是pc搜尋模板search.htm 。

這是因為手機模板中搜尋也是調用的pc站的搜尋功能。如果需要讓手機網站可以調用search_m.htm ，就需要單獨設定搜尋功能頁面。

總結

好了，按照以上的步驟完成pc站的跳轉，和手機站連結的注意事項，你就可以開始做自己的織夢手機模板了，方法和pc站模板開發類似。開發時，可以多參考預設default的手機模板

dedecms織夢手機模板使用和製作方法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

dedecms織夢手機模板使用和製作方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support