Gallery:如何通过编辑外观主题模板来将Gallery可视化地嵌入到你的网站中

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

介绍[ ]

通过编辑外观主题模板进行Gallery的可视化嵌入很简单。每个Gallery相册都含有一个关联的外观主题,而外观主题则负责整个页面的布置。因此,若要让Gallery服帖地融合到网站中,你所需做的只是修改外观主题模板和CSS以使用一个色彩方案和HTML片段。唯一复杂的就是,如果你在Gallery中使用多个外观主题,就得单独对它们进行调整。此文中,我们只针对 Matrix这一默认外观主题进行相关例举。

工作方式[ ]

外观主题Matrix中几乎所有的页面都经过单个模板的渲染。如果你查看一下themes/matrix/templates/theme.tpl,就会发现它看起来是这样的:

<html>
  <head>
    <!-- HTML and Smarty tags -->
  </head>
  <body>
    <!-- more HTML and Smarty tags -->
    {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}  
    <!-- more HTML and Smarty -->
  </body>
</html>

请勿使用此样本代码。它只是用以说明问题的例子而已,因此并不完整。可以复制已有的theme.tpl并从这里开始进行自定义。

如果你熟悉HTML的话,那么这就如同一整张的web页面。其中有许多Smarty标签,它们有很多作用,但大多数情况下,你可以忽略它们。示例中间的一大块代码用于区分Gallery显示页面的种类,以及为该页面加载相应的模板。

你的网站应该会含有一个页头和一个页脚,或许还含有其它元素(比如边栏),它们会一直处于显示状态。因此要让Gallery融合进来,你所需要做的只是从网站剩余部分的theme.tpl中复制HTML片段并重新载入页面。

有两种方法来修改外观主题。

简单的办法[ ]

这个极简单的办法就是对模板进行本地修改。在模板目录中,创建一个新的名为"local"的目录,然后将theme.tpl复制到此目录中。接着对此theme.tpl复本做必要的修改,Gallery就会使用它而不使用原来的文件了。当你更新Gallery而原来的theme.tpl文件没有改变的话,你所作的修改将仍有效。否则,你所作的修改将需要进行整合才能生效。

$ cd themes/matrix/templates
$ mkdir local
$ cp theme.tpl local
$ edit local/theme.tpl

一个典型的自定义themes/matrix/templates/local/theme.tpl模板看起来跟原先的差不了多少。你只需在页面的<head> section中添加你自己的CSS链接,在<body>标签后添加页头而在</body>标签后添加页脚。当然这只是一个例子,你可以根据需要对此模板进行任何操作。 参见:模板的编辑

<html>
  <head>
    <!-- HTML and Smarty tags -->
    <!-- YOUR OWN CSS AND JAVASCRIPT -->
  </head>
  <body>
    <!-- YOUR HTML / INCLUDE HEADER -->
    <!-- more HTML and Smarty tags -->
    {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}  
    <!-- more HTML and Smarty -->
    <!-- YOUR HTML / INCLUDE FOOTER -->
  </body>
</html>

如果需要插入JavaScript代码,你必须在其外围添加{literal}JavaScript代码{/literal}标签。原因是,在Gallery模板中,我们使用Smarty语言而大括号{ 和 }为保留字符。这些字段在JavaScript代码中出现的频率是很高的。除了使用{literal}{/literal}之外,你还可以使用{ldelim}作为左{ 以及{rdelim}作为右大括号。参见官方的Smarty常见问题解答

更高级的办法[ ]

更为高级的办法就是自己制作模板,可以使用复制已有外观主题的方法接着调整theme.tpl。这会稍微有点棘手(可能需要修改一个PHP文件),但结果并不太糟,你的外观主题在大多数的升级操作之后仍有效;唯一的缺憾就是,在自建模板中将无法囊括进更新中可能会加入的新特点。