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 .
* 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('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>Copy after login
* 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('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>Copy after login
*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>Copy after login
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
' row='10' }</p>
<p><a href='[field:typeurl/]' >这是栏目内容</a></p>
<p>{/dede:channel}Copy after login
手机模板调用栏目超链接代码如下：
代码如下:
{dede:channel type='top' row='10' }</p>
<p><a href='list.php?tid=[field:id/]' >这是栏目内容</a></p>
<p>{/dede:channel}Copy after login
二、文章列表超链接不同
pc模板中文章列表超链接调用代码如下：
代码如下:
{dede:arclist row='10' }</p>
<p><a href='[field:arcurl/]' >这是文章标题</a></p>
<p>{/dede:arclist}Copy after login
手机模板调用文章列表超链接代码如下：
代码如下:
{dede:arclist row='10' }</p>
<p><a href='view.php?aid=[field:id/]' >这是文章标题</a></p>
<p>{/dede:arclist}Copy after login
除了这两个超链接不一样，其他的织梦标签通用。
（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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
