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

== 介绍 ==

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

== 工作方式 ==

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

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

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

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

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

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

== 简单的办法 ==

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

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

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

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

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

== 更高级的办法 ==

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