|  首页  |  资讯  |  评测  |  活动  |  学院  |  访谈  |  专题  |  杂志  |  产服  |  
您现在的位置:硅谷网> 学院> 经验>

dedecms织梦手机模板制作方法 手机模板如何使用?

2016-10-22 12:44 作者:佚名 来源:硅谷网综合 HV: 编辑:GuiGu 【搜索试试
最新版的dedecms系统添加了很多针对手机移动端的设计,织梦更新后,默认的 default模板中就包含手机模板,所以我们可以给织梦网站设计双模板,电脑网站pc模板和手机wap模板,下面给大家介绍dedecms织梦手机模板使用和制作的方法,有需要的可以参考借鉴。
 
 

我们在制作模板时通常都会参考织梦默认模板default中的标签使用,所以,接下来我们就来分析一下织梦默认模板default中使用手机模板的制作方法

注意:本教程适合有织梦模板开发经验的站长,如果是新手,建议先去熟悉织梦pc模板开发。

1、手机模板命名规则

在新织梦的default模板中,除了原有的模板外,多了些手机模板,主要手机模板如下:

     index_m.htm 首页模板

     index_default_m.htm 频道页模板

     list_default_m.htm 列表页模板

     list_default_sg_m.htm 列表页模板

     article_article_m.htm 内容页模板

     article_default_m.htm 内容页默认模板

     search_m.htm 搜索页模板

     head_m.htm 顶部模板

     footer_m.htm 底部模板

熟悉织梦电脑网站模板制作的站长,一眼大体就能明白这些手机模板对应的用法和制作。这些手机模板和pc模板在制作、调用上还是有些区别的。下面说一下具体的区别。

2、手机模板和pc模板的不同

(1)手机模板的命名不同

从上面手机模板的命名就可以看出,手机模板和pc模板的命名区别就是在pc模板后加“_m” ,例如pc首页模板是index.htm,对应的手机模板就是index_m.htm ;pc列表页模板是list_article.htm ,对应的手机列表页模板就list_article_m.htm 。

并且制作pc模板时,应该有一个pc模板,就做一个对应的手机模板,命名如上,这样电脑和手机访问时,对应页面都可以正常显示。

(2)手机模板调用的资源位置不同

pc模板制作时,调用的css、js、images都在模板文件夹中,例如默认default模板中的css、js、images都在其中。而手机模板调用的css、js、images等资源都在网站根目录/m/assets文件夹下。

当然我们可以在手机模板中把资源调用的位置设置到模板文件夹内。但我分析了一下,觉的默认的手机模板资源这样调用还是有好处的,把手机模板资源和pc模板 资源分开,这样当我们又做了一个pc模板,想把现有的手机模板添加到这个新pc模板中时,只需要把手机模板文件复制一份到新pc模板中就可以了,手机的 css、js等资源都不用动。简单说,就是对手机资源管理方便。

所以建议手机模板资源按照默认模板一样,放到根目录对应文件夹下。

(3)网站根目录的m文件夹

新织梦的根目录下多了m文件夹,这个就是手机访问的文件夹,刚才说了手机模板资源就在m文件夹下。除此之外m文件夹下还有index.php、list.php、view.php,当我们访问手机站时,其实就是访问这3个文件,动态访问手机站。

所以如果你想用电脑查看一下自己的手机站,方法就是访问:http://你的域名/m ,就可以查看手机网站了。

(4)pc模板中的设置

当我们用手机访问网站时,会自动跳转到手机模板,这需要在pc模板中添加跳转的js代码。在<head></head>添加代码。

* 首页模板中添加如下代码:

 

复制代码
代码如下:

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.php"></p> <p><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else</p> <p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p> <p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-</p> <p>|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?</p> <p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p> <p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.php";}else if</p> <p>(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

* 列表页模板添加如下代码:

 

复制代码
代码如下:

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"></p> <p><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else</p> <p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p> <p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-</p> <p>|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?</p> <p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p> <p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid=</p> <p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

*内容页模板添加如下代码

 

复制代码
代码如下:

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}"></p> <p><script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){}else</p> <p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p> <p>(/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("?</p> <p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p> <p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid=</p> <p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

 

其中上面的js是电脑网站跳转到手机网站的代码,而<meta http-equiv="mobile-agent" ....>是用来告诉百度,手机网站的地址,主要用于seo。

pc模板添加上面代码后,手机访问网站时,就会自动跳转到手机网站模板了。

(5)手机模板的设置

刚才说过了手机网站访问的是网站根目录的m文件夹下的index.php,list.php,view.php ,手机网站是访问动态页面,而不像pc站中的静态页面。

手机模板制作时,有两个地方和pc模板不同。

一、栏目超链接不同

在pc模板中,如导航栏,栏目超链接调用如下:

 

复制代码
代码如下:

{dede:channel type='top' row='10' }</p> <p><a href='[field:typeurl/]' >这是栏目内容</a></p> <p>{/dede:channel}

 

手机模板调用栏目超链接代码如下:

 

复制代码
代码如下:

{dede:channel type='top' row='10' }</p> <p><a href='list.php?tid=[field:id/]' >这是栏目内容</a></p> <p>{/dede:channel}

 

二、文章列表超链接不同

pc模板中文章列表超链接调用代码如下:

 

复制代码
代码如下:

{dede:arclist row='10' }</p> <p><a href='[field:arcurl/]' >这是文章标题</a></p> <p>{/dede:arclist}

 

手机模板调用文章列表超链接代码如下:

 

复制代码
代码如下:

{dede:arclist row='10' }</p> <p><a href='view.php?aid=[field:id/]' >这是文章标题</a></p> <p>{/dede:arclist}

 

除了这两个超链接不一样,其他的织梦标签通用。

(6)默认的手机搜索页模板search_m.htm不能用

经测试发现,默认的手机搜索模板search_m.htm不能用,但用手机搜索时,搜索结果用的是pc搜索模板search.htm 。

这是因为手机模板中搜索也是调用的pc站的搜索功能。如果需要让手机网站可以调用search_m.htm ,就需要单独设置搜索功能页面。

总结

好了,按照以上的步骤完成pc站的跳转,和手机站链接的注意事项,你就可以开始做自己的织梦手机模板了,方法和pc站模板开发类似。开发时,可以多参考默认default的手机模板。感兴趣的朋友们快去动手试试吧,如果有疑问可以留言交流,小编会尽快给大家回复的。


【对“dedecms织梦手机模板制作方法 手机模板如何使用?”发布评论】

版权及免责声明:
① 本网站部分投稿来源于“网友”,涉及投资、理财、消费等内容,请亲们反复甄别,切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质,仅供阅读,不构成具体实施建议,请谨慎对待。据此操作,风险自担。
② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视频,版权均属本网站所有,任何媒体、网站或个人需经本网站许可方可复制或转载,并在使用时必须注明来源【硅谷网】或对应来源,违者本网站将依法追究责任。
③ 注明来源为各大报纸、杂志、网站及其他媒体的文章,文章原作者享有著作权,本网站转载其他媒体稿件是为传播更多的信息,并不代表赞同其观点和对其真实性负责,本网站不承担此类稿件侵权行为的连带责任。
④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容,涉及到侵权、违法等问题,请有关单位或个人速与本网站取得联系(联系电话:01057255600),我们将第一时间核实处理。
广告
相关
·如何把苹果iPhone手机的照片传到苹果Mac电脑?
·dedecms织梦登录插件-QQ登录、微博登录、微信登
·查找我的iPhone详细教程:苹果手机丢了怎么办?
·给手机充电时,先插手机还是先插电源差别很大!
·dedecms批量命令:dede合并栏目、删除栏目方法
·山寨安卓手机刷机教程 不用担心自己不会刷机了
·去掉1个字符,解决织梦移动版无法自动更新问题
·织梦dede后台页面和功能 修改及精简操作方法
头条
新闻来源很重要?将近一半读者根本不关心它! 新闻来源很重要?将近一半读者根本不关心它!
在网络主页上发新闻的好日子早就过去了。今天的受众更愿意把超过一半的流量花在社交媒……
·新闻来源很重要?将近一半读者根本不关心它!
图文
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电
mcafee是什么软件好用吗?McAfee中文译名是什么?
mcafee是什么软件好用吗?McAfee中文译名是
自媒体账号如何申请?各个平台运营方法汇总!
自媒体账号如何申请?各个平台运营方法汇总
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电
最新
·巴西5G不排除华为是什么情况?为何巴西5G不排除华
·如何把苹果iPhone手机的照片传到苹果Mac电脑?
·硅谷有多大面积?美国硅谷有多大?面积多少?
·iframe怎么用?iframe标签属性iframe写法详解!
·mcafee是什么软件好用吗?McAfee中文译名是什么?
热点
·做客、作客、座客和坐客的意思和区别是什么?
·硅谷为什么叫硅谷?硅谷到底是什么意思呢?
·知道UV、VV,CV是什么?PV、UV、IP什么意思?
·自媒体账号如何申请?各个平台运营方法汇总!
·目前微信有什么bug?微信bug是什么意思啊?
旧闻
·百度新闻源:百度新闻源审核、被清理、解封办
·简易教程:如何将iPad mini快速升级到iOS 7 b
·CAXA二维CAD教程:把图纸名默认为文件名
·苹果电脑MAC系统登录远程桌面 如何能够实现?
·从事游戏策划,工作中中最难的一点是什么?
广告
硅谷影像
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电脑?
mcafee是什么软件好用吗?McAfee中文译名是什么?
mcafee是什么软件好用吗?McAfee中文译名是什么?
什么是域名纠错系统?怎么关闭域名纠错系统?
什么是域名纠错系统?怎么关闭域名纠错系统?
董事长属于高管吗?公司董事属于公司高管吗?
董事长属于高管吗?公司董事属于公司高管吗?
server服务:server服务自动停止关闭如何解决?
server服务:server服务自动停止关闭如何解决?
怎么关闭域名纠错系统?什么是域名纠错系统?
怎么关闭域名纠错系统?什么是域名纠错系统?
关于我们·About | 联系我们·contact | 加入我们·Join | 关注我们·Invest | Site Map | Tags | RSS Map
电脑版·PC版 移动版·MD版 网站热线:(+86)010-57255600
Copyright © 2007-2020 硅谷网. 版权所有. All Rights Reserved. <京ICP备12003855号-2>