1. 程式人生 > >織夢dedecms PC移動端同一後臺

織夢dedecms PC移動端同一後臺

最近花了幾天時間研究了一下關於織夢統一後臺的功能。

百度了許多方法都不靈驗。在自己嘗試了幾種方法後,目前這種可行。

首先前提是:在已經做好的PC端上增加手機端

1,把移動端的css、js、images檔案放到根目錄下m資料夾下,或者/m/assets資料夾下

(建議移動端的圖片和pc端的圖片放在同一個資料夾便於管理)

呼叫:<link href="{dede:global.cfg_mobileurl/}/css/phonestyle.css" rel="stylesheet"> 或者

<link href="{dede:global.cfg_mobileurl/}/assets/css/phonestyle.css" rel="stylesheet">

{dede:global.cfg_mobileurl/} 表示m檔案下夾面 當上面這樣寫路徑錯誤時。

當把下面的js跳轉判斷加在了pc模板頭部<head></head>的時候

移動端呼叫的css、js樣式路徑就直接為

<link href="css/style.css" rel="stylesheet"> 前提:把移動端的css、js檔案放到根目錄下m資料夾下

因為下面js判斷了手機端 載入到了m資料夾下面 

所以前面的{dede:global.cfg_mobileurl/} 就可以不加了 導致重複 (不加可以解析就不加,沒有解析就加)。

2,把pc端的和手機端的模板放在一個資料夾下,手機端頁面字尾_m (與default同級 )

3,在套移動端的摸板時,跟PC端的區別,其他都一樣:

很重要的說明!!!

最重要的一點 檢視/更改手機端的樣式要在後臺切換到手機模板(模板不正確更新是無效的) 這個很坑!!!

當我們用手機訪問網站時,會自動跳轉到手機模板,這需要在pc模板中新增跳轉的js程式碼。

全部加在pc模板頭部<head></head>新增程式碼。

其中下面的<meta http-equiv="mobile-agent" ....>是用來告訴百度,手機網站的地址,主要用於seo。

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.php">
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}">
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}">

1)首頁跳轉js

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

2)列表頁跳轉js

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

3)內容頁跳轉js

<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|WindowsPhone|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在pc端頭部判斷是否為手機端:

<script type="text/javascript">
		var is_iPd = navigator.userAgent.match(/(iPod|iPhone)/i) != null;
		var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null;
		if(is_mobi && window.location.search.indexOf("mv=fp")<0)
		{
			window.location.href="/m/";//因為織夢的手機端在m資料夾下跳轉
		}
	</script>

然後也可以跳到m下。很開心,可以解析 (如果{dede:global.cfg_mobileurl/}解析不了 就直接寫m)

{dede:global.cfg_mobileurl/} = m;

pc模板新增上面程式碼後,手機訪問網站時,就會自動跳轉到手機網站模板了。

移動端命名:header_m.htm,footer_m.htm,index_m.htm

呼叫頭部尾部:

{dede:include filename="header_m.htm"/}

{dede:include filename="footer_m.htm"/}

總結一下最重要的:

1,採用js判斷載入移動端,m資料夾下面

2,所有css,js檔案放到根目錄下m資料夾下,或者/m/assets資料夾下 

(建議移動端的圖片和pc端的圖片放在同一個資料夾便於管理)

手機模板的設定

剛才說過了手機網站訪問的是網站根目錄的m資料夾下的index.php,list.php,view.php ,手機網站是訪問動態頁面,而不像pc站中的靜態頁面。

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

一、欄目超連結不同

在手機模板中,如導航欄,欄目超連結呼叫如下:(手機端上跳列表頁的連結)

{dede:channel type='top' row='10' typeid='2' }
            <li><a href='list.php?tid=[field:id/]' [field:rel/]>[field:typename/]</a></li>
 {/dede:channel}

手機模板呼叫列表超連結程式碼如下:(手機端上跳詳情頁的連結)

{dede:arclist row='10' typeid='3' }
          <p><a href='view.php?aid=[field:id/]' >這是文章標題:[field:title/]</a></p>
{/dede:arclist}

手機用 arclist 解析 list 解析不出首頁。

手機首頁呼叫舉例:

<ul>
          {dede:arclist typeid='22' row='50' imgwidth='189' imgheight='160'}
              <li class="cur">
                     <a href="view.php?aid=[field:id/]">[field:image/]</a>
                    <p><a href="view.php?aid=[field:id/]" title="[field:fulltitle/]">[field:fulltitle/]</a></p>
              </li>
       {/dede:arclist}
 </ul>

列表頁呼叫舉例:

<ul>
     {dede:list pagesize='5' typeid='3'}
         <li>
            <a href="[field:arcurl/]">[field:title/]</a>
            <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        </li>
    {/dede:list}   
 </ul>

dede:list 在手機列表頁可以呼叫不同typeid下的文章,配合顯示分頁

分頁:

 <ul>
             {dede:pagelist listitem="pre,next,pageno"/}
   </ul>