模板组织机制概述.pptVIP

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