在织梦的早期版本中,手机端和PC端通常是两个完全独立的系统,需要分别制作模板,并使用不同的标签,虽然新版织梦(如V5.7)的“移动端”功能有所改进,但其底层逻辑仍然是两套模板系统,理解手机端和PC端标签的区别至关重要。
核心要点:
手机端的模板文件存放在 /templets/你的手机模板目录/ 目录下,并且默认不使用PC端的标签,而是使用一套简化或专门的标签。
手机端标签的核心思想
- 模板分离:手机端有自己独立的模板文件(如
index_m.htm,list_m.htm,article_m.htm),这些文件在/templets/下的某个子文件夹里。 - 标签简化:手机端的标签库是PC端标签库的子集,或者经过了优化,以适应手机端的性能和显示需求,很多复杂的、PC端特有的标签在手机端可能不支持或表现异常。
- 调用方式:在手机端模板文件中,你使用的是专门为手机端设计的标签,其语法和PC端标签基本相同,但功能集合不同。
手机端常用调用标签详解
以下是在手机端模板中最常用的一些标签,我会提供PC端标签作为对比,并给出手机端的正确写法。
- PC端:
{dede:global.cfg_webname/} - 手机端: 完全相同
网站Logo
- PC端:
{dede:global.cfg_weblogo/} - 手机端: 完全相同
<img src="{dede:global.cfg_weblogo/}" alt="{dede:global.cfg_webname/}" />
首页幻灯片/焦点图
这是手机端一个非常重要的功能,通常使用一个特定的标签来调用头条新闻或指定分类的文章作为幻灯片。
-
PC端:
{dede:arclist row='5' titlelen='24' orderby='pubdate' typeid='8' channelid='1'} ... {/dede:arclist} -
手机端: 使用
{dede:arclist},但通常需要指定特定的栏目ID和排序方式。示例: 调用栏目ID为 "1" 的头条新闻,作为首页焦点图。
<!-- 焦点图/轮播图 --> <div class="focus"> <ul> {dede:arclist row='5' typeid='1' orderby='pubdate' titlelen='20'} <li> <a href="[field:arcurl/]"> <img src="[field:litpic/]" alt="[field:title/]"> <span class="title">[field:title/]</span> </a> </li> {/dede:arclist} </ul> </div>typeid='1': 指定调用哪个栏目下的文章,你需要将你的焦点图内容都发布到这个栏目下。row='5': 显示5条。[field:litpic/]: 获取文章的缩略图。[field:arcurl/]: 获取文章的链接。[field:title/]: 获取文章标题。
首页文章列表
-
PC端:
{dede:arclist ...}{/dede:arclist} -
手机端: 完全相同,但参数会更简单。
示例: 调用栏目ID为 "3" 的文章列表,每页显示10条。
<!-- 文章列表 --> <div class="news-list"> {dede:arclist row='10' typeid='3' titlelen='30'} <div class="item"> <a href="[field:arcurl/]"> <h3>[field:title/]</h3> <p class="desc">[field:description function='cn_substr(@me, 80)'/]...</p> <span class="info">[field:pubdate function='MyDate('m-d', @me)']</span> </a> </div> {/dede:arclist} </div>typeid='3': 指定栏目ID,如果留空,则调用所有栏目的文章。[field:description function='cn_substr(@me, 80)'/]: 截取文章摘要前80个字符。MyDate: 自定义函数,用于格式化日期。
自定义栏目导航
-
PC端:
{dede:channel type='top'}...{/dede:channel} -
手机端: 完全相同
示例: 调用顶级栏目作为主导航。
<!-- 主导航 --> <nav> <ul> {dede:channel type='top'} <li><a href="[field:typelink/]">[field:typename/]</a></li> {/dede:channel} </ul> </nav>type='top': 只调用顶级栏目。[field:typelink/]: 获取栏目链接。
页脚信息
-
PC端:
{dede:global.cfg_powerby/},{dede:global.cfg_beian/} -
手机端: 完全相同
<footer> <p>Powered by {dede:global.cfg_powerby/}</p> <p>{dede:global.cfg_beian/}</p> </footer>
手机端与PC端标签的差异及注意事项
-
不支持PC端专属标签:
{dede:include filename='head.htm'}/{dede:include filename='footer.htm'}: 手机端模板通常不使用这个标签来引入公共头部和底部,而是直接在模板文件中写死HTML代码,因为手机端的头部和 footer 和PC端完全不同。{dede:myad}: 广告标签在手机端支持性不好,很多广告代码(如Flash广告)无法在手机上显示,建议直接使用<img>标签或<a>标签来写死广告位。{dede:sql}: 自定义SQL查询标签,在手机端由于安全性和性能考虑,默认是被禁用的,如果一定要用,需要确保代码绝对安全。
-
arclist标签的参数差异:- 手机端的
arclist不支持太复杂的筛选和排序,像ismake,mid,userip等PC端常用的参数在手机端可能无效。 - 重点使用:
typeid,row,titlelen,infolen,orderby(常用pubdate,click)。
- 手机端的
-
图片和样式:
- 手机端对图片大小和格式有要求,建议在发布文章时就上传适合手机显示的图片(如宽度为640px左右),或者在模板中使用CSS进行响应式缩放 (
max-width: 100%; height: auto;)。 - 手机端模板的CSS样式要简洁,避免使用复杂的浮动和定位,多使用Flexbox布局。
- 手机端对图片大小和格式有要求,建议在发布文章时就上传适合手机显示的图片(如宽度为640px左右),或者在模板中使用CSS进行响应式缩放 (
调试方法
如果你的手机端标签调用不出来,可以按以下步骤排查:
- 确认模板路径:确保你正在编辑的是
/templets/手机端目录/下的模板文件,而不是PC端的模板文件。 - 清除缓存:进入织梦后台 -> 系统 -> 一键更新缓存 -> 更新全部,模板修改后一定要清空缓存才能生效。
- 检查标签语法:确保标签拼写正确,没有多余的空格或符号。
{dede:arclist}和{dede:arclist}是一样的,但{dede:arc list}就是错误的。 - 检查栏目ID:
typeid是最容易出错的地方,去后台 -> 栏目管理,找到你想要调用的栏目,确认它的准确ID。 - 查看源码:在手机浏览器中打开你的网站,查看网页源代码,看看标签是否被正确解析,还是原样输出了,如果原样输出,说明标签没有被引擎解析,通常是缓存问题或模板路径问题。
| 功能需求 | PC端标签 | 手机端标签 | 关键说明 |
|---|---|---|---|
{dede:global.cfg_webname/} |
{dede:global.cfg_webname/} |
通用 | |
| 网站Logo | {dede:global.cfg_weblogo/} |
{dede:global.cfg_weblogo/} |
通用 |
| 首页焦点图 | {dede:arclist typeid='x'} |
{dede:arclist typeid='x'} |
关键在于typeid,将焦点内容放入指定栏目 |
| 文章列表 | {dede:arclist typeid='x'} |
{dede:arclist typeid='x'} |
参数简化,常用typeid, row, orderby |
| 栏目导航 | {dede:channel type='top'} |
{dede:channel type='top'} |
通用 |
| 页脚信息 | {dede:global.cfg_powerby/} |
{dede:global.cfg_powerby/} |
通用 |
| 公共头部/底部 | {dede:include} |
不使用,直接写HTML | 手机端模板结构简单,通常不分离头部和底部 |
掌握了这些核心标签和差异,你就可以顺利地为织梦DedeCMS制作出功能完善的手机端网站了。
