dedecms电脑网站怎样建设手机网站使电脑手机同步访问

dedecms网站扩展手机网站—共用数据库真正做到电脑手机同步访问,原pc站无需改动,对原pc站无任何影响

在如今无线互联网大潮的冲击下,越来越多的pc网站访问量下降,首当其冲的就是以pc网站为生的站长们,为了顺应无线互联网的要求,站长们很有必要为自己的pc网站扩展一套手机网站,更早的抓住手机用户的流量,使自己的网站更好的生存下去。看到这篇文章你应该感到庆幸,这儿会给你介绍一种最简单快速扩展手机网站的方法,对你正在运行的pc网站毫无影响。注意本文只针对利用dedecms系统建设的网站。

原dedecms系统优缺点分析:根据dedecms建站的思路,系统文件不变,改变网站模板就可以建一个新的网站,但是目前dedecms只支持一个数据库对应一套网站模板,系统自带的wap手机模板模式已经不忍直视,怎能满足目前的手机浏览时代。很多有追求的站长为了满足无线互联网大潮的需求,只能建两个网站,一个pc站一个手机站,并且同时维护两套数据相当麻烦,数据同步也很费劲。

dedecms扩展手机网站二次开发思路:这是我根据dedecms v5.7 扩展开发了手机网站系统,原pc网站系统不受影响,让一个数据库同时对应两套模板(一套pc模板和一套手机模板),当在pc端访问时,还是按原来的页面模板进行展示,但当在手机端访问时,通过判断访问设备为手机,系统自动调用手机模板进行展示,从而达到数据统一、模板分离的效果。无论客户用什么设备进行访问,网站总是以最合适、很友好的页面展示给顾客,从前增加网站的吸引力。


扩展手机网站原则: 在不改变原网站文件的前提下,仅增加(不删除、不改动)几个系统文件和一套手机模板(手机模板可以根据自己的需要随时更换)。


以下为在原pc网站的基础上扩展手机网站的步骤:


一、增加的系统文件列表:


1、plus 文件夹下面 增加 mlist.php  和  mview.php 

    (1)mlist.php 实现pc端和手机端“列表页面”的展现分离


    (2)mview.php实现pc端和手机端“文章页面”的展现分离


 2、include 文件夹下增加 arc.mobile.class.php 、arc.mobilelist.class.php 和 arc.mobilelistle.class.php 

    (1)arc.mobile.class.php 为手机模板增加的文档类


    (2)arc.mobilelist.class.php 为手机模板增加的自由列表类


    (3)arc.mobilelistle.class.php 为单表模型列表视图类


 3、statics/js 文件下增加 mobileDetect.js ,该文件下的mobile_device_detect()方法用于检测是pc浏览还是手机浏览,如果是手机浏览会跳转到手机浏览模板路径。


二、增加手机模板文件方法:


1、templets/default 文件夹下放置手机模板文件,与pc端模板文件放在一个文件夹下,如果默认目录不是default请自行修改。


2、为了与同文件下的pc端模板文件区分,在手机模板文件名字前都加一个 ’m’ ;


3、为了保证pc端和手机端页面保持同步,主要的模板文件数量和命名要保证一一对应,但一些广告模板文件或其他的个性模板文件除外;


  如:index.htm  对应 mindex.htm

        list_article.htm 对应 mlist_article.htm

        article_article.htm 对应 marticle_article.htm 

        head.htm 对应 mhead.htm

        footer.htm 对应mfooter.htm 等等。

 4、当然不能少了手机模板的样式、脚本和图片所在的文件夹 mstatics,可根据手机模板和自己网站的情况自行修改该文件的名字。



三、对“pc端模板”增加检测脚本


1、在 index.htm 文件中的<head></head>标签之间加入以下脚本文件


   <!--引入手机浏览转换js开始-->

  <script language="javascript" type="text/javascript" src="/statics/js/mobileDetect.js"></script>

  <script>

    mobile_device_detect("/mindex.html”);//这里设定的手机端的首页位置为 /mindex,html

  </script>

 <!--引入手机浏览转换js结束-->


2、在 list_article.htm文件(包括其他以list_开头的模板文件)中的<head></head>标签之间加入以下脚本文件


   <!--引入手机浏览转换js开始-->

  <script language="javascript" type="text/javascript" src="/statics/js/mobileDetect.js"></script>

  <script>

    mobile_device_detect("/plus/mlist.php?tid={dede:field.typeid/}");//这里设定的手机端的列表页面路径, tid动态                                                                                          //获取,保证了pc端和手机端列表的同步性。

  </script>

 <!--引入手机浏览转换js结束-->


3、在 article_article.htm文件(包括其他以article_开头的模板文件)中的<head></head>标签之间加入以下脚本文件


    <!--引入手机浏览转换js开始-->

  <script language="javascript" type="text/javascript" src="/statics/js/mobileDetect.js"></script>

  <script>

    mobile_device_detect("/plus/mview.php?aid={dede:field.id/}"); //这里设定的手机端的文章页面路径,aid动态                                                                                          //获取,保证了pc端和手机端文章的同步性。

  </script>

 <!--引入手机浏览转换js结束-->


四、网站更新的方法


1、网站列表和文章的生成方法:

 看了第三个步骤,就能发现,手机端除了首页需要生成之外,列表和文章都是动态浏览的,无需更新生成;

所以每次更新网站栏目和文档时 就按原来更新pc端网站的方法即可。



2、网站首页生成方法:按先生成手机端首页再生成pc端首页的顺序生成;


 (1)生成手机端首页:dedecms后台 生成—更新主页HTML—选择主页模板改为:default/mindex.htm;主页位置改为:../mindex.html;首页模式选 ‘生成静态’ — 更新主页HTML    完成。

 (2)生成pc端首页:dedecms后台 生成—更新主页HTML—选择主页模板改为:default/index.htm;主页位置改为:../index.html;首页模式选 ‘生成静态’ — 更新主页HTML    完成。


经过以上四个步骤,所有的工作就完了,现在你就可以分别用pc和手机测试一下网站了。



演示网站地址: www.jieyan99.com  (请分别用电脑和手机访问该网址 进行测试 或用手机扫描二维码访问)



网站首页





手机站首页




手机列表页头部



列表页显示菜单



手机列表页尾部



手机文章页头部



手机文章页尾部



dedecms网站扩展手机网站的系统文件请联系 qq :512075046 (包指导安装),非诚勿扰!






  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值