但忘无妨 發表於 2023-8-4 00:00:00

织梦dedecms gbk站点转utf8之mip改造方案分享

<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        前言:</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        近期尝试对一个做过跳转适配的dedecms/gbk手机站进行整站mip改造,经过一系列思路完善和测试,终于完成,回顾下过程,主要问题可分为以下几类:<br>
        1、非utf-8站点的编码问题<br>
                 前些时候宋同学在站长社区发布了新装utf-8版cms和转换数据库编码的教程,我刚开始也是类似思路,但因为站点经过二次开发以及包含一些乱七八糟的附加文件等,重装cms很难复原之前的修改,此思路卒。后又尝试在数据库调用时以gbk编码读取,测试生成后虽大体上浏览正常,但还是存在些许后续问题和少部分乱码,也放弃了该方案。最终,灵光一闪——为什么要在程序执行过程中纠结?完全可以在生成静态页面时进行替换整改啊!顿时柳暗花明之感油然而生,测试果然可行,之后遇到后续问题(如下面问题2、3)也因此思路而变得易解决了。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        2、路径问题,&lt;a&gt;、&lt;img&gt;/&lt;mip-img&gt;等标签中的相对路径需均转换为完整url,这个在目前教程里貌似没有明确提出,根目录相对路径还好,主要是相对当前页面路径转换完整url需加上所在目录有些难度(特别是标签调用生成的相对路径,如分页)。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        3、内联样式问题<br>
        模板里的内联样式可以手动整改,虽烦琐但难度不大,主要问题在于后台发布文章时,cms编辑器会自动生成包括内联样式在内的各种不符合mip规则的原始代码,除了折腾一下对编辑器进行修改,其他也很难解决了。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        4、js问题<br>
                 mip规范局限了js的使用,这个的确挺头疼的,好在我改造的站点内js不多,所以删掉部分效果和使用现有组件替换,也凑合解决了此问题。不过还是希望百度mip团队能在考虑下此方面的规范方案优化,不少站点有很多js代码且不能去除,全部以组件形式提交也很费事且需要一定的程序基础,其他问题还可以按统一教程去解决,但js上的mip改造却无法如此,按照目前的限制会导致很多站长因此一点就不得不放弃mip改造。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        5、其他小问题<br>
                 ·发现少部分样式有冲突,需根据实际情况对本身css进行局部修改。<br>
                 ·发现mip cache无法识别站点中<u>图片</u>的302跳转,如原站使用302跳转的图片,mip生效后无法显示图片。该问题已和百度技术人员沟通,说后续可以考虑支持,目前我自己加了一段代码对路径做了下处理。<br>
                 ·组件使用bug(如mip-carousel多图轮播图片套&lt;a&gt;链接会导致图片显示空白,且无法自适应屏幕)。<br>
                 ·mip引入提交后就回显个success,也没有提交记录和状态,用户体验上有所欠缺。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        <strong>正题:基于dedecms/gbk的整站mip改造</strong></p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        第一部分:模板修改</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        1、js部分:删除或使用现有组件替换</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        2、调用百度mip文件:</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        head里加&lt;link rel="stylesheet" type="text/css"href="https://mipcache.bdstatic.com/static/mipmain-v1.1.1.css"&gt;<br>
        body里加</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        3、head里加&lt;link rel="canonical"href="{dede:global.cfg_basehost/}{dede:field name='arcurl'/}" &gt;,通过dedecms标签直接调用当前页url。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        4、外部通用css文件:建议将css文件中的样式代码嵌入&lt;style mip-custom&gt;…&lt;/style&gt;中,另存为模板文件(如css.htm),用{dede:includefilename="css.htm"/}替换相关模板中的&lt;link rel="stylesheet" type="text/css"href="…" /&gt;。<br>
        模板中的内联css可人工进行查找替换,合并至&lt;stylemip-custom&gt;中。(虽在下面代码中可以自动进行处理,但从静态文件生成性能角度考虑,还是建议人工先将模板中的内联样式一次性整改好。)</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        注:以上操作大多可通过批量查找替换来完成,看似需要修改很多,但实际工作量并不大。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        <br><strong>第二部分:程序文件修改</strong></p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        · 静态生成移动站:</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        找到 /include/dedetag.class.php文件中解析模板输出为文件的函数:<br>
            function SaveTo($filename)<br>
            {<br>
                $fp = @fopen($filename,"w")or die("DedeTag Engine Create File False");<br>
                fwrite($fp,$this-&gt;GetResult());<br>
                fclose($fp);<br>
        }</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        替换为(部分代码可根据实际情况进行改动):</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
             //路径转换函数文件。$content:代码源,$feed_url:首页,$f_url:相对路径的目录部分<br>
             function relative_to_absolute($content,$protocol, $domain, $f_url) {  <br>
                           //根目录相对路径(如href="/a/b.html")转换<br>
                           $new_content =preg_replace('/href\s*\=\s*([\'"])\s*\//','href=\\1'.$protocol.$domain.'/', $content);<br>
                           $new_content =preg_replace('/src\s*\=\s*([\'"])\s*\//', 'src=\\1'.$protocol.$domain.'/',$new_content);<br>
                           //当前页相对路径(如href="a/b.html")转换<br>
                           $new_content =preg_replace('/href\s*\=\s*([\'"])(?!(http|https):\/\/)/','href=\\1'.$protocol.$domain.$f_url,$new_content);<br>
                           $new_content =preg_replace('/src\s*\=\s*([\'"])(?!(http|https):\/\/)/','src=\\1'.$protocol.$domain.$f_url, $new_content);<br>
                           return $new_content;<br>
             }</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
            function SaveTo($filename)<br>
            {                 <br>
                $fp=@fopen($filename,"w") ordie("DedeTag Engine Create File False");<br>
                           if(substr($_SERVER['PHP_SELF'],-6)=='_m.php'||substr($filename,-13)=='/m/index.html'){ //跳转适配站识别是否为移动端生成,不影响pc端的gbk编码。移动端为独立站点需去掉此判断条件。<br>
                                    $f_url=explode('www.域名.com/m',dirname($filename));//分割路径,获取当前页相对路径的目录部分<br>
                                    //如dirname($filename)得到的本地绝对路径为D:/wwwroot/www.域名.com/m/yygk/xwzx,用网站目录“www.域名.com/m”作为标识分割路径,得到目录部分“/yygk/xwzx”。<br>
                                    $html=$this-&gt;GetResult();<br>
                                    $html=$this-&gt;relative_to_absolute($html,'http://','m.域名.com',$f_url.'/');//相对路径转换绝对路径<br>
                                    $html=str_replace('&lt;metacharset="gb2312"&gt;','&lt;metacharset="utf-8"&gt;',iconv('gbk','utf-8//ignore',$html)); //转换为utf-8编码声明,fwrite会以此生成对应编码的静态页面<br>
                                    $html=str_replace('&lt;a','&lt;a target="_blank" ',$html); //&lt;a&gt;标签加target<br>
                                    $html=str_replace('&lt;img','&lt;mip-img ',$html);  //替换&lt;img&gt;标签</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
                                    /* 主要针对编辑器生成的内联样式,将内联样式转换到head的style标签中 */<br>
                                    if(preg_match_all('/\sstyle\s*\=\s*[\'"](.*?)[\'"]/',$html,$css)){<br>
                                             $css0=array_unique($css);//过滤重复style                                 <br>
                                             foreach($css0as $k =&gt; $v){<br>
                                                       $html=str_replace($v,'class="mip_add_css_'.$k.'"',$html); //mip_add_css_为自定义样式名前缀,可自行修改,但需避免与原有样式名重复<br>
                                                       $temp_name='mip_add_css_'.$k;<br>
                                                       $$temp_name=$css[$k];<br>
                                                       $add_css.='.'.$temp_name.'{'.$css[$k]."}\n";<br>
                                             }<br>
                                             $html=str_replace('&lt;stylemip-custom&gt;',"&lt;style mip-custom&gt;\n".$add_css,$html);<br>
                                    }<br>
                                    fwrite($fp, $html);<br>
                           }else{ //pc端执行<br>
                                    fwrite($fp,$this-&gt;GetResult());<br>
                           }<br>
                fclose($fp);<br>
            }</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        注:该方案初步测试成功,因生成静态文件时处理程序增加,理论上来说会对生成效率有所影响。另外,不排除存在问题的可能性,如有问题或其他想法可回帖共同研究探讨。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        <strong>· 默认动态移动站:</strong><br>
        1、修改/m目录下index.php、list.php、view.php三个php文件的编码,改为utf-8。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        2、找到 /include/dedetag.class.php文件中解析模板直接输出的函数:<br>
            function Display()<br>
            {<br>
                echo $this-&gt;GetResult();<br>
            }<br>
        替换为:<br>
            function Display()<br>
            {<br>
                $html=str_replace('&lt;meta charset="gb2312"&gt;','&lt;meta charset="utf-8"&gt;',$this-&gt;GetResult()); //转换为utf-8编码声明,此处源内容$this-&gt;GetResult()不需要转编码<br>
                echo $html;<br>
            }</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
        如此即可以utf-8编码输出动态页面,其他处理可参照上面静态生成站点方案中的代码。 </p>
頁: [1]
查看完整版本: 织梦dedecms gbk站点转utf8之mip改造方案分享