dedeCMS2016全新电脑版+手机版完美结合,无缝跳转-教你织梦怎么做手机端

10 | 11 | 2016

自从接触过Bootstrap框架,现在写简单的企业网站都是按照框架思路来写的,尽量减少重复的代码。

最近做了服务器回收的网站,电脑与手机,看到DEDE有个m文件夹,支持手机版了,于是正好研究下,感觉还不错~ 记录下下次用

首页,模板是在电脑模板后面加 _m.htm

下面是我的模板目录

DEDE电脑模板与手机模板写法

这时候电脑访问地址是:www.wehudong.cn

手机访问地址是:www.wehudong.cn/m

这手机域名有点…..呃,还是要m.wehudong.cn 才完美

这时候就要把主机子域名绑定子目录了

我用的AMH面板Nginx环境,用AMRewrite规则来子域名绑定子目录

if ( $host = 'm.wehudong.cn' ){
 set $subdomain "/m";
 }

应该看得懂,/m就是文件夹名称,

然后,在DEDE后台系统配置参数添加一个变量,填写手机网址

DEDE添加手机域名

之后,在 电脑首页模板 index.htm的head中间添加下面的JS跳转

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mbasehost/}/index.php">
<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|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mbasehost/}/index.php";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>

列表页模板和公司简介之类的单页面模板添加下面的JS跳转,我的是 list_article.htm和list_image.htm

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mbasehost/}/list.php?tid={dede:field.id/}">
<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|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mbasehost/}/list.php?tid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>

详情页添加下面的JS,我的是 article_article.htm

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mbasehost/}/view.php?aid={dede:field.id/}">
<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|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mbasehost/}/view.php?aid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
</script>

关于手机端显示电脑端图片问题,在首页和列表页,图片调用的时候直接写电脑的网址吧,毕竟做好网站后官网网址都只要改一次,用JS弊端还是挺明显~~

DEDE模板手机端调用电脑端图片

但是在文章详情就只能用JS了,这JS适用于所有想给图片路径前面批量添加网址的地方

<script>
 window.onload = function(){
 var aImgs = document.getElementById("xiedandanpic").getElementsByTagName('img');
 for(var i=0;l = aImgs.length,i<l;i++){
 aImgs[i].src = "{dede:global.cfg_basehost/}"+aImgs[i].getAttribute('src');
 }
 };
 </script>

实现后是这样的,id就是文章的层的id,对应修改好就行。

给DEDE图片路径加上电脑端网址

 

放上演示网址,手机端打开自动跳转到m..swkjsz.com

http://www.swkjsz.com/

以前给DEDE做手机版是弄两个主机空间,数据库一样,模板名一样,同样的手机端调用图片要加电脑端的网址,如果是静态的就要两边都更新,有点麻烦,现在好了,可以只用一个主机完美实现织梦CMS电脑版手机无缝跳转。

自从上次升级WP到新版后,wordpress独有的英文符号转义成中文符号优点被继承了~~ 被吐槽到不行,刚刚改好了,复制代码不会是中文符号了~~

打开wp-includes/formatting.php文件,查找 $static_replacements 语句,到下面这两行注释就好了

wordpress英文符号自动转成中文符号修改