建站技術網專注分享網站建設技術,網站建設教程,真正幫你學會做網站技術,輕松解決網站建設過程中遇到的常見問題,為廣大站長服務。 網站地圖 | 收藏本站 | 訂閱
域名投資,就來找米網,認準網址:www.zhaomi.cc 專業仿站,就到仿站網:www.fangzhan.org
  站內公告: ·帝國cms教程內容已更新,歡迎關注     ·建站技術網采用阿里云服務器,備案已通    
您當前的位置:建站技術網 > cms教程 > Dedecms教程

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

時間:2019-04-29 23:28:19  來源:網絡收集  整理: 建站技術網 www.txwlqq.com     點擊:0次

我們在制作模板時通常都會參考織夢默認模板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織夢手機模板使用和制作方法
文章網址:http://www.txwlqq.com/cmsJiaocheng/dedecms/10392.html
上一篇:DedeCms開啟多站點支持絕對網址后生成RSS錯誤的修改方法
下一篇:返回列表
來頂一下
返回首頁
返回首頁
相關文章
    無相關信息
推薦資訊
如何通過SEO優化排名賺錢?SEO賺錢方法
如何通過SEO優化排名賺
seo優化教程:網站seo內容優化
seo優化教程:網站seo
SEO細節:企業SEO如何快速為新站做出效果
SEO細節:企業SEO如何
電商技術將如何發展?2018年有這五個大膽預測
電商技術將如何發展?
最新文章
欄目更新
欄目熱門
成人黄色