Introduction to the method of using and making the dedecms-weaving dream Cell phone template

The latest version of the DEDECMS system adds a lot of design for mobile mobile end, weaving dream http://www.php.cn/php/php-tp-renewal.html "target=" _blank "> update, the default The default template contains the phone template, so we can give the Dream Web Design double template, PC website pc template and mobile phone WAP template, the following to introduce dedecms weaving dream phone template use and production methods, there is a need for reference.

When we make a template, we usually refer to the label used in the default template, so we'll analyze how to make the default template for weaving dreams. How to use the phone template

Note: This tutorial is suitable for the master who has the experience of weaving dream template development, if it is novice, it is recommended to first familiar with the development of Dream PC template.

1, cell phone template naming rules

In the new dream of the default template, in addition to the original template, more mobile templates, the main mobile phone template is as follows:

Index_m.htm Home Template

Index_default_m.htm Channel page Template

List_default_m.htm List page Template

List_default_sg_m.htm List page Template

Article_article_m.htm content page templates

Article_default_m.htm content Page Default Template

Search_m.htm Search Page Template

head_m.htm Top Template

Footer_m.htm Bottom Template

Dedecms template Download Address: www.php.cn/xiazai/code/dedecms

Familiar with the Weaving Dream Computer site template production Webmaster, a glance can understand these mobile phone template corresponding usage and production. These mobile phone templates and PC templates are still somewhat different in making and calling. Here are the specific differences.

2, mobile phone template and PC template is different

(1) The name of the phone template is different

From the name of the phone template above can be seen, the phone template and PC template naming difference is in the PC template after adding "_m", such as the PC home template is index.htm, the corresponding cell phone template is index_m.htm; PC List page template is list_article.htm, The corresponding Phone List page template is list_article_m.htm.

And when making the PC template, should have a PC template, do a corresponding phone template, named as above, so that the computer and mobile phone access, the corresponding page can be displayed normally.

(2) The resource location of phone template call is different

When the PC template is made, the calling CSS, JS, and images are all in the template folder, such as CSS, JS, images in the default template. and the cell phone template called CSS, JS, images and other resources are in the site root directory/m/assets folder.

Of course we can set the location of the resource call to the template folder in the phone template. But I analyzed, feel the default phone template resources Such call still has the advantage, the cell phone template resources and the PC template resources, so when we do a PC template, want to add the existing mobile phone template to this new PC template, just need to copy the phone template files to the new PC template can be The mobile phone CSS, JS and other resources are not moving. Simply put, it is convenient for the management of mobile phone resources.

It is recommended that the phone template resource be placed under the root directory, as in the default template.

(3) M folder of the root directory of the Web site

The new dream of the root directory of more M folder, this is the mobile phone access folder, just said the cell phone template resources in the M folder. In addition to the M folder there are index.php, list.php, view.php, when we visit the mobile station, is actually access to these 3 files, dynamic access to the mobile station.

So if you want to use a computer to view your cell phone station, the method is to visit://your domain name/m, you can view the mobile website.

(4) settings in the PC template

When we use the mobile phone to access the site, will automatically jump to the phone template, which requires the PC template to add the Jump JS code. Add code in

* Add the following code to the homepage template:

The code is as follows:

<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>

* The list page template adds the following code:

The code is as follows:

<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>

* Add the following code to the content page template

The code is as follows:

<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>

One of the above JS is the computer site to jump to the mobile phone site code, and <meta http-equiv= "Mobile-agent" ....> is used to tell Baidu, mobile site address, mainly used for SEO.

PC template After adding the above code, mobile phone access to the site, it will automatically jump to the mobile site template.

(5) Settings for mobile phone templates

Just said that the mobile site access is the site root directory of the M folder under the index.php,list.php,view.php, mobile site is to access dynamic pages, and not like a static page in the PC station.

When you make a phone template, there are two different places and PC templates.

First, column hyperlinks are different

In the PC template, such as the navigation bar, the column hyperlink is called as follows:

The code is as follows:

{dede:channel type= ' top ' row= '}</p><p><a href= ' [field:typeurl/] ' > This is the column content </a></p> <p>{/dede:channel}

Cell phone template Call column hyperlink code is as follows:

The code is as follows:

{dede:channel type= ' top ' row= '}</p><p><a href= ' List.php?tid=[field:id/] ' > This is the column content </a> </p><p>{/dede:channel}

Second, the article List of hyperlinks are different

The article List hyperlink call code in the PC template is as follows:

The code is as follows:

{dede:arclist row= '}</p><p><a href= ' [field:arcurl/] ' > This is the article title </a></p><p>{/ Dede:arclist}

The phone template calls the article List hyperlink code as follows:

The code is as follows:

{dede:arclist row= '}</p><p><a href= ' View.php?aid=[field:id/] ' > This is the article title </a></p> <p>{/dede:arclist}

In addition to these two hyperlinks are not the same, other weaving dream label generic.

(6) The default Mobile search page template search_m.htm not available

The test found that the default mobile search template search_m.htm can not be used, but when using mobile phone search, search results using the PC Search template search.htm.

This is because search in the phone template is also the search function of the calling PC station. If you need to make a mobile site call search_m.htm, you need to set up a separate search function page.

Summarize

OK, follow the steps above to complete the PC station jump, and the phone station link notes, you can start to do your own dream phone template, method and PC station template development similar. When developing, you can refer to the phone template for default defaults more. Interested friends quickly to try it, if there is doubt can message exchange, small series will reply to everyone as soon as possible.