从零开始学习织梦模板制作

本教程针对对织梦模板一点不了解的菜鸟,如果你是织梦老鸟就不用看了。

一、基础

学习html

什么是dedecms模版?说简单点就是加上织梦模板标签的HTML页面。所以,学习织梦模板的基础便是HTML语言学习,HTML语言的内容不多,很容易理解,网上搜索下内容非常多,不过现在正流行web标准,就是大家说的“DIV+CSS”,学习要求又提高许多,需要学习一下CSS,大家可以下载CSS手册,修改模版的时候对照学习修改,每天坚持学一点很快就会学会。

二、学习dede模版标签

学习标签前,如果你是新手,请使用默认模版熟悉下织梦系统,系统的设置,如何添加栏目,怎么为栏目设置模版,如何发表文章,更改文章,有个基本概念。

Dedecms的标签很有特色,只要熟悉以后很快就能上手而且使用非常灵活。dede模板引擎的标签样式有如下几种形式:

{dede:标记名称 属性='值'/}
{dede:标记名称 属性='值'}{/dede:标记名称}
{dede:标记名称 属性='值'}自定义样式模板(InnerText){/dede:标记名称}
从上面我们可以看出,dede模板引擎的标签可以分为标记名称、属性和自定义样式模版三部分,标记名称和属性用{}包围

而自定义样式模版在两个{}之间。

标记名称与属性的说明请大家参考系统帮助里的模版标签参考,这里介绍具体使用方法。

先看一下下面的这个例子:

  1. {dede:arclist typeid='0' titlelen='28' row='10' }  
  2. <li><a href='[field:arcurl/]'>[field:title/]</a></li>  
  3. {/dede:arclist}   

上面是织梦中最常用的获取内容列表标签arclist,由开始标记{dede:arclist 属性typeid='' titlelen='28' row='10' col='1'}模版样式<li><a href='[field:arcurl/]'>[field:title/]</a></li>和结束标记 {/dede:arclist}组成。当你完成页面制作后,便可开始添加dede标签。没有添加dede标签之前:

  1. <ul>  
  2. <li><a href='文章地址'>文章标题</a></li>  
  3. <li><a href='文章地址'>文章标题</a></li>  
  4. <li><a href='文章地址'>文章标题</a></li>  
  5. <li><a href='文章地址'>文章标题</a></li>  
  6. <li><a href='文章地址'>文章标题</a></li>  
  7. <li><a href='文章地址'>文章标题</a></li>  
  8. <li><a href='文章地址'>文章标题</a></li>  
  9. <li><a href='文章地址'>文章标题</a></li>  
  10. <li><a href='文章地址'>文章标题</a></li>  
  11. <li><a href='文章地址'>文章标题</a></li>  
  12. </ul>  

添加标签后

  1. <ul>  
  2. {dede:arclist typeid='0' titlelen='28' row='10' }  
  3. <li><a href='[field:arcurl/]'>[field:title/]</a></li>  
  4. {/dede:arclist}  
  5. </ul>  

模版解析后就是添加代码前的样子。列表list标签,友情链接flink标签,导航channel标签,站内新闻mynews标签等都是同样方法使用。

文章页里用到{dede:标记名称 属性='值'/},如{dede:field name='title' /}就是当前文章标题的意思。

模版里面的路径问题:本站使用{dede:global.cfg_templeturl/}/judrip/img/css.css,{dede:global.cfg_templeturl/}是取得网站模板根目录的意思。这里有个模版保护问题,如果你不想你的网站模板轻而易举的被别人窃取,就把img目录独立分离出来,这样,别人就不会知道你的模版目录。

制作

想要真正独立制作一套网站模版,是很费精力的,规划、设计、制作、调试哪部分都很累人。很多站长都没有能力制作,所以才会有那么多的朋友期待别人放出模版,稍微有点能力的就仿制别人的模版,何为仿制?保存要仿制网站的html页面,将里面的内容用织梦标签替代,完工。这就是仿制,没有太多的技术含量,只要替换CMS标签即可。

您可以选择一种方式赞助本站

支付宝转账赞助

目前评论:3   其中:访客  0   博主  0

  1. avatar yameimei
  2. avatar eeequn
  3. avatar shui7777
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情