Introduction à l'utilisation et aux méthodes de production du modèle mobile dedecms dreamweaver

La dernière version du système dedecms a ajouté de nombreux designs pour téléphones mobiles, Dreamweaver Après la mise à jour, le modèle par défaut inclut le modèle de téléphone mobile, nous pouvons donc concevoir des modèles doubles pour le site Web Dreamweaver, le modèle PC de site Web informatique et le modèle wap mobile. Nous présenterons ici l'utilisation et la production de la méthode dedecms Dreamweaver mobile template, vous pouvez vous y référer si nécessaire

Lors de la création de modèles, nous nous référons généralement à l'utilisation des balises dans le modèle par défaut de Dreamweaver. Nous analyserons donc ensuite l'utilisation des téléphones mobiles. dans le modèle par défaut de Dreamweaver. Comment créer des modèles

Remarque : ce didacticiel convient aux webmasters ayant de l'expérience dans le développement de modèles Dreamweaver. Si vous êtes novice, il est recommandé de vous familiariser avec le développement de modèles PC Dreamweaver. d'abord. >1. Règles de dénomination des modèles de téléphone mobile

Dans le modèle par défaut de New Dreamweaver, en plus des modèles d'origine, il existe d'autres modèles de téléphone mobile. sont les suivants : index_m.htm Modèle de page d'accueil

index_default_m.htm Modèle de page de chaîne

list_default_m.htm Modèle de page de liste

list_default_sg_m.htm Liste modèle de page

modèle de page de contenu article_article_m .htm

modèle par défaut de page de contenu article_default_m.htm

modèle de page de recherche search_m.htm

modèle supérieur head_m.htm

footer_m.htm Modèle inférieur

Adresse de téléchargement du modèle dedecms : www.php.cn/xiazai/code/dedecms

Webmasters familiers avec la production de modèles de sites Web Dreamweaver peut comprendre à peu près la correspondance de ces modèles mobiles en un coup d'œil. Il existe quelques différences dans l'utilisation et la production de ces modèles de téléphone mobile et de ces modèles PC. Parlons des différences spécifiques ci-dessous

. 2. Les différences entre les modèles de téléphone mobile et les modèles PC

(1) La dénomination des modèles de téléphone mobile est différente

Comme on peut le voir à partir de la dénomination des modèles de téléphone mobile ci-dessus, la différence de dénomination entre les modèles de téléphone mobile et les modèles de PC Ajoutez simplement "_m" après le modèle de PC. Par exemple, le modèle de page d'accueil du PC est index.htm et le modèle de téléphone mobile correspondant est index_m. htm ; le modèle de page de liste de PC est list_article.htm et le modèle de page de liste de téléphones mobiles correspondant est list_article_m.htm. Et lors de la création d'un modèle PC, il devrait y avoir un modèle PC. Créez simplement un modèle de téléphone mobile correspondant et nommez-le comme ci-dessus, afin que la page correspondante puisse être affichée normalement lorsqu'elle est accessible par des ordinateurs et des téléphones portables.

(2) Les emplacements de ressources appelés par les modèles mobiles sont différents

Lors de la création de modèles PC, les CSS, js et les images appelées sont tout se trouve dans le dossier du fichier modèle, par exemple, les fichiers CSS, JS et les images du modèle par défaut s'y trouvent tous. Les CSS, js, images et autres ressources appelées par le modèle mobile se trouvent tous dans le dossier /m/as

set

s du répertoire racine du site Web. Bien sûr, nous pouvons définir l'emplacement de l'appel de ressource dans le modèle mobile sur le dossier du modèle. Mais je l'ai analysé et j'ai découvert qu'il est avantageux d'appeler les ressources de modèle de téléphone mobile par défaut de cette manière. Séparez les ressources de modèle de téléphone mobile et les ressources de modèle de PC, de sorte que lorsque nous créons un autre modèle de PC et que nous souhaitons ajouter le modèle de téléphone mobile existant. à cela Lorsqu'il s'agit d'un nouveau modèle PC, il vous suffit de copier le fichier du modèle de téléphone mobile dans le nouveau modèle PC. Les CSS, js et autres ressources du téléphone mobile n'ont pas besoin d'être touchés. En termes simples, il est pratique pour la gestion des ressources du téléphone mobile. Par conséquent, il est recommandé que les ressources du modèle de téléphone mobile soient placées dans le dossier correspondant du répertoire racine, tout comme le modèle par défaut.

(3) dossier m dans le répertoire racine du site Web

Il y a un dossier m dans le répertoire racine de New Dreamweaver. Il s'agit du dossier auquel accède le. téléphone mobile. Je viens de dire que les ressources du modèle de téléphone mobile se trouvent dans le dossier m. De plus, il y a index.php, list.php et view.php sous le dossier m Lorsque nous accédons au site mobile, nous accédons en fait à ces trois fichiers et accédons dynamiquement au site mobile. Donc, si vous souhaitez utiliser un ordinateur pour consulter votre site Web mobile, la méthode consiste à visiter : http://votre nom de domaine/m, et vous pourrez consulter le site Web mobile.

(4) Paramètres dans le modèle PC

Lorsque nous accédons au site Web avec un téléphone mobile, il passera automatiquement au modèle de téléphone mobile, ce qui nécessite l'ajout d'un passez au modèle PC Code js converti. Ajoutez du code dans .

* Ajoutez le code suivant au modèle de page d'accueil :

Le code est le suivant :

* Ajoutez ce qui suit code au modèle de page de liste :

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

Le code est le suivant :

*Ajoutez le code suivant au modèle de page de contenu

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

Le code est le suivant :

Le js ci-dessus est le code qui passe du site Web de l'ordinateur au site Web mobile, et est utilisé pour indiquer à Baidu l'adresse du site Web mobile, principalement utilisé pour le référencement.

Après avoir ajouté le code ci-dessus au modèle PC, lorsque le téléphone mobile accède au site Web, il passe automatiquement au modèle de site Web mobile.

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

(5) Paramètres du modèle de téléphone portable

刚才说过了手机网站访问的是网站根目录的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的手机模板。感兴趣的朋友们快去动手试试吧，如果有疑问可以留言交流，小编会尽快给大家回复的。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!