Einführung in die Verwendung und Produktionsmethoden der mobilen Dreamweaver-Vorlage von dedecms-PHP-Tutorial-php.cn

Die neueste Version des dedecms-Systems hat viele Designs für Mobiltelefone hinzugefügt, DreamWeaverNach dem Update enthält die Standardvorlage die Mobiltelefonvorlage, sodass wir zwei Vorlagen für die Dreamweaver-Website, die Computer-Website-PC-Vorlage und die mobile WAP-Vorlage entwerfen können. Hier stellen wir die Verwendung und Produktion vor Die dedecms Dreamweaver-Vorlagenmethode können Sie bei Bedarf verwenden.

Bei der Erstellung von Vorlagen beziehen wir uns normalerweise auf die Tag-Verwendung in der Standardvorlage von Dreamweaver. Als Nächstes analysieren wir die Verwendung von Mobiltelefonen in der Standardvorlage von Dreamweaver. So erstellen Sie Vorlagen

Hinweis: Dieses Tutorial ist für Webmaster geeignet, die Erfahrung in der Entwicklung von Dreamweaver-Vorlagen haben. Wenn Sie ein Anfänger sind, wird empfohlen, sich mit der Entwicklung von Dreamweaver-PC-Vorlagen vertraut zu machen Erstens. >1. Benennungsregeln für Mobiltelefone

In der Standardvorlage von New Dreamweaver gibt es einige weitere Mobiltelefonvorlagen lauten wie folgt: index_m.htm Startseitenvorlage

index_default_m.htm Kanalseitenvorlage

list_default_m.htm Listenseitenvorlage

list_default_sg_m.htm Liste Seitenvorlage

Article_article_m .htm Inhaltsseitenvorlage

Article_default_m.htm Standardvorlage für Inhaltsseite

search_m.htm Suchseitenvorlage

head_m.htm Top-Vorlage

footer_m.htm Untere Vorlage

Download-Adresse der dedecms-Vorlage: www.php.cn/xiazai/code/dedecms

Webmaster, die mit der Erstellung von Dreamweaver-Website-Vorlagen vertraut sind kann die Entsprechung dieser mobilen Vorlagen auf einen Blick grob verstehen. Es gibt einige Unterschiede in der Verwendung und Produktion dieser Mobiltelefon-Vorlagen und PC-Vorlagen. Lassen Sie uns unten über die spezifischen Unterschiede sprechen 2. Die Unterschiede zwischen Mobiltelefon-Vorlagen und PC-Vorlagen

(1) Die Benennung von Mobiltelefon-Vorlagen ist unterschiedlich

Wie zu sehen ist Aus der Benennung der Mobiltelefonvorlagen oben ergibt sich der Namensunterschied zwischen Mobiltelefonvorlagen und PC-Vorlagen. Fügen Sie einfach „_m“ nach der PC-Vorlage hinzu. Die PC-Homepage-Vorlage ist beispielsweise index.htm und die entsprechende Mobiltelefonvorlage ist index_m. htm; die PC-Listenseitenvorlage ist list_article.htm und die entsprechende Mobiltelefonlistenseitenvorlage ist list_article_m.htm. Und wenn Sie eine PC-Vorlage erstellen, sollten Sie einfach eine entsprechende Mobiltelefonvorlage erstellen und diese wie oben benennen, damit die entsprechende Seite beim Zugriff über Computer und Mobiltelefone normal angezeigt werden kann.

(2) Die von mobilen Vorlagen aufgerufenen Ressourcenspeicherorte sind unterschiedlich.

Beim Erstellen von PC-Vorlagen werden CSS,

und aufgerufene Bilder verwendet alles im Vorlagendateiordner, zum Beispiel sind alle CSS, JS und Bilder in der Standardvorlage darin. Die CSS-, JS-, Bilder- und anderen Ressourcen, die von der mobilen Vorlage aufgerufen werden, befinden sich alle im Ordner /m/as

set

s im Stammverzeichnis der Website. Natürlich können wir den Speicherort des Ressourcenaufrufs in der mobilen Vorlage auf den Vorlagenordner festlegen. Aber ich habe es analysiert und festgestellt, dass es von Vorteil ist, die Standardressourcen für Mobiltelefonvorlagen auf diese Weise aufzurufen. Trennen Sie die Ressourcen für Mobiltelefonvorlagen und die Ressourcen für PC-Vorlagen, sodass wir, wenn wir eine weitere PC-Vorlage erstellen, die vorhandene Mobiltelefonvorlage hinzufügen möchten dazu Wenn es sich um eine neue PC-Vorlage handelt, müssen Sie nur die Mobiltelefon-Vorlagendatei in die neue PC-Vorlage kopieren. CSS, JS und andere Ressourcen des Mobiltelefons müssen nicht berührt werden. Einfach ausgedrückt ist es praktisch für die Ressourcenverwaltung von Mobiltelefonen.

Daher wird empfohlen, die Ressourcen für Mobiltelefonvorlagen genau wie die Standardvorlage im entsprechenden Ordner des Stammverzeichnisses abzulegen. (3) m-Ordner im Stammverzeichnis der Website

Es gibt einen m-Ordner im Stammverzeichnis von New Dreamweaver. Dies ist der Ordner, auf den zugegriffen wird Ich habe gerade gesagt, dass sich die Ressourcen für Mobiltelefonvorlagen im Ordner m befinden. Darüber hinaus befinden sich index.php, list.php und view.php im Ordner m. Wenn wir auf die mobile Site zugreifen, greifen wir tatsächlich auf diese drei Dateien zu und greifen dynamisch auf die mobile Site zu.

Wenn Sie also einen Computer verwenden möchten, um Ihre mobile Website zu überprüfen, gehen Sie folgendermaßen vor: http://Ihr Domainname/m, und Sie können die mobile Website überprüfen.

(4) Einstellungen in der PC-Vorlage

Wenn wir mit einem Mobiltelefon auf die Website zugreifen, wird automatisch zur Mobiltelefonvorlage gesprungen, die das Hinzufügen eines erfordert Springe zur PC-Vorlage. Konvertierter JS-Code. Fügen Sie Code in hinzu.

* Fügen Sie den folgenden Code zur Homepage-Vorlage hinzu:

Der Code lautet wie folgt:

* Fügen Sie Folgendes hinzu Code zur Listenseitenvorlage:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

*Fügen Sie den folgenden Code zur Inhaltsseitenvorlage hinzu

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Das obige js ist der Code, der von der Computer-Website zur mobilen Website springt, und wird verwendet, um Baidu die Adresse der mobilen Website mitzuteilen, die hauptsächlich für SEO verwendet wird.

Nachdem das Mobiltelefon den obigen Code zur PC-Vorlage hinzugefügt hat, springt es automatisch zur mobilen Website-Vorlage, wenn es auf die Website zugreift.

(5) Einstellungen für Mobiltelefonvorlagen

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

Nach dem Login kopieren

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

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

一、栏目超链接不同

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

代码如下:

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

Nach dem Login kopieren

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

代码如下:

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

Nach dem Login kopieren

二、文章列表超链接不同

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

代码如下:

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

Nach dem Login kopieren

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

代码如下:

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

Nach dem Login kopieren

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

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

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

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

总结

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

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung und Produktionsmethoden der mobilen Dreamweaver-Vorlage von dedecms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!