第一节:如何新建网站模板(图文教程)

2014-04-25 09:43:51

第一节:如何新建网站模板(图文教程)
从今天开始,我会给大家讲解下怎么在Dswjcms系统的基础上设计适合自己网站的界面模板。

概述:

  • 了解Dswjcms模板目录位置及结构
  • 编写第一个属于自己的模板(对原模板稍做修改)

准备工作

  • 下载源码 
  • 安装Dswjcms

开始教程


  • 了解模板开发所存放路径(Tpl/Home/template),在接下去的教程中简称:模板目录(所以以后说到模板目录所指的路径就是Tpl/Home/template)
1.找到模板目录

2.进入Tpl

3.后台模板无自定义,不介意修改,前台模板和手机网站模板都支持自定义,今天讲的是前台模板,所以进入Home目录后会看到"自定义模板说明.txt" 和"template"目录,template目录下才是我们真正的工作区,请记住此路径,该路径会在以后的模板开发中经常使用到

  • 了解模板资源所存放路径(Public/自定义目录),在接下去的教程中简称:资源目录(所以以后说到资源目录所指的路径就是Public/自定义目录)
1.找到资源目录

2.进入Public目录,其它文件在这里不介绍了,在这里可以直接新建一个目录(请用英文或拼音命名,不要使用中文),该目录将对应以后新建的每个模 板,新建的目录子目录结构(css img js)我想做前端的朋友一看目录就应该知道对应存放的资源是什么了吧,不了解的说明你的水平不足以开发模板,本教程将无法帮助到你。


  • 了解模板目录结构后,现在开始创建第一个实例
1、进入模板目录,我们将看到目录中已存在"Default"目录,这个目录就是系统默认模板,我们直接复制一份,然后粘贴,重命名"First"

2、进入First可以看到如下结构,我们需要修改的是红框出来的地方一个就是缩略图(一般开发完后才更新)另一个是"state.tf"文件

3、打开"state.tf"文件可以看到如下内容,第一行为模板名,第二行为模板描述,第三行为作者(请确保格式正确),如果是通过GitHub下载的需要注意下请格式化下然后重新换行

4、我们给它重命名下

5、让我们先看看新建的模板是否生效吧,进入后台-系统设置-界面风格,我们就可以看到新建的模板已显示在眼前,如果没有发现,请点击右上角的刷新即可(如果刷新还未有效果,说明你的服务器权限不足,Linux设置网站所在目录权限为777)

6、我们直接切换模板为新建的模板

7、现在直接访问网站是没有任何变化的,我们现在给新建的模板修改几个参数,看下效果如何,进入模板目录下First目录,打开Index目录下的header.html文件

8、找到第51行,将"主页"修改为"First主页",然后保存

9、直接访问网站主页看下效果
修改前

修改后

10、如果出现上图效果,说明模板新建成功了,如果想返回原模板,可以进入后台-系统设置-界面风格将原模板设为默认即可

今天的教程到此结束,有关今天的教程有什么疑问或不懂的或是出现问题的可以直接在下面跟贴
本文关键字:第一节:如何新建网站模板(图文教程)
更多

公司动态


更多

下载


更多

教程


在线QQ

客服电话13081971646

微信