站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Gallery:外观主题:外观主题的剖析
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== Theme.tpl的模板结构== 由Gallery显示的每个页面都为外观主题的<tt>theme.tpl</tt>模板所封装。此文件封装了Gallery的各个页面类型。<tt>theme.tpl</tt>的内容完全由外观主题开发者所决定,但<tt>theme.tpl</tt> 一般应包括一些标准元素。现在让我们来看看Matrix外观主题的<tt>theme.tpl</tt>,并把各部分都拎出来细说一下。 ; DOCTYPE声明和root HTML标识:首先,外观主题需要声明其所遵循的HTML或XHTML的版本并打开root <tt><html></tt>标识。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>"> <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的标识。[http://smarty.php.net/manual/en/language.basic.syntax.php#language.syntax.comments 评论](不会被显示出来)可以被嵌入<tt>{* ... *}</tt>标识: {* 这里是评论 ... 这里是评论。*} Gallery具有一套完整的自定义Smarty标识用于页面上不同部分的渲染。例如,<tt>{g->head}</tt> 会置入常见的Gallery HTML <tt><head></tt> 标识内容(如JavaScript,元标识,页面标题及外部风格页)。 smarty 的<tt>{g->theme}</tt>标识用于两种任务。在此它生成外观主题中某文件的正确URL。因此<tt>{g->theme url="theme.css"}</tt>会扩展开以显示"<tt>themes/<your_theme/theme.css</tt>"。你会看到第二个<tt>{g->theme}</tt>任务正在进行,包括有模板文件。 最后,你会看到[http://smarty.php.net/manual/en/language.function.if.php Smarty's <tt>{if ...} ... {/if}</tt> 结构]被使用了。我们不会深究细节,但在Gallery不提供fall-back <tt><title></tt>标签的情况下,上面的例子就会添加一个。 ; HTML主体:开启主体,这样被选取页面的界面就会被显示出来。 <body class="gallery"> <div {g->mainDivAttributes}> ; 全屏模块:对需要完全控制该页面的模块进行处理。 {* * 某些模块视图(如幻灯片)会要求全屏。因此对于它们 * 我们不给出头,尾及导航条等。这些视图会负责 * 所有内容的绘制。 *} {if $theme.useFullScreen} {include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain} {else} {* * ... * 所有内容都在这里 * ... *} 注意该外观主题为支持全屏模块(如幻灯片)而使用的特殊条件。这些模块需要对页面进行完全控制,因此我们仅希望包括进对应该模块的模板。页面剩余部分的内容将会出现在下面的<tt>{else} ... {/if}</tt>标识中。 ; 外观主题横幅:许多外观主题会在所有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> 这里我们首次用到了<tt>{g->block}</tt>标识。该表示用于将少量其他HTML包括进外观主题之中。在此我们希望能显示主系统的链接以及导航信标。<tt>core.SystemLinks</tt>区块具有一些可以自定义的属性来控制区块的渲染方式。<tt>order</tt>属性允许你指定链接的显示次序。<tt>othersAt</tt>属性则指定其他所有未在<tt>order</tt>被列出的链接的位置。在此,我们想将其他所有链接插入位置4,这样登出按钮就仍可保持在列表结尾了。<tt>core.SystemLinks</tt>区块,还有一个<tt>separator</tt>的属性,它允许在各链接之间指定插入某些文本或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> <tt>{g->logoButton}</tt>标识是在各页面底部显示Gallery小按钮的捷径。注意接下来我们会有<tt>{/if}>/tt>标识,它在上面的全屏检查中关闭了<tt>{else}</tt>。接着我们关闭主要的<tt>div</tt>,它是我们紧接在<tt><body></tt>标识之后开启的标识。 ; Gallery的debug输出:如果启用了debug模块,debug输出就会为Gallery开发者显示消息。 {* * 给Gallery输出清楚(cleanup)脚本的机会,如 * 需要在<body>标识结尾运行的javascript。如不慎忽略,某些 * 代码就无法正常工作。 *} {g->trailer} {* 如启用了debug,则在此放进所有的debug输出*} {g->debug} 我们总是希望能够渲染trailer和debug区块,甚至是在全屏模式下,因此我们将它们放在页面的最底部。你很可能觉得不必管它们,的确是这样。 ; 闭合主体及html标识:文件结尾。 </body> </html>
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)