Gallery: 外观主题:如何新建一个外观主题：修订间差异

来自站长百科
跳转至： 导航、​ 搜索
无编辑摘要
第1行： 第1行：
= How to Create a New Theme =
= 如何新建外观主题 =


So you've created a killer photo album template and you want to apply it to your Gallery. This tutorial demonstrates how I converted HTML album and photo templates into a Gallery theme.
喔，原来你做了一个超酷的相片相册模板，还想把它用到Gallery上。那么在这个教程中，我会介绍如何将HTML相册和相片模板转为Gallery外观主题的。


I assume that you are already comfortable with HTML and CSS and that you already have a basic understanding of  [[Gallery2:Themes:Anatomy_of_a_Theme|the anatomy of Gallery themes]]. You don't have to be a PHP expert, but basic scripting knowledge and the ability to recognize basic programming patterns is helpful.
这是假定你一定程度上掌握HTML和CSS并基本了解[[Gallery:Themes:Anatomy_of_a_Theme| Gallery外观主题]]的情况下给出的教程。你并不需要精通PHP，但掌握基本的脚本编写知识和编程模式还是有帮助的。


Ready to build a theme? Then let's get started.
准备好要新建一个外观主题了么？准备好了的话就开始啦。


== The HTML Templates ==
== HTML模板 ==


I created two basic HTML templates, one to display album thumbnails and one to view individual photos. I developed a stylesheet, and a few JavaScript functions to control the look of the HTML template. Because the JavaScript resizes thumbnail containers to fit comfortable on the page, even on window resize, I've decided to call this theme AutoRC—Auto Rows and Columns (thanks for the name floridadave :D).
我建了两个基本的HTML模板，一个用于显示相册缩略图，另一个用来查看单个相片。我利用stylesheet和一些JavaScript函数来控制HTML模板的外观呈现。因为JavaScript会重设缩略图容器的尺寸来使其符合页面甚至是窗口所需，所以我将此外观主题命名为AutoRC—Auto Rows and Columns（感谢floridadave，这名字不赖 :D）。


The design is relatively simple visually—I chose to display the album's title and description and image titles under each thumbnail in the album template. Only the title and caption are displayed on the photo detail template.
设计相对简单—我选择的是在相册模板各缩略图之下显示相册标题，描述和图片标题的方式。仅标题和字母被显示在相片详细信息的模板上。


<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-album.png}} http://codex.gallery2.org/images/7/78/Autorc-html-album-sm.png]</span>
<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-album.png}} http://codex.gallery2.org/images/7/78/Autorc-html-album-sm.png]</span>
第17行： 第17行：
<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-photo.png}} http://codex.gallery2.org/images/5/5b/Autorc-html-photo-sm.png]</span>
<span class="plainlinks">[{{SERVER}}{{localurl:Image:Autorc-html-photo.png}} http://codex.gallery2.org/images/5/5b/Autorc-html-photo-sm.png]</span>


Here are the files I've created for my mockup:
这里有我建立的用于mockup的文件：


'''Please note that these files have not been tested in Internet Explorer 6. I will update them for proper display in IE 6 after completion of this tutorial.'''
'''请注意这些文件没有在IE6中做过测试。在此教程完结之后，我会将这些文件更新以适于IE6。'''


* [[Gallery2:Themes:AutoRC_Album_HTML|album.html]]
* [[Gallery:Themes:AutoRC_Album_HTML|album.html]]
* [[Gallery2:Themes:AutoRC_JavaScript|functions.js]]
* [[Gallery:Themes:AutoRC_JavaScript|functions.js]]
* [[Gallery2:Themes:AutoRC_Photo_HTML|photo.html]]
* [[Gallery:Themes:AutoRC_Photo_HTML|photo.html]]
* [[Gallery2:Themes:AutoRC_CSS|theme.css]]
* [[Gallery:Themes:AutoRC_CSS|theme.css]]


== Getting Started ==
== 开始作业 ==


The first thing we need to do is create a folder in Gallery for the new theme. We'll make copies of the original HTML templates, the style sheet, and JavaScript in this folder.
首先我们要做的事为新外观主题建一个目录。我们会将源HTML模板，风格页和JavaScript的拷贝放在此文件夹下。


# First, I created a new folder in gallery2/themes/ named 'autorc'
# 首先，在gallery2/themes/下新建一个'autorc'文件夹
# Next, I copied theme.css and functions.js to the autorc folder
# 接着讲theme.css和functions.js复制到autorc文件夹中
# Inside of gallery2/themes/autorc, I made a new folder named 'templates'
# 在gallery2/themes/autorc中，新建一个名为'templates'的文件夹
# I copied album.html and photo.html to the new templates folder
# 将album.html和photo.html复制到新建的templates文件夹中
# I changed the file extension on album.html and photo.html to .tpl
# 将album.html和photo.html的文件扩展名修改为.tpl
# Since I didn't create templates for admin, error, module, or progressbar pages, I copied these templates from the Matrix theme (themes/matrix/templates)
# 由于我没有为admin，error，module或progressbar 页面创建模板，所以直接从Matrxi外观主题复制过来了（themes/matrix/templates）


Next, we'll [[Gallery2:Themes:How_to_Build_a_Theme.inc_File|create our theme.inc]] file.
接下来，我们[[Gallery:Themes:How_to_Build_a_Theme.inc_File|创建theme.inc]]文件。


After that, we'll convert our HTML pages to Smarty templates.
此后，我们会将HTML页面转为Smarty模板。

2008年10月27日 (一) 15:50的版本

如何新建外观主题

喔，原来你做了一个超酷的相片相册模板，还想把它用到Gallery上。那么在这个教程中，我会介绍如何将HTML相册和相片模板转为Gallery外观主题的。

这是假定你一定程度上掌握HTML和CSS并基本了解 Gallery外观主题的情况下给出的教程。你并不需要精通PHP，但掌握基本的脚本编写知识和编程模式还是有帮助的。

准备好要新建一个外观主题了么？准备好了的话就开始啦。

HTML模板

我建了两个基本的HTML模板，一个用于显示相册缩略图，另一个用来查看单个相片。我利用stylesheet和一些JavaScript函数来控制HTML模板的外观呈现。因为JavaScript会重设缩略图容器的尺寸来使其符合页面甚至是窗口所需，所以我将此外观主题命名为AutoRC—Auto Rows and Columns（感谢floridadave，这名字不赖 :D）。

设计相对简单—我选择的是在相册模板各缩略图之下显示相册标题，描述和图片标题的方式。仅标题和字母被显示在相片详细信息的模板上。

http://codex.gallery2.org/images/7/78/Autorc-html-album-sm.png

http://codex.gallery2.org/images/5/5b/Autorc-html-photo-sm.png

这里有我建立的用于mockup的文件：

请注意这些文件没有在IE6中做过测试。在此教程完结之后，我会将这些文件更新以适于IE6。

开始作业

首先我们要做的事为新外观主题建一个目录。我们会将源HTML模板，风格页和JavaScript的拷贝放在此文件夹下。

  1. 首先，在gallery2/themes/下新建一个'autorc'文件夹
  2. 接着讲theme.css和functions.js复制到autorc文件夹中
  3. 在gallery2/themes/autorc中，新建一个名为'templates'的文件夹
  4. 将album.html和photo.html复制到新建的templates文件夹中
  5. 将album.html和photo.html的文件扩展名修改为.tpl
  6. 由于我没有为admin，error，module或progressbar 页面创建模板，所以直接从Matrxi外观主题复制过来了（themes/matrix/templates）

接下来，我们创建theme.inc文件。

此后，我们会将HTML页面转为Smarty模板。

取自“https://www.zzbaike.com/wiki/index.php?title=Gallery:外观主题:如何新建一个外观主题&oldid=14041”