Dedecms 模板中心

您现在的位置: 秀站网 > 织梦大学 > 手机站教程 >

dedecms织梦手机站模板入门教程

来源:重庆时时彩独胆技巧 发布时间:2016-01-06热度: ℃我要评论
织梦2015年6月8日更新后,就添加了很多针对手机移动端的设计,最大的设计就是添加了生成二维码的织梦标签和织梦手机模板功能,织梦更新后,默认的 default模板中就包含手机模板,所以我们可以...

本文地址:http://www.helaal.com/dedecms_m/700.html
文章摘要:dedecms织梦手机站模板入门教程_手机站教程_织梦大学,泡沫之夏水滴岿然独存,淘汰制搬上金石丝竹。

织梦2015年6月8日更新后,就添加了很多针对手机移动端的设计,最大的设计就是添加了生成二维码的织梦标签和织梦手机模板功能,织梦更新后,默认的 default模板中就包含手机模板,所以我们可以给织梦网站设计双模板,电脑网站pc模板和手机wap模板,很方便。

我们在制作模板时通常都会参考织梦默认模板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">

 

<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_mobileurl/}/index.php";}else if

(/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/}">

 

<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_mobileurl/}/list.php?tid=

{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/}">

 

<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_mobileurl/}/view.php?aid=

{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' }

   <a href='[field:typeurl/]' >这是栏目内容</a>

{/dede:channel}

 

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

{dede:channel type='top' row='10' }

   <a href='list.php?tid=[field:id/]' >这是栏目内容</a>

{/dede:channel}

 

二、文章列表超链接不同

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

{dede:arclist row='10'  }

<a href='[field:arcurl/]' >这是文章标题</a>

{/dede:arclist}

 

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

{dede:arclist row='10'  }

<a href='view.php?aid=[field:id/]' >这是文章标题</a>

{/dede:arclist}

 

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

 

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

这是因为手机模板中搜索也是调用的pc站的搜索功能。如果需要让手机网站可以调用search_m.htm ,就需要单独设置搜索功能页面。具体内容太长了,所以请参考《织梦dedecms怎样设置不同的搜索页模板》。

ok,完成pc站的跳转,和手机站链接的注意事项,你就可以开始做自己的织梦手机模板了,方法和pc站模板开发类似。开发时,可以多参考默认default的手机模板。快去试试吧。祝你成功。

本文地址:http://www.helaal.com/dedecms_m/700.html

    紫光ocr文字识别软件 时时彩冷热软件 信誉高的时时彩平台 银狐时时彩平台 极速时时彩开奖结果
    时时彩代理利润怎么样 时时彩自己刷量 董狐黄金胆码软件 99彩票娱乐平台手机版 时时彩源代码
    时时彩怎么玩才赚钱 天津时时彩全天计划 法国酷彩官网 时时彩平台广告词 时时彩定位胆怎么玩
    守财奴时时彩软件破解 老时时彩杀号定胆 江西时时彩五星综合走势图彩经网 重庆时时彩咋买容易赚 2017时时彩平台排行榜
    天津11选5走势图任选码型走势图 天津快乐10分钟现场开奖结果查询 三公游戏安卓版 排列三324期试机号计划?体彩排列三和值跨度表计划?最新排列三预测计划?排列三仙机图 体彩七星彩开奖号码
    北京赛车长期稳赚 在家兼职赚钱 上海十一选五四中四 广西风彩快3遗漏值 3d 好运彩图库
    海南飞鱼彩票技巧 极速赛车2多少钱 上海十一选五绝杀技巧 江苏快三一定牛二同号单选遗漏计划 黑龙江36选7开奖结果查询
    二八杠老千教学,赌技扑克二八杠视频 福利双色球开奖时间,双色球综合走势图,双色球摇奖器,双色球2014115 青海快三今天走势图 吉林时时彩开奖结果走势图百度 福建体彩36选7