Gallery:外观主题:外观主题的剖析

来自站长百科
跳转至： 导航、​ 搜索

Pages that need review by other documentation team members. 外观主题由下列元素构成：

PHP (theme.inc)：每个外观主题都含有一个PHP文件，theme.inc。Theme.inc是Gallery框架与外观主题HTML之间的纽带。该PHP文件告知Gallery在一个页面中需要显示的数据。为了使Gallery变得更有效率，theme.inc所请求和载入的数据仅为外观主题所需要的，绝不添油加醋。
Smarty模板：这些文件包含有杂糅在一起的HTML和Smarty模板标识。Smarty模板允许你定制自己的HTML并借助一点编程逻辑来绘制一个页面。外观主题负责页面上大部分HTML的绘制，其被赋予的灵活性使得页面渲染的方式多样化了。
层叠式风格页（CSS）：一个外观主题提供了几乎所有用于绘制Gallery页面的CSS。外观主题提供自己的风格页来使得Gallery呈现出不同的外观。模块也能提供用于控制Gallery元素，包括区块的CSS。
区块：Gallery提供了一种区块系统，它允许模块为外观主题提供一块块的HTML以用于显示。区块允许显示导航信标，菜单，评论和图片区块。外观主题则可以选择何时在页面上的何处显示这些区块。外观主题开发者可以使用CSS来控制区块的外观。外观主题允许用户通过编辑某相册的站点管理设定来决定哪些区块可见。

以下的图表说明了Gallery2中某相册页面的渲染过程。该过程与个人相片及管理页面的渲染过程相似。

文件:G2 theme diagram.png

可选元素

  • 客户端脚本- 外观主题可以含有JavaScript以增添动态或互动性的特色。
  • 本地化文件 –提供特定语言内容的外观主题可以使用Gallery框架以提取国际化数据，这样我们的本地化小组就可以针对性地提供特定语言的版本了。
  • 图片 – 外观主题自身提供的图片可以直接对应到模板之中或是作为图标包。
  • 颜色包 – Gallery的颜色包模块可以用于修改外观主题的颜色方案，只要添加一些CSS就可以修改外观主题的默认文本，链接和背景色了。外观主题可以被设计为兼容颜色包或自身提供颜色包的形式。
  • 图片框 – 在Gallery图片周围添加边框。

模板类型[ ]

Gallery中有六类不同的模板页面类型。而外观主题则负责理解并以始终如一的方法来绘制这些页面类型。

外观主题：所有Gallery外观主题中必须的核心模板。theme.tpl一般都显示页面常见的元素，如横幅，站点菜单和页脚。外观主题模板常常包括了其他外观主题文件。
相册：显示一组图片缩略图。
相片：显示单个相片及其相关信息。一般来说这种模板仅显示一个项目（图片，视频等），虽然它也显示毗邻图片的缩略图。
模块：封装了由模块生成的内容，这些模块提供特点，如幻灯片或会员名单。模块页面的内容是由模块自身生成的。
管理：与外观主题相似，admin.tpl封装站点，项目及用户的管理视图。
错误：在出现问题时显示的封装有内容的模板。错误消息和指示是由模块生成并显示的。
进度条：在长时间运算时，以可视化方式显示进度的简单模板。

在相册，相片，错误和进度条页面上，外观主题会生成大多数用户可见的HTML内容。但对于模块和管理页面来说，外观主题从Gallery模块处接收一块块的HTML，并以符合站点风格作为前提对这些HTML进行渲染。

Theme.tpl的模板结构[ ]

由Gallery显示的每个页面都为外观主题的theme.tpl模板所封装。此文件封装了Gallery的各个页面类型。theme.tpl的内容完全由外观主题开发者所决定，但theme.tpl 一般应包括一些标准元素。现在让我们来看看Matrix外观主题的theme.tpl，并把各部分都拎出来细说一下。

DOCTYPE声明和root HTML标识：首先，外观主题需要声明其所遵循的HTML或XHTML的版本并打开root <html>标识。
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
HTML头：添加来自Gallery和选定外观主题内容的文档头。该内容包括风格页信息，需要载入的JavaScript，元数据以及页面的标题。
    <head>
      {* 让Gallery打印出其希望置入<head>元素的所有内容 *}
      {g->head}
      
      {* 如果Gallery不提供头，我们就是要相册/相片标题（或文件名）*}
      {if empty($head.title)}
        <title>{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</title>
      {/if}
      
      {* 包括该外观主题的风格页 *}
      <link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
    </head>

这里你可以看到使用了一些Smarty的标识。评论（不会被显示出来）可以被嵌入{* ... *}标识： 

  {* 这里是评论
        ... 这里是评论。*}

Gallery具有一套完整的自定义Smarty标识用于页面上不同部分的渲染。例如，{g->head} 会置入常见的Gallery HTML <head> 标识内容（如JavaScript，元标识，页面标题及外部风格页）。

smarty 的{g->theme}标识用于两种任务。在此它生成外观主题中某文件的正确URL。因此{g->theme url="theme.css"}会扩展开以显示"themes/<your_theme/theme.css"。你会看到第二个{g->theme}任务正在进行，包括有模板文件。

最后，你会看到Smarty's {if ...} ... {/if} 结构被使用了。我们不会深究细节，但在Gallery不提供fall-back <title>标签的情况下，上面的例子就会添加一个。

HTML主体：开启主体，这样被选取页面的界面就会被显示出来。
    <body class="gallery">
      <div {g->mainDivAttributes}>
全屏模块：对需要完全控制该页面的模块进行处理。
        {*
         * 某些模块视图（如幻灯片）会要求全屏。因此对于它们
         * 我们不给出头，尾及导航条等。这些视图会负责
         * 所有内容的绘制。
         *}
        {if $theme.useFullScreen}
          {include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
        {else}
          {*
           * ...
           * 所有内容都在这里
           * ...
           *}

注意该外观主题为支持全屏模块（如幻灯片）而使用的特殊条件。这些模块需要对页面进行完全控制，因此我们仅希望包括进对应该模块的模板。页面剩余部分的内容将会出现在下面的{else} ... {/if}标识中。

外观主题横幅：许多外观主题会在所有Gallery页面上显示横幅。横幅（Banner）可以包含有标志，站点菜单及图片等，但不仅限于这些。
        <div id="gsHeader">
          <img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/>
        </div>

外观主题matrix在页面的左上角就显示一个小的Gallery标志。

导航信标（Bread crumb）：使我们在Gallery中浏览时不致迷失。
        <div id="gsNavBar" class="gcBorder1">
          <div class="gbSystemLinks">
            {g->block type="core.SystemLinks"
                      order="core.SiteAdmin core.YourAccount core.Login core.Logout"
                      othersAt=4}
          </div>
          
          <div class="gbBreadCrumb">
            {g->block type="core.BreadCrumb"}
          </div>
        </div>

这里我们首次用到了{g->block}标识。该表示用于将少量其他HTML包括进外观主题之中。在此我们希望能显示主系统的链接以及导航信标。core.SystemLinks区块具有一些可以自定义的属性来控制区块的渲染方式。order属性允许你指定链接的显示次序。othersAt属性则指定其他所有未在order被列出的链接的位置。在此，我们想将其他所有链接插入位置4，这样登出按钮就仍可保持在列表结尾了。core.SystemLinks区块，还有一个separator的属性，它允许在各链接之间指定插入某些文本或HTML。参见：Gallery:Tpl_Reference#区块，这里给出了完整的可以区块列表以及它们的属性。

页面内容：为选取的页面—相册，相片，管理，模块或进度条进行渲染。一些Smarty代码能够检测哪些页面被请求了，并选择合适的模板文件进行插入。
        {* 包括进我们希望绘制的合适的页面内容类型。*}
        {if $theme.pageType == 'album'}
          {g->theme include="album.tpl"}
        {elseif $theme.pageType == 'photo'}
          {g->theme include="photo.tpl"}
        {elseif $theme.pageType == 'admin'}
          {g->theme include="admin.tpl"}
        {elseif $theme.pageType == 'module'}
          {g->theme include="module.tpl"}
        {elseif $theme.pageType == 'progressbar'}
          {g->theme include="progressbar.tpl"}
        {/if}
外观主题尾：菜单及所有合法信息所在的位置。
        <div id="gsFooter">
          {g->logoButton type="validation"}
          {g->logoButton type="gallery2"}
          {g->logoButton type="gallery2-version"}
          {g->logoButton type="donate"}
        </div>
        {/if}  {* end of full screen check *}
      </div>

{g->logoButton}标识是在各页面底部显示Gallery小按钮的捷径。注意接下来我们会有{/if}>/tt>标识，它在上面的全屏检查中关闭了{else}。接着我们关闭主要的div，它是我们紧接在<body>标识之后开启的标识。

Gallery的debug输出：如果启用了debug模块，debug输出就会为Gallery开发者显示消息。
      {*
       * 给Gallery输出清楚（cleanup）脚本的机会，如
       * 需要在<body>标识结尾运行的javascript。如不慎忽略，某些
       * 代码就无法正常工作。
       *}
      {g->trailer}
      
      {* 如启用了debug，则在此放进所有的debug输出*}
      {g->debug}

我们总是希望能够渲染trailer和debug区块，甚至是在全屏模式下，因此我们将它们放在页面的最底部。你很可能觉得不必管它们，的确是这样。

闭合主体及html标识：文件结尾。
    </body>
  </html>
取自“https://www.zzbaike.com/wiki/index.php?title=Gallery:外观主题:外观主题的剖析&oldid=13971”