Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PHP通用程序的模板组织机制

1,396 views

Published on

本ppt演讲主要内容为常见PHP通用程序的模板组织机制、并简略分析了WordPress3、Discuz! 6.x、Discuz! 7.x相关模板组织机制相关问题。本PPT不涉及具体的技术实现,尽量做到前端也可明白其意思。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

PHP通用程序的模板组织机制

  1. 1. 模板组织机制概述 Horse Luke (中文名称:微碌)
  2. 2. 使用本 PPT 指南 <ul><li>右上角的按钮中,第一个按钮为使用指南(你看到的本页面);第二个为返回目录;第三个为直接退出 PPT 播放 </li></ul><ul><li>本 PPT 修改情况如下: </li></ul><ul><ul><li>版本 0.1 ,于 2010-08-17 由 微碌 修改。修改目的:创建文档 </li></ul></ul><ul><ul><li>版本 0.2 ,于 2010-08-18 由 微碌 修改。修改目的:增加案例说明 </li></ul></ul>返回
  3. 3. 模板组织机制概述 - 目录 <ul><li>前言 </li></ul><ul><li>模板组织机制概述 – 大致组织方式 </li></ul><ul><li>模板具体案例分析 </li></ul><ul><li>总结 </li></ul><ul><li>参考文献 </li></ul><ul><li>Q&A </li></ul>
  4. 4. 前言
  5. 5. 模板组织机制概述 大致组织方式
  6. 6. 模板组织机制概述 – 大致组织方式 Header Main Content Footer
  7. 7. 模板组织机制概述 – 大致组织方式 Header Main Content Footer Main Content Sidebar
  8. 8. 模板组织机制概述 – 大致组织方式 Header Footer Main Content Sidebar Main Content Comment
  9. 9. 模板组织机制概述 – 大致组织方式 <ul><li>所有页面基本由 3 个容器组成 </li></ul><ul><ul><li>页头( Header ) </li></ul></ul><ul><ul><li>主内容区( Main Content ) </li></ul></ul><ul><ul><li>页尾( Footer ) </li></ul></ul><ul><li>主内容区根据实际情况进行细分 </li></ul><ul><ul><li>现在主流划分出一个侧边栏( Sidebar )用于存放菜单栏甚至是挂件( Widget ) </li></ul></ul>
  10. 10. 模板组织机制概述 – 大致组织方式 <ul><li>程序有一个默认模板 </li></ul><ul><ul><li>维护整个程序的外观架构 </li></ul></ul><ul><ul><li>起示范作用 </li></ul></ul><ul><li>每个模板以特定文件组织形式,以一个文件夹组织起来 </li></ul><ul><ul><li>一般实现模板同名覆盖原则 </li></ul></ul><ul><ul><li>部分程序提供 CSS append 机制 </li></ul></ul><ul><ul><li>很少程序提供兼容 JS 机制 </li></ul></ul>
  11. 11. 模板组织机制概述 – 大致组织方式 <ul><li>综上,前端最需要考虑的事情: </li></ul><ul><ul><li>如何合理切分页面? </li></ul></ul>
  12. 12. 模板具体案例分析( 1 ) WordPress 3 模板组织架构
  13. 13. 模板具体案例分析( 1 ) - WordPress 3 概述 <ul><li>提供默认模板( wp-includes/theme-compat ) </li></ul><ul><ul><li>但将要移除,不提供 </li></ul></ul><ul><ul><li>存在问题:自定义模板中没有某个页面容器的模板文件时,直接挂掉。 </li></ul></ul><ul><ul><ul><li>比如,删除或者改名所用模板的 single.php 文件后,就不能浏览具体的文章内容了 </li></ul></ul></ul><ul><li>一个模板对应一个 CSS ,没有 CSS append 机制 </li></ul>
  14. 14. 模板具体案例分析( 1 ) - WordPress 3 模板同名覆盖原则体现 <ul><li>模板同名覆盖原则体现 </li></ul>覆盖 默认模板 指定模板
  15. 15. 模板具体案例分析( 1 ) - WordPress 3 页面切分例子 <ul><li>页面切分(不同容器调用不同文件)例子 </li></ul><ul><ul><li>首页模板,以下代码经过简化: wp-content hemes wentytenindex.php </li></ul></ul><ul><ul><ul><li><!-- 获取页头( Header )容器文件 --> </li></ul></ul></ul><ul><ul><ul><li><?php get_header(); ?> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;container&quot;> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;content&quot; role=&quot;main&quot;> </li></ul></ul></ul><ul><ul><ul><li><?php get_template_part( 'loop', 'index' ); ?> </li></ul></ul></ul><ul><ul><ul><li></div><!-- #content --> </li></ul></ul></ul><ul><ul><ul><li></div><!-- #container --> </li></ul></ul></ul><ul><ul><ul><li><!-- 获取侧边栏( Sidebar )容器文件 --> </li></ul></ul></ul><ul><ul><ul><li><?php get_sidebar(); ?> </li></ul></ul></ul><ul><ul><ul><li><!-- 获取页尾( Footer )容器文件 --> </li></ul></ul></ul><ul><ul><ul><li><?php get_footer(); ?> </li></ul></ul></ul>
  16. 16. 模板具体案例分析( 2 ) Discuz! 7.x 的 CSS append 机制 Discuz! 6.x 和 7.x 的对于看贴页面的细分
  17. 17. 模板具体案例分析( 2 ) - Discuz! 7.x 的 CSS append 机制 <ul><li>默认模板的 CSS header 定义: </li></ul><ul><ul><li>template/default/css_common.htm </li></ul></ul>
  18. 18. 模板具体案例分析( 2 ) - Discuz! 7.x 的 CSS append 机制 <ul><li>使用 UCH 模板后, CSS append 覆盖了 header 定义: </li></ul><ul><ul><li>template/uchome/css_append.htm </li></ul></ul>
  19. 19. 模板具体案例分析( 2 ) - Discuz! 6.x 和 7.x 的对于看贴页面的细分 <ul><li>6.x 中,每层帖子的处理均在 viewthread.htm 模板中完成 </li></ul>
  20. 20. 模板具体案例分析( 2 ) - Discuz! 6.x 和 7.x 的对于看贴页面的细分 <ul><li>7.x 中,每层帖子的处理交由 viewthread_node.htm 子模板来完成 </li></ul>
  21. 21. 模板具体案例分析( 2 ) - Discuz! 6.x 和 7.x 的对于看贴页面的细分 <ul><li>7.x 中的 viewthread_node.htm 子模板 </li></ul><ul><ul><li>请对比框住内容在 dz6.x 所出现的地方 </li></ul></ul>跳转到 6.x 出现的地方
  22. 22. 总结
  23. 23. 模板组织机制概述 – 分目录(隐藏页) <ul><li>大致组织方式 </li></ul><ul><li>具体案例分析 </li></ul><ul><ul><li>WordPress </li></ul></ul><ul><ul><li>Discuz! 6.x/7.x </li></ul></ul>
  24. 24. 参考文献 <ul><li>暂无 </li></ul>
  25. 25. Q&A
  26. 26. 感谢收听! [email_address] Template is created by:

×