Introduction to the use and production methods of dedecms dreamweaver mobile phone template

The latest version of the dedecms system has added a lot of designs for mobile phones, DreamweaverAfter updating , the default default template includes the mobile phone template, so we can design dual templates for the Dreamweaver website, the computer website pc template and the mobile wap template. The following will introduce the use and production of the dedecms Dreamweaver mobile template. Method, you can refer to it if necessary

When making templates, we usually refer to the tag usage in the default template of Dreamweaver, so next we will analyze the use of mobile phones in the default template of Dreamweaver. Template making method

Note: This tutorial is suitable for webmasters who have experience in Dreamweaver template development. If you are a novice, it is recommended to familiarize yourself with Dreamweaver pc template development first.

1. Naming rules for mobile phone templates

In the default template of New Dreamweaver, in addition to the original templates, there are some more mobile phone templates. The main mobile phone templates are as follows:

index_m.htm Home Page 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 template

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

Webmasters who are familiar with the production of Dreamweaver computer website templates can roughly understand the correspondence of these mobile templates at a glance There are some differences in the usage and production of these mobile phone templates and PC templates. Let’s talk about the specific differences between mobile phone templates and PC templates#.

## (1) The naming of mobile phone templates is different

As can be seen from the naming of mobile phone templates above, the naming difference between mobile phone templates and pc templates Just add "_m" after the pc template. For example, the pc home page template is index.htm, and the corresponding mobile phone template is index_m.htm; the pc list page template is list_article.htm, and the corresponding mobile phone list page template is list_article_m.htm.

And when making a pc template, there should be a pc template. Just make a corresponding mobile phone template and name it as above, so that the corresponding page can be displayed normally when accessed by computers and mobile phones.

(2) The resource locations called by mobile phone templates are different.

When making PC templates, the css,

js, and images called are all in the template file. folder, for example, the css, js, and images in the default template are all in it. The css, js, images and other resources called by the mobile template are all in the /m/asset

s folder in the root directory of the website.

Of course we can set the location of the resource call in the mobile template to the template folder. But I analyzed it and found that it is beneficial to call the default mobile phone template resources in this way. Separate the mobile phone template resources and pc template resources, so that when we make another pc template and want to add the existing mobile phone template to this When it is in a new PC template, you only need to copy the mobile phone template file to the new PC template. The css, js and other resources of the mobile phone do not need to be touched. Simply put, it is convenient for mobile phone resource management. Therefore, it is recommended that the mobile phone template resources be placed in the corresponding folder of the root directory as the default template.

(3) m folder in the root directory of the website

There is an m folder in the root directory of New Dreamweaver. This is the folder accessed by the mobile phone. Just now I said that the mobile phone template resources are in the m folder. In addition, there are index.php, list.php, and view.php under the m folder. When we access the mobile site, we actually access these three files and dynamically access the mobile site.

So if you want to use a computer to check your mobile website, the method is to visit: http://your domain name/m, and you can check the mobile website.

(4) Settings in the pc template

When we access the website with a mobile phone, it will automatically jump to the mobile phone template. This requires adding a jump to the pc template. Converted js code. Add code in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1.

* Add the following code to the homepage template:

The code is as follows:

<meta http-equiv="mobile-agent" content="
for
mat=xhtml;url={dede:global.cfg_mobileurl/}/index.php"></p>
<p><script type="text/
javascript
">
if
(window.location.to
String
().indexOf(&#39;pref=padindex&#39;) != -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>

* Add the following code to the list page template:

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(&#39;pref=padindex&#39;) != -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(&#39;pref=padindex&#39;) != -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>

The above js is The computer website jumps to the code of the mobile website, and 1f5edd51e4c6ff7496895d0b99e04c2b is used to tell Baidu the address of the mobile website, mainly used for SEO.

After adding the above code to the pc template, when the mobile phone accesses the website, it will automatically jump to the mobile website template.

(5) Mobile phone template settings

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

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

一、栏目超链接不同

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

代码如下:

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

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

代码如下:

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

二、文章列表超链接不同

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

代码如下:

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

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

代码如下:

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

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

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

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

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

总结

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

The above is the detailed content of Introduction to the use and production methods of dedecms dreamweaver mobile phone template. For more information, please follow other related articles on the PHP Chinese website!