【織夢手機端仿站】和PC一個後臺

時間  2020-05-06
標籤 織夢手機端仿站 一個 後臺 简体版
原文   原文鏈接

卸載插件，織夢默認帶手機站，無需複雜使用插件之後不方便升級。
織夢2015年6月8日更新後，就添加了不少針對手機移動端的設計，最大的設計就是添加了生成二維碼的織夢標籤和織夢手機模板功能，織夢更新後，默認的 default模板中就包含手機模板，因此咱們能夠給織夢網站設計雙模板，電腦網站pc模板和手機wap模板，很方便。
咱們在製做模板時一般都會參考織夢默認模板default中的標籤使用，因此，接下來咱們就來分析一下織夢默認模板default中使用手機模板的製做方法（注意本教程適合有織夢模板開發經驗的站長，若是是新手，建議先去熟悉織夢pc模板開發）。
一、手機模板命名規則
在新織夢的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模板在製做、調用上仍是有些區別的。下面說一下具體的區別。

二、手機模板和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等資源都不用動。簡單說，就是對手機資源管理方便。

因此建議手機模板資源按照默認模板同樣，放到根目錄對應文件夾下。直接複製把手下面的:css,images,js三個文件夾到m文件夾下便可。

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

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

pc模板添加上面代碼後，手機訪問網站時，就會自動跳轉到手機網站模板了。javascript

 

跳轉方法2：php

<!-- 手機跳轉開始 -->
<script type="text/javascript">css

if(window.location.toString().indexOf('pref=padindex') != -1){html

}else{java

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /\(Android.*Mobile.+\).+Gecko.+Firefox/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))){ web

if(window.location.href.indexOf("?mobile")<0){瀏覽器

try{curl

if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){測試

window.location.href="/m";網站

}else if(/iPad/i.test(navigator.userAgent)){

//window.location.href="/"

}else{

window.location.href="/"

}

}catch(e){}

}

}

}

</script>


<!-- 手機跳轉結束 -->



（5）手機模板的設置
剛纔說過了手機網站訪問的是網站根目錄的m文件夾下的index.php，list.php，view.php ，手機網站是訪問動態頁面，而不像pc站中的靜態頁面。

手機模板製做時，有兩個地方和pc模板不一樣。

1、欄目超連接不一樣
在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}
例如：/m/list.php?tid=1,首頁生成比較慢，要關閉後臺瀏覽器以後重新生成

2、文章列表超連接不一樣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不能用，經測試發現，默認的手機搜索模板search_m.htm不能用，但用手機搜索時，搜索結果用的是pc搜索模板search.htm 。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程