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

最新版的dedecms系統增加了許多針對手機行動端的設計，織夢更新後，預設的default模板中就包含手機模板，所以我們可以為織夢網站設計雙模板，電腦網站pc模板和手機wap模板，下面給大家介紹dedecms織夢手機模板使用和製作的方法，有需要的可以參考借鑒。模板的製作方法

注意：本教學適合有織夢模板開發經驗的站長，如果是新手，建議先去熟悉織夢pc模板開發。 #1、手機模板命名規則

在新織夢的default模板中，除了原有的模板外，多了些手機模板，主要手機模板如下：     index_m.htm 首頁範本     index_default_m.htm 頻道頁範本

     list_default_m.htm  icle_m 。底部模板

dedecms模板下載地址: www.php.cn/xiazai/code/dedecms

熟悉織夢電腦網站模板製作的站長，一眼大體就能明白這些手機模板對應的用法和製作。

##（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/as

set

s資料夾下。

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

（3）網站根目錄的m資料夾

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

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

（4）pc模板中的設定

當我們用手機造訪網站時，會自動跳到手機模板，這需要在pc模板中加入跳轉的js程式碼。在新增程式碼。

* 首頁範本中新增如下程式碼：

程式碼如下:

<meta http-equiv="mobile-agent" content="
for
mat=xhtml;url={dede:global.cfg_mobileurl/}/index.php"></p>
<p><script type="text/
javascript
">
if
(window.location.to
String
().indexOf(&#39;pref=padindex&#39;) != -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>

* 清單頁範本新增如下程式碼：

程式碼如下:

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"></p>
<p><script type="text/javascript">if(window.location.toString().indexOf(&#39;pref=padindex&#39;) != -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/}/list.php?tid=</p>
<p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

*內容頁範本加入如下程式碼

#程式碼如下:

<meta http-equiv="mobile-agent" content="format=xhtml;
url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}">
</p>
<p><script type="text/javascript">if(window.location.toString().indexOf(&#39;pref=padindex&#39;) != -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-|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/}/view.php?aid=</p>
<p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

其中上面的js是電腦網站跳到手機網站的代碼，而是用來告訴百度，手機網站的地址，主要用於seo。

pc模板加入上面程式碼後，手機造訪網站時，就會自動跳到手機網站模板了。

（5）手機模板的設定#

刚才说过了手机网站访问的是网站根目录的m文件夹下的index.php，list.php，view.php ，手机网站是访问动态页面，而不像pc站中的静态页面。

手机模板制作时，有两个地方和pc模板不同。

一、栏目超链接不同

在pc模板中，如导航栏，栏目超链接调用如下：

代码如下:

{dede:channel type='
top
&#39; row=&#39;10&#39; }</p>
<p><a href=&#39;[field:typeurl/]&#39; >这是栏目内容</a></p>
<p>{/dede:channel}

手机模板调用栏目超链接代码如下：

代码如下:

{dede:channel type=&#39;top&#39; row=&#39;10&#39; }</p>
<p><a href=&#39;list.php?tid=[field:id/]&#39; >这是栏目内容</a></p>
<p>{/dede:channel}

二、文章列表超链接不同

pc模板中文章列表超链接调用代码如下：

代码如下:

{dede:arclist row=&#39;10&#39; }</p>
<p><a href=&#39;[field:arcurl/]&#39; >这是文章标题</a></p>
<p>{/dede:arclist}

手机模板调用文章列表超链接代码如下：

代码如下:

{dede:arclist row=&#39;10&#39; }</p>
<p><a href=&#39;view.php?aid=[field:id/]&#39; >这是文章标题</a></p>
<p>{/dede:arclist}

除了这两个超链接不一样，其他的织梦标签通用。

（6）默认的手机搜索页模板search_m.htm不能用

经测试发现，默认的手机搜索模板search_m.htm不能用，但用手机搜索时，搜索结果用的是pc搜索模板search.htm 。

这是因为手机模板中搜索也是调用的pc站的搜索功能。如果需要让手机网站可以调用search_m.htm ，就需要单独设置搜索功能页面。

总结

好了，按照以上的步骤完成pc站的跳转，和手机站链接的注意事项，你就可以开始做自己的织梦手机模板了，方法和pc站模板开发类似。开发时，可以多参考默认default的手机模板。感兴趣的朋友们快去动手试试吧，如果有疑问可以留言交流，小编会尽快给大家回复的。

以上是dedecms織夢手機模板使用和製作的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！