|  首頁  |  資訊  |  評測  |  活動  |  學院  |  訪談  |  專題  |  雜志  |  產服  |  
您現在的位置:硅谷網> 學院> 經驗>

dedecms織夢手機模板制作方法 手機模板如何使用?

2016-10-22 12:44 作者:佚名 來源:硅谷網綜合 HV: 編輯:GuiGu 【搜索試試
最新版的dedecms系統添加了很多針對手機移動端的設計,織夢更新后,默認的 default模板中就包含手機模板,所以我們可以給織夢網站設計雙模板,電腦網站pc模板和手機wap模板,下面給大家介紹dedecms織夢手機模板使用和制作的方法,有需要的可以參考借鑒。
 
 

我們在制作模板時通常都會參考織夢默認模板default中的標簽使用,所以,接下來我們就來分析一下織夢默認模板default中使用手機模板的制作方法

注意:本教程適合有織夢模板開發經驗的站長,如果是新手,建議先去熟悉織夢pc模板開發。

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>

 

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

 

復制代碼
代碼如下:

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

 

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

 

復制代碼
代碼如下:

<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是電腦網站跳轉到手機網站的代碼,而<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織夢手機模板制作方法 手機模板如何使用?”發布評論】

版權及免責聲明:
① 本網站部分投稿來源于“網友”,涉及投資、理財、消費等內容,請親們反復甄別,切勿輕信。本網站部分由贊助商提供的內容屬于【廣告】性質,僅供閱讀,不構成具體實施建議,請謹慎對待。據此操作,風險自擔。
② 內容來源注明“硅谷網”及其相關稱謂的文字、圖片和音視頻,版權均屬本網站所有,任何媒體、網站或個人需經本網站許可方可復制或轉載,并在使用時必須注明來源【硅谷網】或對應來源,違者本網站將依法追究責任。
③ 注明來源為各大報紙、雜志、網站及其他媒體的文章,文章原作者享有著作權,本網站轉載其他媒體稿件是為傳播更多的信息,并不代表贊同其觀點和對其真實性負責,本網站不承擔此類稿件侵權行為的連帶責任。
④ 本網站不對非自身發布內容的真實性、合法性、準確性作擔保。若硅谷網因為自身和轉載內容,涉及到侵權、違法等問題,請有關單位或個人速與本網站取得聯系(聯系電話:01057255600),我們將第一時間核實處理。
相關
·如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
·dedecms織夢登錄插件-QQ登錄、微博登錄、微信登
·查找我的iPhone詳細教程:蘋果手機丟了怎么辦?
·給手機充電時,先插手機還是先插電源差別很大!
·dedecms批量命令:dede合并欄目、刪除欄目方法
·山寨安卓手機刷機教程 不用擔心自己不會刷機了
·去掉1個字符,解決織夢移動版無法自動更新問題
·織夢dede后臺頁面和功能 修改及精簡操作方法
廣告
頭條
新聞來源很重要?將近一半讀者根本不關心它! 新聞來源很重要?將近一半讀者根本不關心它!
在網絡主頁上發新聞的好日子早就過去了。今天的受眾更愿意把超過一半的流量花在社交媒……
·新聞來源很重要?將近一半讀者根本不關心它!
圖文
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
mcafee是什么軟件好用嗎?McAfee中文譯名是
自媒體賬號如何申請?各個平臺運營方法匯總!
自媒體賬號如何申請?各個平臺運營方法匯總
it是什么行業?it技術是什么?it是什么意思?
it是什么行業?it技術是什么?it是什么意思
最新
·如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
·硅谷有多大面積?美國硅谷有多大?面積多少?
·iframe怎么用?iframe標簽屬性iframe寫法詳解!
·mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
·什么是域名糾錯系統?怎么關閉域名糾錯系統?
熱點
·硅谷為什么叫硅谷?硅谷到底是什么意思呢?
·做客、作客、座客和坐客的意思和區別是什么?
·知道UV、VV,CV是什么?PV、UV、IP什么意思?
·自媒體賬號如何申請?各個平臺運營方法匯總!
·物聯網時代真的要來了,究竟物聯網是什么呢?
舊聞
·織夢dedecms配置手機wap站點并綁定二級域名!
·人生苦短!怎樣才能遠離那些浪費你生命的破事
·去掉1個字符,解決織夢移動版無法自動更新問
·企業網站運維成本分析 選用saas型建站平臺經
·做客、作客、座客和坐客的意思和區別是什么?
廣告
硅谷影像
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
如何把蘋果iPhone手機的照片傳到蘋果Mac電腦?
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
mcafee是什么軟件好用嗎?McAfee中文譯名是什么?
什么是域名糾錯系統?怎么關閉域名糾錯系統?
什么是域名糾錯系統?怎么關閉域名糾錯系統?
董事長屬于高管嗎?公司董事屬于公司高管嗎?
董事長屬于高管嗎?公司董事屬于公司高管嗎?
server服務:server服務自動停止關閉如何解決?
server服務:server服務自動停止關閉如何解決?
怎么關閉域名糾錯系統?什么是域名糾錯系統?
怎么關閉域名糾錯系統?什么是域名糾錯系統?
關于我們·About | 聯系我們·contact | 加入我們·Join | 關注我們·Invest | Site Map | Tags | RSS Map
電腦版·PC版 移動版·MD版 網站熱線:(+86)010-57255600
Copyright © 2007-2020 硅谷網. 版權所有. All Rights Reserved. <京ICP備12003855號-2>
快乐赛车彩票网 七星彩 挖隧道赚钱 3d组选包胆中奖规则 快乐10分 河北时时彩 快乐扑克推荐 免费三公游戏 dnf赚钱经 qq麻将免费刷分器 福彩3d 北京pk10统计软件 丫丫湖南麻将代理 彩票360彩票 重庆时时彩安卓客户端 博彩游戏老虎机网址 黑红梅方50句打法