本文作者:心月

phpcmsv9通過超全局變量$_SERVER變量實現PC端移動端雙模板

心月IT博客 2019-05-10
摘要:phpcmsv9實現PC端移動端雙模板的原理:通過判斷 $_SERVER[ SERVER_NAME ] 獲取的值的第一個字母是 m 還是 w ,如果是 m 則當成移動端的請求,調用移動端模板來渲染頁面;如果不是 m 則當成 PC 端請求,調用 PC 端模板渲染頁面。

PC端域名:www.xxx.com

移動端域名:m.xxx.com

當請求 www.xxx.com 及其下的子頁面時,$_SERVER['SERVER_NAME'] 的值都為 www.xxx.com;


當請求 m.xxx.com 及其下的子頁面時,$_SERVER['SERVER_NAME'] 的值都為 m.xxx.com;

    因此,phpcmsv9實現PC端移動端雙模板的原理:通過判斷 $_SERVER['SERVER_NAME'] 獲取的值的第一個字母是 'm' 還是 'w',如果是 'm' 則當成移動端的請求,調用移動端模板來渲染頁面;如果不是 'm' 則當成 PC 端請求,調用 PC 端模板渲染頁面,這樣就實現了移動端的請求以移動端模板渲染頁面,PC 端請求則以 PC 端模板渲染頁面。

    根據上面的原理,要實現雙模板,首先得判斷請求的域名是移動端的還是 PC 端的,因此在 phpcmsv9 模板渲染前先判斷 $_SERVER['SERVER_NAME'] 的值。好在 phpmcsv9 模板中支持 php 代碼,因此模板開始部分的內容可以這樣寫:

<!-- PC 模板文件 -->
{if substr($_SERVER['SERVER_NAME'], 0,1) == 'm'}
		{template "wap","*"}	//(wap:wap是手機端模板存放的文件夾名;*:星號代表的是手機端訪問時你需要調用的模板文件名,不用帶后綴)
	{else}
    【PC 端模板內容】
{/if}

這段代碼的意思是,如果 $_SERVER['SERVER_NAME'] 的第一個字母是 'm' 則調用相應的手機端模板,否則就調用 PC 端模板。

首頁雙模版實例

<!-- PC index.html模板文件 -->
{if substr($_SERVER['SERVER_NAME'], 0,1) == 'm'}
		{template "content_m","index"}	//(content_m:content_m是手機端模板存放的文件夾名;*:星號代表的是手機端訪問時你需要調用的模板文件名,不用帶后綴)
	{else}
    【PC 端模板內容】
{/if}

欄目頁、單頁面、內容頁也是這樣處理。

phpcmsv9雙模版

【注意問題】

    1、只需 PC 端模板的開始加域名判斷,移動端頁面無需處理。

    2、如果 pc 端的頁面是靜態頁需要做請求url處理,讓它移動端的請求跳轉到移動端url,如果不會的,可以把下面的js代碼放到 PC 端頁面的 head 里面,url 規則需要修改成你自己網站對應的 url 規則。

<script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                {if $catid=='' && $id==''}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/index.php";
                {elseif $id=='' && $catid!=''}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/【移動端欄目頁url規則】";
                {else}
                window.location.href="http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}/【移動端內容頁url規則】";
                {/if}
            }
        }
        browserRedirect();
     
    </script>

    3、移動端模板的處理

    在 PC 端請求移動端 url 時跳轉到 PC 端 url 頁面:

<script type="text/javascript">
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (!bIsIpad && !bIsIphoneOs && !bIsMidp && !bIsUc7 && !bIsUc && !bIsAndroid && !bIsCE && !bIsWM) {
                {if $catid=='' and $id==''}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/";
                {elseif $id=='' and $catid!=''}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/【PC端欄目頁url規則】";
                {else}
                window.location.href="http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}/【PC端內容頁url規則】";
                {/if}
            }
        }
        browserRedirect();
     
    </script>

    4、如果移動端頁面也想用純靜態頁面,可以參考《phpcmsv9移動端頁面靜態化實現方法——功能實現》,不過在移動端的模板中在渲染前要做好 url 處理,否則有可能最后生成的移動端頁面里的 url 的主域名是PC端的。

文章版權及轉載聲明:

作者:心月 本文地址:http://www.eojird.tw/cms/268.html發布于 2019-07-01
文章轉載或復制請以超鏈接形式并注明出處心月IT博客

分享到:
贊(

發表評論

快捷輸入:

    評論列表 (有 0 條評論,人圍觀)參與討論