當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  建站經(jīng)驗(yàn) >  正文

MIP技術(shù)分享:織夢(mèng)gbk站點(diǎn)mip改造方案分享

 2016-11-10 08:34  來(lái)源: A5專欄   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

前言:

近期嘗試對(duì)一個(gè)做過(guò)跳轉(zhuǎn)適配的dedecms/gbk手機(jī)站進(jìn)行整站mip改造,經(jīng)過(guò)一系列思路完善和測(cè)試,終于完成,回顧下過(guò)程,主要問(wèn)題可分為以下幾類:

1、非utf-8站點(diǎn)的編碼問(wèn)題

前些時(shí)候宋同學(xué)在站長(zhǎng)社區(qū)發(fā)布了新裝utf-8版cms和轉(zhuǎn)換數(shù)據(jù)庫(kù)編碼的教程,我剛開(kāi)始也是類似思路,但因?yàn)檎军c(diǎn)經(jīng)過(guò)二次開(kāi)發(fā)以及包含一些亂七八糟的附加文件等,重裝cms很難復(fù)原之前的修改,此思路卒。后又嘗試在數(shù)據(jù)庫(kù)調(diào)用時(shí)以gbk編碼讀取,測(cè)試生成后雖大體上瀏覽正常,但還是存在些許后續(xù)問(wèn)題和少部分亂碼,也放棄了該方案。最終,靈光一閃——為什么要在程序執(zhí)行過(guò)程中糾結(jié)?完全可以在生成靜態(tài)頁(yè)面時(shí)進(jìn)行替換整改啊!頓時(shí)柳暗花明之感油然而生,測(cè)試果然可行,之后遇到后續(xù)問(wèn)題(如下面問(wèn)題2、3)也因此思路而變得易解決了。

2、路徑問(wèn)題

、/等標(biāo)簽中的相對(duì)路徑需均轉(zhuǎn)換為完整url,這個(gè)在目前教程里貌似沒(méi)有明確提出,根目錄相對(duì)路徑還好,主要是相對(duì)當(dāng)前頁(yè)面路徑轉(zhuǎn)換完整url需加上所在目錄有些難度(特別是標(biāo)簽調(diào)用生成的相對(duì)路徑,如分頁(yè))。

3、內(nèi)聯(lián)樣式問(wèn)題

模板里的內(nèi)聯(lián)樣式可以手動(dòng)整改,雖煩瑣但難度不大,主要問(wèn)題在于后臺(tái)發(fā)布文章時(shí),cms編輯器會(huì)自動(dòng)生成包括內(nèi)聯(lián)樣式在內(nèi)的各種不符合mip規(guī)則的原始代碼,除了折騰一下對(duì)編輯器進(jìn)行修改,其他也很難解決了。

4、js問(wèn)題

mip規(guī)范局限了js的使用,這個(gè)的確挺頭疼的,好在我改造的站點(diǎn)內(nèi)js不多,所以刪掉部分效果和使用現(xiàn)有組件替換,也湊合解決了此問(wèn)題。不過(guò)還是希望百度mip團(tuán)隊(duì)能在考慮下此方面的規(guī)范方案優(yōu)化,不少站點(diǎn)有很多js代碼且不能去除,全部以組件形式提交也很費(fèi)事且需要一定的程序基礎(chǔ),其他問(wèn)題還可以按*程去解決,但js上的mip改造卻無(wú)法如此,按照目前的限制會(huì)導(dǎo)致很多站長(zhǎng)因此一點(diǎn)就不得不放棄mip改造。

5、其他小問(wèn)題

·發(fā)現(xiàn)少部分樣式有沖突,需根據(jù)實(shí)際情況對(duì)本身css進(jìn)行局部修改。

·發(fā)現(xiàn)mip cache無(wú)法識(shí)別站點(diǎn)中圖片的302跳轉(zhuǎn),如原站使用302跳轉(zhuǎn)的圖片,mip生效后無(wú)法顯示圖片。該問(wèn)題已和百度技術(shù)人員溝通,說(shuō)后續(xù)可以考慮支持,目前我自己加了一段代碼對(duì)路徑做了下處理。

·組件使用bug(如mip-carousel多圖輪播圖片套鏈接會(huì)導(dǎo)致圖片顯示空白,且無(wú)法自適應(yīng)屏幕)。

·mip引入提交后就回顯個(gè)success,也沒(méi)有提交記錄和狀態(tài),用戶體驗(yàn)上有所欠缺。

正題:基于dedecms/gbk的整站mip改造

第一部分:模板修改

1、js部分:刪除或使用現(xiàn)有組件替換

2、調(diào)用百度mip文件:

head里加

body里加

3、head里加,通過(guò)dedecms標(biāo)簽直接調(diào)用當(dāng)前頁(yè)url。

4、外部通用css文件:建議將css文件中的樣式代碼嵌入

中,另存為模板文件(如css.htm),用{dede:includefilename="css.htm"/}替換相關(guān)模板中的。

模板中的內(nèi)聯(lián)css可人工進(jìn)行查找替換,合并至中。(雖在下面代碼中可以自動(dòng)進(jìn)行處理,但從靜態(tài)文件生成性能角度考慮,還是建議人工先將模板中的內(nèi)聯(lián)樣式一次性整改好。)

注:以上操作大多可通過(guò)批量查找替換來(lái)完成,看似需要修改很多,但實(shí)際工作量并不大。

第二部分:程序文件修改

· 靜態(tài)生成移動(dòng)站:

找到/include/dedetag.class.php文件中解析模板輸出為文件的函數(shù):

function SaveTo($filename)

{

$fp = @fopen($filename,"w")or die("DedeTag Engine Create File False");

fwrite($fp,$this->GetResult());

fclose($fp);

}

替換為(部分代碼可根據(jù)實(shí)際情況進(jìn)行改動(dòng)):

//路徑轉(zhuǎn)換函數(shù)文件。$content:代碼源,$feed_url:首頁(yè),$f_url:相對(duì)路徑的目錄部分

function relative_to_absolute($content,$protocol, $domain, $f_url) {

//根目錄相對(duì)路徑(如href="/a/b.html")轉(zhuǎn)換

$new_content =preg_replace('/href\s*\=\s*([\'"])\s*\//','href=\\1'.$protocol.$domain.'/', $content);

$new_content =preg_replace('/src\s*\=\s*([\'"])\s*\//', 'src=\\1'.$protocol.$domain.'/',$new_content);

//當(dāng)前頁(yè)相對(duì)路徑(如href="a/b.html")轉(zhuǎn)換

$new_content

=preg_replace('/href\s*\=\s*([\'"])(?!(http|https):\/\/)/','href=\\1'.$protocol.$domain.$f_url,$new_content);

$new_content

=preg_replace('/src\s*\=\s*([\'"])(?!(http|https):\/\/)/','src=\\1'.$protocol.$domain.$f_url, $new_content);

return $new_content;

}

function SaveTo($filename)

{

$fp=@fopen($filename,"w") ordie("DedeTag Engine Create File False");

if(substr($_SERVER['PHP_SELF'],-6)=='_m.php'||substr($filename,-13)=='/m/index.html'){//跳轉(zhuǎn)適配站識(shí)別是否為移動(dòng)端生成,不影響pc端的gbk編碼。移動(dòng)端為獨(dú)立站點(diǎn)需去掉此判斷條件。

$f_url=explode('www.域名.com/m',dirname($filename));//分割路徑,獲取當(dāng)前頁(yè)相對(duì)路徑的目錄部分

//如dirname($filename)得到的本地絕對(duì)路徑為D:/wwwroot/www.域名.com/m/yygk/xwzx,用網(wǎng)站目錄“www.域名.com/m”作為標(biāo)識(shí)分割路徑,得到目錄部分“/yygk/xwzx”。

$html=$this->GetResult();

$html=$this->relative_to_absolute($html,'http://','m.域名.com',$f_url[1].'/');//相對(duì)路徑轉(zhuǎn)換絕對(duì)路徑

$html=str_replace('<metacharset="gb2312">','<metacharset="utf-8">',iconv('gbk','utf-8//ignore',$html));//轉(zhuǎn)換為utf-8編碼聲明,fwrite會(huì)以此生成對(duì)應(yīng)編碼的靜態(tài)頁(yè)面

$html=str_replace('<a','標(biāo)簽加target< p="">

$html=str_replace('<img','

/*主要針對(duì)編輯器生成的內(nèi)聯(lián)樣式,將內(nèi)聯(lián)樣式轉(zhuǎn)換到head的style標(biāo)簽中*/

if(preg_match_all('/\sstyle\s*\=\s*[\'"](.*?)[\'"]/',$html,$css)){

$css0=array_unique($css[0]);//過(guò)濾重復(fù)style

foreach($css0as $k => $v){

$html=str_replace($v,'class="mip_add_css_'.$k.'"',$html);//mip_add_css_為自定義樣式名前綴,可自行修改,但需避免與原有樣式名重復(fù)

$temp_name='mip_add_css_'.$k;

$$temp_name=$css[1][$k];

$add_css.='.'.$temp_name.'{'.$css[1][$k]."}\n";

}

$html=str_replace('',"

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
百度mip

相關(guān)文章

  • 提高用戶體驗(yàn),共建Web生態(tài),萬(wàn)家站點(diǎn)助力 MIP 技術(shù)

    2018年1月26日,來(lái)自各地的站長(zhǎng)、開(kāi)發(fā)者、建站商、科技記者、前端技術(shù)愛(ài)好者,共計(jì)兩百余人,齊聚北京五棵松嘻哈包袱鋪,共同慶祝MIP技術(shù)PV破億,與此同時(shí),共5千余人在線觀看了此次慶典活動(dòng)的直播。MIP(MobileInstantPage)是百度提出的一項(xiàng)開(kāi)源技術(shù),主要通過(guò)MIP規(guī)范、代碼運(yùn)行環(huán)境

    標(biāo)簽:
    百度mip
    百度mip是什么
  • MIP改造不再難 大量官方模板放出幫助站點(diǎn)改造

    簡(jiǎn)單來(lái)說(shuō)MIP是由百度推出的一套移動(dòng)網(wǎng)頁(yè)開(kāi)放性標(biāo)準(zhǔn),直白點(diǎn)說(shuō)就是百度為了進(jìn)一步提高用戶體驗(yàn)進(jìn)而推出的一系列規(guī)范標(biāo)準(zhǔn),站長(zhǎng)參與MIP改造計(jì)劃能夠與百度共同獲得一定的收益?!綧IP改造已成主流】目前全網(wǎng)已有2800+個(gè)站點(diǎn)近10億頁(yè)面完成了MIP改造,百度搜索導(dǎo)給MIP頁(yè)面的流量已近5000W,每天都有

    標(biāo)簽:
    百度mip
    百度mip是什么
  • 不止是網(wǎng)頁(yè)加速,百度搜索MIP提升站點(diǎn)廣告收入實(shí)錄

    百度推出MIP項(xiàng)目已1年有余,站點(diǎn)對(duì)MIP改造也趨之若鶩,目前MIP已經(jīng)覆蓋全互聯(lián)網(wǎng)9億個(gè)頁(yè)面,那么這么多站點(diǎn)改造后收益如何呢?在2017年3月23日百度站長(zhǎng)平臺(tái)廣州VIP大講堂&沙龍中,Mip項(xiàng)目的負(fù)責(zé)人通過(guò)一系列Mip改造后站點(diǎn)的數(shù)據(jù)給出了答案?!篗IP帶來(lái)用戶體驗(yàn)提升』“用戶體驗(yàn)第一”這句話不

  • 百度MIP負(fù)責(zé)人參加谷歌AMP峰會(huì) 雙方將共同提升網(wǎng)頁(yè)體驗(yàn)

    近日,首屆谷歌AMP開(kāi)發(fā)者大會(huì)正式召開(kāi),百度MIP技術(shù)負(fù)責(zé)人高磊受邀出席此次大會(huì)并發(fā)表演講。高磊表示,百度的MIP與谷歌的AMP都是為了提升網(wǎng)頁(yè)體驗(yàn)而做出的努力,MIP與AMP的技術(shù)規(guī)范是同根同源的,MIP在中國(guó)國(guó)內(nèi)做了適合國(guó)內(nèi)國(guó)情的的擴(kuò)展。為了避免站長(zhǎng)二次開(kāi)發(fā),MIP與AMP的技術(shù)融合是雙方未來(lái)努

    標(biāo)簽:
    百度mip
    百度mip是什么
  • 站長(zhǎng)新時(shí)代 百度搜索移動(dòng)賦能成二次發(fā)展關(guān)鍵

    眾所周知,移動(dòng)互聯(lián)網(wǎng)的大機(jī)會(huì)已經(jīng)消失,而在此次12月22日的“百度搜索VIP大講堂”上,搜索主任架構(gòu)師譚待也表示,整個(gè)移動(dòng)互聯(lián)網(wǎng)的增速已經(jīng)放緩,進(jìn)入到了紅利的末期。但是這對(duì)于站長(zhǎng)來(lái)說(shuō)并非災(zāi)難,因?yàn)檫@一趨勢(shì)在倒逼整個(gè)行業(yè)在向更高的用戶體驗(yàn)質(zhì)量提升,從搜索引擎到站長(zhǎng),都將越來(lái)越看重用戶留存的價(jià)值,從獲取

    標(biāo)簽:
    百度搜索
    百度mip

熱門排行

信息推薦