• TA的每日心境
    慵懒
    昨日 14:53
  • 报到天数: 158 天

    [LV.7]常住居民III

    1207

    主题

    2942

    帖子

    265

    声威

    管理员

    管理员金笔作者论坛荣誉勋章官方SEO讲师安全认证爱心达人论坛元老

    织梦dedecms手机模板运用

    374 1
    2019-3-31 19:36:43
    织梦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代码。在增加代码。



    主页模板中增加如下代码:


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


    列表页模板增加如下代码:


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


    内容页模板增加如下代码


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



    其间上面的js是电脑网站跳转到手机网站的代码,而是用来告知百度,手机网站的地址,首要用于查找引擎优化。


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


    (5)手机模板的设置

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

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



    一、栏目超链接不同


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

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

    这是栏目内容

    {/dede:channel}


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

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

    这是栏目内容

    {/dede:channel}



    二、文章列表超链接不同


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

    {dede:arclist row='10' }

    这是文章标题

    {/dede:arclist}


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

    {dede:arclist row='10' }

    这是文章标题

    {/dede:arclist}


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


    (6)默许的手机查找页模板search_m.htm不能用



    经测验发现,默许的手机查找模板search_m.htm不能用,但用手机查找时,查找成果用的是pc查找模板search.htm 。

    这是由于手机模板中查找也是调用的pc站的查找功用。假如需求让手机网站能够调用search_m.htm ,就需求独自设置查找功用页面。


    ok,完结pc站的跳转,和手机站链接的留意事项,你就能够开端做自己的织梦手机模板了,办法和pc站模板开发相似。


    开发时,能够多参阅默许default的手机模板。快去试试吧。


    本帖子中包括更多资源

    您需求 登录 才能够下载或检查,没有帐号?参加明升体育

    x
  • TA的每日心境
    伤心
    2019-6-18 21:59
  • 报到天数: 9 天

    [LV.3]偶然看看II

    5

    主题

    11

    帖子

    0

    声威

    VIP会员

    2019-4-2 23:20:46
    一、栏目超链接不同


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

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

    这是栏目内容

    {/dede:channel}


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

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

    这是栏目内容

    {/dede:channel}



    二、文章列表超链接不同


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

    {dede:arclist row='10' }

    这是文章标题

    {/dede:arclist}


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

    {dede:arclist row='10' }

    这是文章标题

    {/dede:arclist}


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









    请问哪哪不同,是我目炫了吗
    您需求登录后才能够回帖 登录 | 参加明升体育