花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來(lái)到素材無(wú)憂網(wǎng),按 + 收藏我們
登錄 注冊(cè) 退出 找回密碼

dedecms織夢(mèng)手機(jī)站模板下載搭建基礎(chǔ)教程

時(shí)間: 2018-12-05 08:31 閱讀: 作者:素材無(wú)憂網(wǎng)

織夢(mèng)2015年6月8日更新后,就添加了很多針對(duì)手機(jī)移動(dòng)端的設(shè)計(jì),最大的設(shè)計(jì)就是添加了生成二維碼的織夢(mèng)標(biāo)簽和織夢(mèng)手機(jī)模板功能,織夢(mèng)更新后,默認(rèn)的 default模板中就包含手機(jī)模板,所以我們可以給織夢(mèng)網(wǎng)站設(shè)計(jì)雙模板,電腦網(wǎng)站pc模板和手機(jī)wap模板,很方便。

我們?cè)谥谱髂0鍟r(shí)通常都會(huì)參考織夢(mèng)默認(rèn)模板default中的標(biāo)簽使用,所以,接下來(lái)我們就來(lái)分析一下織夢(mèng)默認(rèn)模板default中使用手機(jī)模板的制作方法(注意本教程適合有開(kāi)發(fā)經(jīng)驗(yàn)的站長(zhǎng),如果是新手,建議先去熟悉織夢(mèng)pc模板開(kāi)發(fā))。

1、手機(jī)模板命名規(guī)則

在新織夢(mèng)的default模板中,除了原有的模板外,多了些手機(jī)模板,主要手機(jī)模板如下:

index_m.htm            首頁(yè)模板

index_default_m.htm    頻道頁(yè)模板

list_default_m.htm     列表頁(yè)模板

list_default_sg_m.htm  列表頁(yè)模板

article_article_m.htm  內(nèi)容頁(yè)模板

article_default_m.htm  內(nèi)容頁(yè)默認(rèn)模板

search_m.htm           搜索頁(yè)模板

head_m.htm             頂部模板

footer_m.htm           底部模板

 

熟悉織夢(mèng)電腦網(wǎng)站模板制作的站長(zhǎng),一眼大體就能明白這些手機(jī)模板對(duì)應(yīng)的用法和制作。這些手機(jī)模板和pc模板在制作、調(diào)用上還是有些區(qū)別的。下面說(shuō)一下具體的區(qū)別。

 

2、手機(jī)模板和pc模板的不同

(1)手機(jī)模板的命名不同

    從上面手機(jī)模板的命名就可以看出,手機(jī)模板和pc模板的命名區(qū)別就是在pc模板后加“_m” ,例如pc首頁(yè)模板是index.htm,對(duì)應(yīng)的手機(jī)模板就是index_m.htm ;pc列表頁(yè)模板是list_article.htm ,對(duì)應(yīng)的手機(jī)列表頁(yè)模板就list_article_m.htm 。

    并且制作pc模板時(shí),應(yīng)該有一個(gè)pc模板,就做一個(gè)對(duì)應(yīng)的手機(jī)模板,命名如上,這樣電腦和手機(jī)訪問(wèn)時(shí),對(duì)應(yīng)頁(yè)面都可以正常顯示。織夢(mèng)無(wú)憂下載

 

(2)手機(jī)模板調(diào)用的資源位置不同

      pc模板制作時(shí),調(diào)用的css、js、images都在模板文件夾中,例如默認(rèn)default模板中的css、js、images都在其中。而手機(jī)模板調(diào)用的css、js、images等資源都在網(wǎng)站根目錄/m/assets文件夾下。

 

    當(dāng)然我們可以在手機(jī)模板中把資源調(diào)用的位置設(shè)置到模板文件夾內(nèi)。但我分析了一下,覺(jué)的默認(rèn)的手機(jī)模板資源這樣調(diào)用還是有好處的,把手機(jī)模板資源和pc模板 資源分開(kāi),這樣當(dāng)我們又做了一個(gè)pc模板,想把現(xiàn)有的手機(jī)模板添加到這個(gè)新pc模板中時(shí),只需要把手機(jī)模板文件復(fù)制一份到新pc模板中就可以了,手機(jī)的 css、js等資源都不用動(dòng)。簡(jiǎn)單說(shuō),就是對(duì)手機(jī)資源管理方便。

 

      所以建議手機(jī)模板資源按照默認(rèn)模板一樣,放到根目錄對(duì)應(yīng)文件夾下。

 

(3)網(wǎng)站根目錄的m文件夾

      新織夢(mèng)的根目錄下多了m文件夾,這個(gè)就是手機(jī)訪問(wèn)的文件夾,剛才說(shuō)了手機(jī)模板資源就在m文件夾下。除此之外m文件夾下還有index.php、list.php、view.php,當(dāng)我們?cè)L問(wèn)手機(jī)站時(shí),其實(shí)就是訪問(wèn)這3個(gè)文件,動(dòng)態(tài)訪問(wèn)手機(jī)站。

 

      所以如果你想用電腦查看一下自己的手機(jī)站,方法就是訪問(wèn):http://你的域名/m ,就可以查看手機(jī)網(wǎng)站了。

 

(4)pc模板中的設(shè)置

      當(dāng)我們用手機(jī)訪問(wèn)網(wǎng)站時(shí),會(huì)自動(dòng)跳轉(zhuǎn)到手機(jī)模板,這需要在pc模板中添加跳轉(zhuǎn)的js代碼。在<head></head>添加代碼。

 

* 首頁(yè)模板中添加如下代碼:

1 2 3 4 5 6 7 8 <meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.php"> <script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else {if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/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("? mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test (navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.php";}else if (/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

* 列表頁(yè)模板添加如下代碼:

1 2 3 4 5 6 7 8 <meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"> <script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else {if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/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("? mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test (navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid= {dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

*內(nèi)容頁(yè)模板添加如下代碼

1 2 3 4 5 6 7 <meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}"> <script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else {if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/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("? mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test (navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid= {dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

      其中上面的js是電腦網(wǎng)站跳轉(zhuǎn)到手機(jī)網(wǎng)站的代碼,而<meta http-equiv="mobile-agent"  ....>是用來(lái)告訴百度,手機(jī)網(wǎng)站的地址,主要用于seo。

      pc模板添加上面代碼后,手機(jī)訪問(wèn)網(wǎng)站時(shí),就會(huì)自動(dòng)跳轉(zhuǎn)到手機(jī)網(wǎng)站模板了。

(5)手機(jī)模板的設(shè)置

      剛才說(shuō)過(guò)了手機(jī)網(wǎng)站訪問(wèn)的是網(wǎng)站根目錄的m文件夾下的index.php,list.php,view.php ,手機(jī)網(wǎng)站是訪問(wèn)動(dòng)態(tài)頁(yè)面,而不像pc站中的靜態(tài)頁(yè)面。

手機(jī)模板制作時(shí),有兩個(gè)地方和pc模板不同。

 

一、欄目超鏈接不同

在pc模板中,如導(dǎo)航欄,欄目超鏈接調(diào)用如下:

{dede:channel type='top' row='10' }

   <a href='[field:typeurl/]' >這是欄目?jī)?nèi)容</a>

{/dede:channel}

 

手機(jī)模板調(diào)用欄目超鏈接代碼如下:

{dede:channel type='top' row='10' }

   <a href='list.php?tid=[field:id/]' >這是欄目?jī)?nèi)容</a>

{/dede:channel}

 

二、文章列表超鏈接不同

pc模板中文章列表超鏈接調(diào)用代碼如下:

{dede:arclist row='10'  }

<a href='[field:arcurl/]' >這是文章標(biāo)題</a>

{/dede:arclist}

 

手機(jī)模板調(diào)用文章列表超鏈接代碼如下:

{dede:arclist row='10'  }

<a href='view.php?aid=[field:id/]' >這是文章標(biāo)題</a>

{/dede:arclist}

 

除了這兩個(gè)超鏈接不一樣,其他的織夢(mèng)標(biāo)簽通用。

(6)默認(rèn)的手機(jī)搜索頁(yè)模板search_m.htm不能用,經(jīng)測(cè)試發(fā)現(xiàn),默認(rèn)的手機(jī)搜索模板search_m.htm不能用,但用手機(jī)搜索時(shí),搜索結(jié)果用的是pc搜索模板search.htm 。

這是因?yàn)槭謾C(jī)模板中搜索也是調(diào)用的pc站的搜索功能。如果需要讓手機(jī)網(wǎng)站可以調(diào)用search_m.htm ,就需要單獨(dú)設(shè)置搜索功能頁(yè)面。具體內(nèi)容太長(zhǎng)了,所以請(qǐng)參考《》。

ok,完成pc站的跳轉(zhuǎn),和手機(jī)站鏈接的注意事項(xiàng),你就可以開(kāi)始做自己的織夢(mèng)手機(jī)模板了,方法和pc站模板開(kāi)發(fā)類似。開(kāi)發(fā)時(shí),可以多參考默認(rèn)default的手機(jī)模板。


版權(quán)聲明: 本站資源均來(lái)自互聯(lián)網(wǎng)或會(huì)員發(fā)布,如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)刪除!謝謝!

轉(zhuǎn)載請(qǐng)注明: dedecms織夢(mèng)手機(jī)站模板下載搭建基礎(chǔ)教程

標(biāo)簽:  
相關(guān)文章
模板推薦