Dedecms dreamweaver 휴대폰 템플릿의 사용 및 제작 방법 소개

dedecms 시스템의 최신 버전에는 휴대폰용 디자인이 많이 추가되었습니다. Dreamweaver 업데이트 이후 기본 기본 템플릿에는 휴대폰 템플릿이 포함되어 드림위버 웹사이트, 컴퓨터 웹사이트 PC 템플릿, 모바일 wap 템플릿의 듀얼 템플릿을 디자인할 수 있습니다. 여기서는 사용 및 제작에 대해 소개하겠습니다. Dedecms 드림위버 모바일 템플릿 방식은 필요하시면 참고하시면 됩니다.

템플릿 제작시에는 보통 드림위버 기본 템플릿에 있는 태그 사용법을 참고하므로 다음으로는 휴대폰 활용에 대해 분석해보겠습니다.

참고: 이 튜토리얼은 Dreamweaver 템플릿 개발 경험이 있는 웹마스터에게 적합합니다. 초보자라면 Dreamweaver PC 템플릿 개발에 익숙해지는 것이 좋습니다. 먼저 >1. 휴대폰 템플릿 명명 규칙

New Dreamweaver의 기본 템플릿에는 기본 템플릿 외에 몇 가지 휴대폰 템플릿이 더 있습니다. index_m.htm 홈 페이지 템플릿

index_default_m.htm 채널 페이지 템플릿

list_default_m.htm 목록 페이지 템플릿

list_default_sg_m.htm 목록 페이지 템플릿

article_article_m .htm 콘텐츠 페이지 템플릿

article_default_m.htm 콘텐츠 페이지 기본 템플릿

search_m.htm 검색 페이지 템플릿

head_m.htm 상단 템플릿

footer_m.htm 하단 템플릿

dedecms 템플릿 다운로드 주소: www.php.cn/xiazai/code/dedecms

드림위버 웹사이트 템플릿 제작에 익숙한 웹마스터 이러한 모바일 템플릿의 대응을 한눈에 알 수 있습니다. 이러한 모바일 템플릿과 PC 템플릿의 사용 및 제작에는 몇 가지 차이점이 있습니다. 아래에서는

2. 휴대폰 템플릿과 PC 템플릿의 차이점

(1) 휴대폰 템플릿의 명칭이 다릅니다

보시다시피 위의 휴대폰 템플릿 이름에서 휴대폰 템플릿과 PC 템플릿의 이름 차이는 PC 템플릿 뒤에 "_m"만 추가하면 됩니다. 예를 들어 PC 홈페이지 템플릿은 index.htm이고, 해당 휴대폰 템플릿은 index_m입니다. htm; PC 목록 페이지 템플릿은 list_article.htm이고 해당 휴대폰 목록 페이지 템플릿은 list_article_m.htm입니다. 그리고 PC템플릿 제작시에는 PC템플릿이 있어야 하며, 위와 같이 해당 휴대폰 템플릿을 만들어서 이름을 지정해주시면 컴퓨터, 휴대폰 접속 시 해당 페이지가 정상적으로 표시될 수 있습니다.

(2) 모바일 템플릿에서 호출하는 리소스 위치가 다릅니다

PC 템플릿을 만들 때 호출되는 CSS, js, 이미지는 예를 들어 기본 템플릿의 CSS, js 및 이미지가 모두 템플릿 파일 폴더에 있습니다. 모바일 템플릿에서 호출되는 CSS, js, 이미지 및 기타 리소스는 모두 웹사이트 루트 디렉터리의 /m/as

set

s 폴더에 있습니다. 물론 모바일 템플릿의 리소스 호출 위치를 템플릿 폴더로 설정할 수 있습니다. 그런데 분석해 보니 이렇게 기본 휴대폰 템플릿 리소스를 호출하는 것이 유리하다는 것을 알았습니다. 휴대폰 템플릿 리소스와 PC 템플릿 리소스를 분리해서 다른 PC 템플릿을 만들고 기존 휴대폰 템플릿을 추가하려고 할 때 말이죠. 새 PC 템플릿에 있는 경우 휴대폰 템플릿 파일을 새 PC 템플릿에 복사하기만 하면 휴대폰의 CSS, js 및 기타 리소스를 건드릴 필요가 없습니다. 쉽게 말하면 휴대폰 자원관리에 편리합니다. 따라서 휴대폰 템플릿 리소스도 기본 템플릿과 마찬가지로 루트 디렉터리의 해당 폴더에 배치하는 것이 좋습니다.

(3) 홈페이지 루트 디렉토리의 m 폴더

New Dreamweaver의 루트 디렉토리에는 m 폴더가 있습니다. 방금 휴대폰 템플릿 리소스가 m 폴더에 있다고 말씀드렸습니다. 그리고 m 폴더 아래에는 index.php, list.php, view.php가 있습니다. 모바일 사이트에 접속하면 실제로 이 세 파일에 접근하여 모바일 사이트에 동적으로 접속하게 됩니다. 따라서 컴퓨터를 이용하여 모바일 홈페이지를 확인하실 경우에는 http://yourdomainname/m으로 접속하시면 모바일 홈페이지를 확인하실 수 있습니다.

(4) PC 템플릿 설정

휴대폰으로 웹사이트에 접속하면 자동으로 휴대폰 템플릿으로 이동하는데, 여기에는 PC 템플릿 변환된 js 코드로 이동합니다. 에 코드를 추가하세요.

* 홈페이지 템플릿에 다음 코드를 추가합니다.

코드는 다음과 같습니다.

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

* 다음 코드를 추가합니다. 목록 페이지 템플릿:

코드는 다음과 같습니다.

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

*콘텐츠 페이지 템플릿에 다음 코드를 추가합니다

코드는 다음과 같습니다.

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

위의 js는 컴퓨터 웹사이트가 모바일 웹사이트의 코드로 점프하고 주로 SEO에 사용되는 모바일 웹사이트의 주소를 Baidu에게 알려주세요.

PC 템플릿에 위 코드를 추가한 후, 휴대폰에서 웹사이트 접속 시 자동으로 모바일 웹사이트 템플릿으로 이동합니다.

(5) 휴대폰 템플릿 설정

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

위 내용은 Dedecms dreamweaver 휴대폰 템플릿의 사용 및 제작 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!