dedecms織夢手機模板使用和制作方法
我要評論我們在制作模板時通常都會參考織夢默認模板default中的標(biāo)簽使用，所以，接下來我們就來分析一下織夢默認模板default中使用手機模板的制作方法
注意：本教程適合有織夢模板開發(fā)經(jīng)驗的站長，如果是新手，建議先去熟悉織夢pc模板開發(fā)。
1、手機模板命名規(guī)則
在新織夢的default模板中，除了原有的模板外，多了些手機模板，主要手機模板如下：
index_m.htm 首頁模板
index_default_m.htm 頻道頁模板
list_default_m.htm 列表頁模板
list_default_sg_m.htm 列表頁模板
article_article_m.htm 內(nèi)容頁模板
article_default_m.htm 內(nèi)容頁默認模板
search_m.htm 搜索頁模板
head_m.htm 頂部模板
footer_m.htm 底部模板
熟悉織夢電腦網(wǎng)站模板制作的站長，一眼大體就能明白這些手機模板對應(yīng)的用法和制作。這些手機模板和pc模板在制作、調(diào)用上還是有些區(qū)別的。下面說一下具體的區(qū)別。
2、手機模板和pc模板的不同
（1）手機模板的命名不同
從上面手機模板的命名就可以看出，手機模板和pc模板的命名區(qū)別就是在pc模板后加“_m” ，例如pc首頁模板是index.htm，對應(yīng)的手機模板就是index_m.htm ；pc列表頁模板是list_article.htm ，對應(yīng)的手機列表頁模板就list_article_m.htm 。
并且制作pc模板時，應(yīng)該有一個pc模板，就做一個對應(yīng)的手機模板，命名如上，這樣電腦和手機訪問時，對應(yīng)頁面都可以正常顯示。
（2）手機模板調(diào)用的資源位置不同
pc模板制作時，調(diào)用的css、js、images都在模板文件夾中，例如默認default模板中的css、js、images都在其中。而手機模板調(diào)用的css、js、images等資源都在網(wǎng)站根目錄/m/assets文件夾下。
當(dāng)然我們可以在手機模板中把資源調(diào)用的位置設(shè)置到模板文件夾內(nèi)。但我分析了一下，覺的默認的手機模板資源這樣調(diào)用還是有好處的，把手機模板資源和pc模板 資源分開，這樣當(dāng)我們又做了一個pc模板，想把現(xiàn)有的手機模板添加到這個新pc模板中時，只需要把手機模板文件復(fù)制一份到新pc模板中就可以了，手機的 css、js等資源都不用動。簡單說，就是對手機資源管理方便。
所以建議手機模板資源按照默認模板一樣，放到根目錄對應(yīng)文件夾下。
（3）網(wǎng)站根目錄的m文件夾
新織夢的根目錄下多了m文件夾，這個就是手機訪問的文件夾，剛才說了手機模板資源就在m文件夾下。除此之外m文件夾下還有index.php、list.php、view.php，當(dāng)我們訪問手機站時，其實就是訪問這3個文件，動態(tài)訪問手機站。
所以如果你想用電腦查看一下自己的手機站，方法就是訪問：http://你的域名/m ，就可以查看手機網(wǎng)站了。
（4）pc模板中的設(shè)置
當(dāng)我們用手機訪問網(wǎng)站時，會自動跳轉(zhuǎn)到手機模板，這需要在pc模板中添加跳轉(zhuǎn)的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>
* 列表頁模板添加如下代碼：
<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('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/}/list.php?tid=</p> <p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>
*內(nèi)容頁模板添加如下代碼
<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('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-|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是電腦網(wǎng)站跳轉(zhuǎn)到手機網(wǎng)站的代碼，而<meta http-equiv="mobile-agent" ....>是用來告訴百度，手機網(wǎng)站的地址，主要用于seo。
pc模板添加上面代碼后，手機訪問網(wǎng)站時，就會自動跳轉(zhuǎn)到手機網(wǎng)站模板了。
（5）手機模板的設(shè)置
剛才說過了手機網(wǎng)站訪問的是網(wǎng)站根目錄的m文件夾下的index.php，list.php，view.php ，手機網(wǎng)站是訪問動態(tài)頁面，而不像pc站中的靜態(tài)頁面。
手機模板制作時，有兩個地方和pc模板不同。
一、欄目超鏈接不同
在pc模板中，如導(dǎo)航欄，欄目超鏈接調(diào)用如下：
{dede:channel type='top' row='10' }</p> <p><a href='[field:typeurl/]' >這是欄目內(nèi)容</a></p> <p>{/dede:channel}
手機模板調(diào)用欄目超鏈接代碼如下：
{dede:channel type='top' row='10' }</p> <p><a href='list.php?tid=[field:id/]' >這是欄目內(nèi)容</a></p> <p>{/dede:channel}
二、文章列表超鏈接不同
pc模板中文章列表超鏈接調(diào)用代碼如下：
{dede:arclist row='10' }</p> <p><a href='[field:arcurl/]' >這是文章標(biāo)題</a></p> <p>{/dede:arclist}
手機模板調(diào)用文章列表超鏈接代碼如下：
{dede:arclist row='10' }</p> <p><a href='view.php?aid=[field:id/]' >這是文章標(biāo)題</a></p> <p>{/dede:arclist}
除了這兩個超鏈接不一樣，其他的織夢標(biāo)簽通用。
（6）默認的手機搜索頁模板search_m.htm不能用
經(jīng)測試發(fā)現(xiàn)，默認的手機搜索模板search_m.htm不能用，但用手機搜索時，搜索結(jié)果用的是pc搜索模板search.htm 。
這是因為手機模板中搜索也是調(diào)用的pc站的搜索功能。如果需要讓手機網(wǎng)站可以調(diào)用search_m.htm ，就需要單獨設(shè)置搜索功能頁面。
總結(jié)
好了，按照以上的步驟完成pc站的跳轉(zhuǎn)，和手機站鏈接的注意事項，你就可以開始做自己的織夢手機模板了，方法和pc站模板開發(fā)類似。開發(fā)時，可以多參考默認default的手機模板。感興趣的朋友們快去動手試試吧，如果有疑問可以留言交流，小編會盡快給大家回復(fù)的。
相關(guān)文章
dedecms笑話模板(帶手機wap版) php版 v1.0
本模板基于DEDECms 5.7 UTF-8設(shè)計，需要GBK版本的請自己轉(zhuǎn)換，笑話內(nèi)涵圖類織夢模板(帶wap),測試完整無錯，兼容主流瀏覽器2015-03-31- 織夢dedecms如何配置手機wap站點并綁定二級域名？下面有個不錯的示例，大家可以參考下2014-02-13
- DedeCMS 5.1 修改的手機主題下載站源碼打包 本源碼使用方法： 1.將網(wǎng)站上傳到空間后運行 http://你的域名/install/ 安裝 （本程序基于dedecms5.1） 2.進入后臺后進行數(shù)2010-01-12
- 模板名稱：手機資源下載站DedeCMS模板 適用版本：DedeCms V5.1 使用方法：首先將壓縮包解壓后上傳到templets目錄下，然后在“系統(tǒng)設(shè)置”選擇相應(yīng)的模板名稱就2008-08-29
- dedecms更換模板只需要簡單的幾步操作就可以完成，下面小編給大家提供下dedecms網(wǎng)站更換前臺模板主題的方法，有需要的可以參考借鑒。2016-09-06
- 這篇文章主要介紹了dedecms 模板調(diào)用解析最簡代碼,需要的朋友可以參考下2015-07-17
- 這篇文章主要為大家介紹了dedecms各模板調(diào)用自定義字段的方法,包括了首頁、列表頁、搜索頁與內(nèi)容頁的調(diào)用方法,需要的朋友可以參考下2014-11-20
dedecms5.7首頁和列表頁模板中動態(tài)調(diào)用文章瀏覽次數(shù)的方法
這篇文章主要為大家介紹了dedecms5.7首頁和列表頁模板中動態(tài)調(diào)用文章瀏覽次數(shù)的方法,可實現(xiàn)準(zhǔn)確顯示文章瀏覽次數(shù)的功能,是非常實用的技巧,需要的朋友可以參考下2014-11-19織夢DEDECMS實現(xiàn)留言板調(diào)用模板頭部及底部的方法
這篇文章主要為大家介紹了織夢DEDECMS實現(xiàn)留言板調(diào)用模板頭部及底部的方法,是dedecms二次開發(fā)中非常實用的技巧,需要的朋友可以參考下2014-11-04
