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

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

dedecms織夢手機站模板下載入門

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

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

我們在制作模板時通常都會參考織夢默認模板default中的標簽使用，所以，接下來我們就來分析一下織夢默認模板default中使用手機模板的制作方法（注意本教程適合有開發(fā)經驗的站長，如果是新手，建議先去熟悉織夢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  內容頁模板

article_default_m.htm  內容頁默認模板

search_m.htm           搜索頁模板

head_m.htm             頂部模板

footer_m.htm           底部模板

 

熟悉織夢電腦網(wǎng)站模板制作的站長，一眼大體就能明白這些手機模板對應的用法和制作。這些手機模板和pc模板在制作、調用上還是有些區(qū)別的。下面說一下具體的區(qū)別。

 

2、手機模板和pc模板的不同

 

（1）手機模板的命名不同

    從上面手機模板的命名就可以看出，手機模板和pc模板的命名區(qū)別就是在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等資源都在網(wǎng)站根目錄/m/assets文件夾下。

 

    當然我們可以在手機模板中把資源調用的位置設置到模板文件夾內。但我分析了一下，覺的默認的手機模板資源這樣調用還是有好處的，把手機模板資源和pc模板 資源分開，這樣當我們又做了一個pc模板，想把現(xiàn)有的手機模板添加到這個新pc模板中時，只需要把手機模板文件復制一份到新pc模板中就可以了，手機的 css、js等資源都不用動。簡單說，就是對手機資源管理方便。

 

      所以建議手機模板資源按照默認模板一樣，放到根目錄對應文件夾下。

 

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

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

 

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

 

（4）pc模板中的設置

      當我們用手機訪問網(wǎng)站時，會自動跳轉到手機模板，這需要在pc模板中添加跳轉的js代碼。在<head></head>添加代碼。

 

* 首頁模板中添加如下代碼：

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

 

 

 

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

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

 

 

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

<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)站跳轉到手機網(wǎng)站的代碼，而<meta http-equiv="mobile-agent"  ....>是用來告訴百度，手機網(wǎng)站的地址，主要用于seo。

 

      pc模板添加上面代碼后，手機訪問網(wǎng)站時，就會自動跳轉到手機網(wǎng)站模板了。

 

（5）手機模板的設置

      剛才說過了手機網(wǎng)站訪問的是網(wǎng)站根目錄的m文件夾下的index.php，list.php，view.php ，手機網(wǎng)站是訪問動態(tài)頁面，而不像pc站中的靜態(tài)頁面。

 

 

手機模板制作時，有兩個地方和pc模板不同。

 

一、欄目超鏈接不同

在pc模板中，如導航欄，欄目超鏈接調用如下：

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

   <a href='[field:typeurl/]' >這是欄目內容</a>

{/dede:channel}

 

手機模板調用欄目超鏈接代碼如下：

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

   <a href='list.php?tid=[field:id/]' >這是欄目內容</a>

{/dede:channel}

 

二、文章列表超鏈接不同

pc模板中文章列表超鏈接調用代碼如下：

{dede:arclist row='10'  }

<a href='[field:arcurl/]' >這是文章標題</a>

{/dede:arclist}

 

手機模板調用文章列表超鏈接代碼如下：

{dede:arclist row='10'  }

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

{/dede:arclist}

 

除了這兩個超鏈接不一樣，其他的織夢標簽通用。

 

（6）默認的手機搜索頁模板search_m.htm不能用，經測試發(fā)現(xiàn)，默認的手機搜索模板search_m.htm不能用，但用手機搜索時，搜索結果用的是pc搜索模板search.htm 。

這是因為手機模板中搜索也是調用的pc站的搜索功能。如果需要讓手機網(wǎng)站可以調用search_m.htm ，就需要單獨設置搜索功能頁面。具體內容太長了，所以請參考《織夢dedecms怎樣設置不同的搜索頁模板》。

ok，完成pc站的跳轉，和手機站鏈接的注意事項，你就可以開始做自己的織夢手機模板了，方法和pc站模板開發(fā)類似。開發(fā)時，可以多參考默認default的手機模板。快去試試吧。祝你成功。

版權聲明： 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布，如果侵犯了您的權益請與我們聯(lián)系，我們將在24小時內刪除！謝謝！

轉載請注明： dedecms織夢手機站模板下載入門

標簽：  
相關文章
模板推薦