Drupal7 theming by 龙马 2014-01-18
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
当进行主题函数覆写时，这个名字也用于函数名字的前缀。当覆写 theme_menu_link() 函数时，比如，当试图确定覆写正在被执行时，函数名 themename_menu_link() 通常比 theme_name_menu_link() 更容易阅读。
Drupal主题开发介绍
info 文件（3）
info 文件（4）-- bartik regions
Drupal主题开发介绍
info 文件（5） -- 添加css和js
在.info文件里添加css
stylesheets[all][] = style.css
在.info文件里添加js
scripts[] = script.js
template.php （2）
Drupal主题开发介绍
模板文件（*.tpl.php） https://drupal.org/node/1089656
Drupal 主题开发介绍
Drupal 主题开发介绍
Drupal主题开发介绍
hook （1）
什么是hook？
可以把hook（钩子）看做Drupal的内部事件。有时也将其称为回 调函数，这是由于它们是根据函数命名约定来构建的，而不是注 册一个事件监听器（listener），它们也不是真的被回调。模块 通过使用钩子，就可以与Drupal的其它部分整合在一起了。 让每个模块可以加入定义、改变动作逻辑的机会。
Drupal 中国1群：4362258 Drupal 中国2群：158010716 Drupal 上海群： 154077824 Drupal 北京群： 167936429
新年快乐，马到成功！
谢谢！
龙马 (Jack Niu) 2014年1月18日 http://longma.org
Drupal7核心提供了4款主题：garland、bartik、seven、
stark。
Drupal主题下载：http://drupal.org/project/themes
Drupal 主题概述
Drupal 主题存放目录
核心主题： /themes 第三方主题： /sites/all/themes 发行版下的主题：
base theme = parent_theme_name
注意：子主题可以继承基主题里定义的CSS、JS以及定义的函数，在子主题下 的 CSS 和 JavaScript 文件名不要与基主题的文件重名，否则会覆盖基主题的文 件。
Drupal主题开发介绍
Drupal 常用的基主题
http://drupal.org/project/zen http://drupal.org/project/omega http://drupal.org/project/adaptivetheme
Bartik 的 info 文件截图： 必要属性： name
core
附加属性： description engine stylesheets scripts regions base theme package features php
Drupal主题开发介绍
Drupal主题开发介绍
template.php （1）
template.php 里放些什么？
php逻辑处理代码 theme覆写函数 SQL代码 html标记方面的代码放在*.tpl.php里
注意事项：
文件以 <?php 开始，文件不需要 ?> 结尾！
Drupal主题开发介绍
https://drupal.org/project/fusion
https://drupal.org/project/tao
更多介绍：
http://drupalchina.cn/node/1455 19款常用的Drupal基主题
Drupal主题开发工具
IDE 或者编辑器
Eclipse、Netbeans、Aptana、PhpStorm、Dreamweaver Notepad++、Sublime Text 3、TextMate
Drupal主题开发介绍
hook （2）-- 与theme有关的hook
themename_preprocess(&$vars, $hook)
themename_preprocess_hook(&$vars)
Drupal主题开发介绍
Drupal 基主题与子主题
基主题（Base theme，也称为父主题） 子主题（Sub theme）
Drupal主题开发相关资料
官网主题手册
https://drupal.org/documentation/theme （英文） http://drupalchina.cn/documentation/theme (中文翻译)
书籍
Pro Drupal7 Development Third Edition (Drupal专业开发指南) Drupal 7 Themes
info 文件（2）
.info文件（读作“点info文件”）包含关于你的主题的元数据，例如，
主题的名字，支持Drupal的哪个版本，以及一些如样式表和主题将包 括的区域等。
.info文件的命名建议：可以用英文字母、下划线、数字组成，破折号
和其它特殊字符是不允许的。
注意：虽然下划线是被允许的，但是通常认为最佳的做法是避免使用它们命 名你的info文件。使用themename.info而不是theme_name.info。
其他模板引擎：Smarty、XTemplate和PHPTal ，更多请查看：
https://drupal.org/project/project_theme_engine
Drupal8 的模板引擎：Twig
Drupal主题开发介绍
info 文件（1）
Bartik主题目录：
Drupal主题开发介绍
/profiles/distribution_name/themes 如：/profiles/commons/themes
Drupal主题下载：
http://drupal.org/project/themes
Drupal 主题开发流程
方式一（ √推荐 ）
1. 网站需求分析及功能设计 2. 制作网站设计图（Design） 3. 主题开发
Drupal主题开发介绍
模板引擎
Drupal的主题目录中也包含一个“engines”目录，其中包含一
个叫做 PHPTemplate 的模板引擎。模板引擎提供了一种方式用 来分离主题化输出模板文件如同原始的PHP一样简单。
PHPTemplate的优点：简化了从表现中分离逻辑。开发者即
使不熟悉PHP语言，也可以编写简单的模板，因为他们都能够 在主要包含标记和打印变量的模板文件下工作。
The Definitive Guide to Drupal 7
Drupal 7 Theming Cookbook 《Drupal 实战》 Think in Drupal 第5集
Q&A
Drupal官网 http://drupal.org Drupal中国 http://drupalchina.cn
模块（module） 发行版（distribution）
Drupal 主题概述
Drupal 主题相关术语
模板引擎 .info 文件 template.php
模板文件（template files，*.tpl.php）
钩子（hook） 基主题（Base theme，也称为父主题） 子主题（Sub theme）
创建 theme 文件夹
编写info文件 切图，编写*.tpl.php，添加css和js代码。 覆写核心和第三方模块的函数（写入template.php里）
Drupal 主题开发流程
方式二
1. 网站需求分析及功能设计
2. 制作网站设计图（Design）
3. 切图，将设计图转为静态的html文件、编写css、js 4. 主题开发
Drupal7 Theming
龙马（Jack Niu）
2014.1.18
个人简介
网名：龙马
工作：Themer，前端工程师
drupal.org id：jackniu (https://drupal.org/user/435200) drupalchina.cn站长 Email: jackniu8@gmail.com QQ群：Drupal中国：4362258
创建 theme 文件夹
编写info文件 切图，编写*.tpl.php，添加css和js代码。
覆写核心和第三方模块的函数（写入template.php里）
Drupal 主题开发流程
Drupal的主题开发流程
设计效果图（PSD）
Theme开发
Drupal 主题开发流程
一般网站的主题开发流程
浏览器
Firefox (Firebug)
Chrome
Drupal 开发者模块
Devel (https://drup百度文库l.org/project/devel) Devel themer (https://drupal.org/project/devel_themer) SimplyTest.me (http://simplytest.me )
设计效果图（PSD）
制作静态页面（html）
Theme开发
Drupal 主题概述
Drupal 常规概念
节点（node）
内容类型（content type）
分类（taxonomy） 词汇表（vocabulary）
术语（term）
菜单（menu） 区域（region）
区块（block）
Drupal上海： 154077824
内容摘要
Drupal 主题概述
Drupal 主题开发流程
Drupal 主题开发介绍 Drupal 主题开发工具
Drupal 主题概述
什么是Drupal 主题？
网站的外观称为主题（theme）,主要包括网站的页
面布局、颜色、图片、按钮、字体等元素，国外通 常用“Look and Feel”（所见及所感）来说明什么是 主题。
Drupal主题开发介绍
info 文件（3）
info 文件（4）-- bartik regions
Drupal主题开发介绍
info 文件（5） -- 添加css和js
在.info文件里添加css
stylesheets[all][] = style.css
在.info文件里添加js
scripts[] = script.js
template.php （2）
Drupal主题开发介绍
模板文件（*.tpl.php） https://drupal.org/node/1089656
Drupal 主题开发介绍
Drupal 主题开发介绍
Drupal主题开发介绍
hook （1）
什么是hook？
可以把hook（钩子）看做Drupal的内部事件。有时也将其称为回 调函数，这是由于它们是根据函数命名约定来构建的，而不是注 册一个事件监听器（listener），它们也不是真的被回调。模块 通过使用钩子，就可以与Drupal的其它部分整合在一起了。 让每个模块可以加入定义、改变动作逻辑的机会。
Drupal 中国1群：4362258 Drupal 中国2群：158010716 Drupal 上海群： 154077824 Drupal 北京群： 167936429
新年快乐，马到成功！
谢谢！
龙马 (Jack Niu) 2014年1月18日 http://longma.org
Drupal7核心提供了4款主题：garland、bartik、seven、
stark。
Drupal主题下载：http://drupal.org/project/themes
Drupal 主题概述
Drupal 主题存放目录
核心主题： /themes 第三方主题： /sites/all/themes 发行版下的主题：
base theme = parent_theme_name
注意：子主题可以继承基主题里定义的CSS、JS以及定义的函数，在子主题下 的 CSS 和 JavaScript 文件名不要与基主题的文件重名，否则会覆盖基主题的文 件。
Drupal主题开发介绍
Drupal 常用的基主题
http://drupal.org/project/zen http://drupal.org/project/omega http://drupal.org/project/adaptivetheme
Bartik 的 info 文件截图： 必要属性： name
core
附加属性： description engine stylesheets scripts regions base theme package features php
Drupal主题开发介绍
Drupal主题开发介绍
template.php （1）
template.php 里放些什么？
php逻辑处理代码 theme覆写函数 SQL代码 html标记方面的代码放在*.tpl.php里
注意事项：
文件以 <?php 开始，文件不需要 ?> 结尾！
Drupal主题开发介绍
https://drupal.org/project/fusion
https://drupal.org/project/tao
更多介绍：
http://drupalchina.cn/node/1455 19款常用的Drupal基主题
Drupal主题开发工具
IDE 或者编辑器
Eclipse、Netbeans、Aptana、PhpStorm、Dreamweaver Notepad++、Sublime Text 3、TextMate
Drupal主题开发介绍
hook （2）-- 与theme有关的hook
themename_preprocess(&$vars, $hook)
themename_preprocess_hook(&$vars)
Drupal主题开发介绍
Drupal 基主题与子主题
基主题（Base theme，也称为父主题） 子主题（Sub theme）
Drupal主题开发相关资料
官网主题手册
https://drupal.org/documentation/theme （英文） http://drupalchina.cn/documentation/theme (中文翻译)
书籍
Pro Drupal7 Development Third Edition (Drupal专业开发指南) Drupal 7 Themes
info 文件（2）
.info文件（读作“点info文件”）包含关于你的主题的元数据，例如，
主题的名字，支持Drupal的哪个版本，以及一些如样式表和主题将包 括的区域等。
.info文件的命名建议：可以用英文字母、下划线、数字组成，破折号
和其它特殊字符是不允许的。
注意：虽然下划线是被允许的，但是通常认为最佳的做法是避免使用它们命 名你的info文件。使用themename.info而不是theme_name.info。
其他模板引擎：Smarty、XTemplate和PHPTal ，更多请查看：
https://drupal.org/project/project_theme_engine
Drupal8 的模板引擎：Twig
Drupal主题开发介绍
info 文件（1）
Bartik主题目录：
Drupal主题开发介绍
/profiles/distribution_name/themes 如：/profiles/commons/themes
Drupal主题下载：
http://drupal.org/project/themes
Drupal 主题开发流程
方式一（ √推荐 ）
1. 网站需求分析及功能设计 2. 制作网站设计图（Design） 3. 主题开发
Drupal主题开发介绍
模板引擎
Drupal的主题目录中也包含一个“engines”目录，其中包含一
个叫做 PHPTemplate 的模板引擎。模板引擎提供了一种方式用 来分离主题化输出模板文件如同原始的PHP一样简单。
PHPTemplate的优点：简化了从表现中分离逻辑。开发者即
使不熟悉PHP语言，也可以编写简单的模板，因为他们都能够 在主要包含标记和打印变量的模板文件下工作。
The Definitive Guide to Drupal 7
Drupal 7 Theming Cookbook 《Drupal 实战》 Think in Drupal 第5集
Q&A
Drupal官网 http://drupal.org Drupal中国 http://drupalchina.cn
模块（module） 发行版（distribution）
Drupal 主题概述
Drupal 主题相关术语
模板引擎 .info 文件 template.php
模板文件（template files，*.tpl.php）
钩子（hook） 基主题（Base theme，也称为父主题） 子主题（Sub theme）
创建 theme 文件夹
编写info文件 切图，编写*.tpl.php，添加css和js代码。 覆写核心和第三方模块的函数（写入template.php里）
Drupal 主题开发流程
方式二
1. 网站需求分析及功能设计
2. 制作网站设计图（Design）
3. 切图，将设计图转为静态的html文件、编写css、js 4. 主题开发
Drupal7 Theming
龙马（Jack Niu）
2014.1.18
个人简介
网名：龙马
工作：Themer，前端工程师
drupal.org id：jackniu (https://drupal.org/user/435200) drupalchina.cn站长 Email: jackniu8@gmail.com QQ群：Drupal中国：4362258
创建 theme 文件夹
编写info文件 切图，编写*.tpl.php，添加css和js代码。
覆写核心和第三方模块的函数（写入template.php里）
Drupal 主题开发流程
Drupal的主题开发流程
设计效果图（PSD）
Theme开发
Drupal 主题开发流程
一般网站的主题开发流程
浏览器
Firefox (Firebug)
Chrome
Drupal 开发者模块
Devel (https://drup百度文库l.org/project/devel) Devel themer (https://drupal.org/project/devel_themer) SimplyTest.me (http://simplytest.me )
设计效果图（PSD）
制作静态页面（html）
Theme开发
Drupal 主题概述
Drupal 常规概念
节点（node）
内容类型（content type）
分类（taxonomy） 词汇表（vocabulary）
术语（term）
菜单（menu） 区域（region）
区块（block）
Drupal上海： 154077824
内容摘要
Drupal 主题概述
Drupal 主题开发流程
Drupal 主题开发介绍 Drupal 主题开发工具
Drupal 主题概述
什么是Drupal 主题？
网站的外观称为主题（theme）,主要包括网站的页
面布局、颜色、图片、按钮、字体等元素，国外通 常用“Look and Feel”（所见及所感）来说明什么是 主题。