前言:
近期嘗試對一個做過跳轉適配的dedecms/gbk手機站進行整站mip改造,經過一系列思路完善和測試,終于完成,回顧下過程,主要問題可分為以下幾類:
1、非utf-8站點的編碼問題
前些時候宋同學在站長社區(qū)發(fā)布了新裝utf-8版cms和轉換數(shù)據(jù)庫編碼的教程,我剛開始也是類似思路,但因為站點經過二次開發(fā)以及包含一些亂七八糟的附加文件等,重裝cms很難復原之前的修改,此思路卒。后又嘗試在數(shù)據(jù)庫調用時以gbk編碼讀取,測試生成后雖大體上瀏覽正常,但還是存在些許后續(xù)問題和少部分亂碼,也放棄了該方案。最終,靈光一閃——為什么要在程序執(zhí)行過程中糾結?完全可以在生成靜態(tài)頁面時進行替換整改啊!頓時柳暗花明之感油然而生,測試果然可行,之后遇到后續(xù)問題(如下面問題2、3)也因此思路而變得易解決了。
2、路徑問題
、/等標簽中的相對路徑需均轉換為完整url,這個在目前教程里貌似沒有明確提出,根目錄相對路徑還好,主要是相對當前頁面路徑轉換完整url需加上所在目錄有些難度(特別是標簽調用生成的相對路徑,如分頁)。
3、內聯(lián)樣式問題
模板里的內聯(lián)樣式可以手動整改,雖煩瑣但難度不大,主要問題在于后臺發(fā)布文章時,cms編輯器會自動生成包括內聯(lián)樣式在內的各種不符合mip規(guī)則的原始代碼,除了折騰一下對編輯器進行修改,其他也很難解決了。
4、js問題
mip規(guī)范局限了js的使用,這個的確挺頭疼的,好在我改造的站點內js不多,所以刪掉部分效果和使用現(xiàn)有組件替換,也湊合解決了此問題。不過還是希望百度mip團隊能在考慮下此方面的規(guī)范方案優(yōu)化,不少站點有很多js代碼且不能去除,全部以組件形式提交也很費事且需要一定的程序基礎,其他問題還可以按*程去解決,但js上的mip改造卻無法如此,按照目前的限制會導致很多站長因此一點就不得不放棄mip改造。
5、其他小問題
·發(fā)現(xiàn)少部分樣式有沖突,需根據(jù)實際情況對本身css進行局部修改。
·發(fā)現(xiàn)mip cache無法識別站點中圖片的302跳轉,如原站使用302跳轉的圖片,mip生效后無法顯示圖片。該問題已和百度技術人員溝通,說后續(xù)可以考慮支持,目前我自己加了一段代碼對路徑做了下處理。
·組件使用bug(如mip-carousel多圖輪播圖片套鏈接會導致圖片顯示空白,且無法自適應屏幕)。
·mip引入提交后就回顯個success,也沒有提交記錄和狀態(tài),用戶體驗上有所欠缺。
正題:基于dedecms/gbk的整站mip改造
第一部分:模板修改
1、js部分:刪除或使用現(xiàn)有組件替換
2、調用百度mip文件:
head里加
body里加
3、head里加,通過dedecms標簽直接調用當前頁url。
4、外部通用css文件:建議將css文件中的樣式代碼嵌入
中,另存為模板文件(如css.htm),用{dede:includefilename="css.htm"/}替換相關模板中的。
模板中的內聯(lián)css可人工進行查找替換,合并至中。(雖在下面代碼中可以自動進行處理,但從靜態(tài)文件生成性能角度考慮,還是建議人工先將模板中的內聯(lián)樣式一次性整改好。)
注:以上操作大多可通過批量查找替換來完成,看似需要修改很多,但實際工作量并不大。
第二部分:程序文件修改
· 靜態(tài)生成移動站:
找到/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ù)文件。$content:代碼源,$feed_url:首頁,$f_url:相對路徑的目錄部分
function relative_to_absolute($content,$protocol, $domain, $f_url) {
//根目錄相對路徑(如href="/a/b.html")轉換
$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);
//當前頁相對路徑(如href="a/b.html")轉換
$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'){//跳轉適配站識別是否為移動端生成,不影響pc端的gbk編碼。移動端為獨立站點需去掉此判斷條件。
$f_url=explode('www.域名.com/m',dirname($filename));//分割路徑,獲取當前頁相對路徑的目錄部分
//如dirname($filename)得到的本地絕對路徑為D:/wwwroot/www.域名.com/m/yygk/xwzx,用網(wǎng)站目錄“www.域名.com/m”作為標識分割路徑,得到目錄部分“/yygk/xwzx”。
$html=$this->GetResult();
$html=$this->relative_to_absolute($html,'http://','m.域名.com',$f_url[1].'/');//相對路徑轉換絕對路徑
$html=str_replace('<metacharset="gb2312">','<metacharset="utf-8">',iconv('gbk','utf-8//ignore',$html));//轉換為utf-8編碼聲明,fwrite會以此生成對應編碼的靜態(tài)頁面
$html=str_replace('<a','標簽加target< p="">
$html=str_replace('<img','
/*主要針對編輯器生成的內聯(lián)樣式,將內聯(lián)樣式轉換到head的style標簽中*/
if(preg_match_all('/\sstyle\s*\=\s*[\'"](.*?)[\'"]/',$html,$css)){
$css0=array_unique($css[0]);//過濾重復style
foreach($css0as $k => $v){
$html=str_replace($v,'class="mip_add_css_'.$k.'"',$html);//mip_add_css_為自定義樣式名前綴,可自行修改,但需避免與原有樣式名重復
$temp_name='mip_add_css_'.$k;
$$temp_name=$css[1][$k];
$add_css.='.'.$temp_name.'{'.$css[1][$k]."}\n";
}
$html=str_replace('',"
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!