• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
PHP通用程序的模板组织机制
 

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

on

  • 986 views

本ppt演讲主要内容为常见PHP通用程序的模板组织机制、并简略分析了WordPress3、Discuz! 6.x、Discuz! ...

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

Statistics

Views

Total Views
986
Views on SlideShare
985
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 从组织机制阐述 不涉及编码实现方式,请参考运行机制 PPT
  • 但也有部分程序不提供 append 机制,只允许一个 CSS 文件存在 程序更愿意开发者使用提供的 JS ,所以,很少有程序提供兼容 JS 的做法。处理方式:只能直接写在模板里面;或者和 images 一样的处理方式,自行组织文件架构

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

  • 模板组织机制概述 Horse Luke (中文名称:微碌)
  • 使用本 PPT 指南
    • 右上角的按钮中,第一个按钮为使用指南(你看到的本页面);第二个为返回目录;第三个为直接退出 PPT 播放
    • 本 PPT 修改情况如下:
      • 版本 0.1 ,于 2010-08-17 由 微碌 修改。修改目的:创建文档
      • 版本 0.2 ,于 2010-08-18 由 微碌 修改。修改目的:增加案例说明
    返回
  • 模板组织机制概述 - 目录
    • 前言
    • 模板组织机制概述 – 大致组织方式
    • 模板具体案例分析
    • 总结
    • 参考文献
    • Q&A
  • 前言
  • 模板组织机制概述 大致组织方式
  • 模板组织机制概述 – 大致组织方式 Header Main Content Footer
  • 模板组织机制概述 – 大致组织方式 Header Main Content Footer Main Content Sidebar
  • 模板组织机制概述 – 大致组织方式 Header Footer Main Content Sidebar Main Content Comment
  • 模板组织机制概述 – 大致组织方式
    • 所有页面基本由 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 hemes wentytenindex.php
        • <!-- 获取页头( Header )容器文件 -->
        • <?php get_header(); ?>
        • <div id=&quot;container&quot;>
        • <div id=&quot;content&quot; role=&quot;main&quot;>
        • <?php get_template_part( 'loop', 'index' ); ?>
        • </div><!-- #content -->
        • </div><!-- #container -->
        • <!-- 获取侧边栏( Sidebar )容器文件 -->
        • <?php get_sidebar(); ?>
        • <!-- 获取页尾( Footer )容器文件 -->
        • <?php get_footer(); ?>
  • 模板具体案例分析( 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 所出现的地方
    跳转到 6.x 出现的地方
  • 总结
  • 模板组织机制概述 – 分目录(隐藏页)
    • 大致组织方式
    • 具体案例分析
      • WordPress
      • Discuz! 6.x/7.x
  • 参考文献
    • 暂无
  • Q&A
  • 感谢收听! [email_address] Template is created by: