Piwigo论坛

Piwigo官方中文论坛

  •  » 安装和使用
  •  » 【教程】如何使用模板创建自己的页面样式!

#1 2010-01-13 01:29:41

winson
Piwigo Chinese Admin
China
2009-06-02
206

【教程】如何使用模板创建自己的页面样式!

Piwigo 提供了非常方便的模板页面功能,使用此功能可以替换现有任何页面的内容,创建自己的页面样式,以下我将以一个比较简单的例子来说明吧smile

在 Piwigo 的默认主题的图片查看页面里,在点击查看相片信息时(即显示EXIF信息),此信息栏会直接显示在现有相片信息栏的下面,这样就导致整个页面过长,看起来不好看啦,现在我想将相片信息和EXIF信息都同能并排显示,如下图 4 所示,那可怎么做呢?

在创建和编辑模板之前,需要用到一个插件,就是 [extension by Piwigo Team] LocalFiles Editor ,有了此插件,就可以直接对相关的页面文件源码进行编辑了。

第一步:进入 LocalFiles Editor 后点击 “Template" ,然后创建一个模板,Model 记得要选 yoga/picture.tpl ,因为你是要修改相片查看的页面,而现在是以官方的默认模板为例,所以先yoga下的piecure.tpl ,同时在选择如下图 1

第二步:修改模板的代码,添加以下代码到相应的行:
line 101 <div class="win">            //在 {if isset($previous} 之前
line 113 <div class="tab1">          //在 <table class="infoTable" summary="Some info about this picture"> 之前
line 234 </div>                            //在 </table> 之后
line 236 <div class="tab2">         //在 <table class="infoTable" summary="Some more (technical) info about this picture"> 之前
line 251 </div>                            //在 </table> 之后
line 254 </div>                            //在 <hr class="separation"> 之前

第三步,然后再进入LocalFiles Editor -> Tab CSS ,修改template-common/local-layout.css的CSS代码,如下图 3:
添加以下代码:

.tab1{
position:absolute;
left:10%;
margin:1%;
padding:1%;
width: 38%;
min-width: 38%;
padding-bottom: 15px;
height:auto;
}

.tab2{
position:absolute;
right:10%;
margin:1%;
padding:1%;
width: 38%;
min-width: 38%;
height:auto;
}

.win{
min-height: 210px;                /*To adjust the height according to EXIF data*/
padding-bottom: 15px;
margin-bottom: 15px;
}

保存文件

最后就是应用模板了,进入 设置 -》 模板 页面,将刚才添加的模板替换了现有的 picture.tpl 就可以了,如图 2 所示。

OK,以后大家就可以根据需要进行创建自己的模板了 smile

离线

#2 2010-01-13 14:46:42

mzs777
Piwigo Chinese
2009-12-02
90

Re: 【教程】如何使用模板创建自己的页面样式!

好文章,辛苦了!

离线

#3 2011-12-24 07:14:30

www.xppk.com
会员
2011-05-18
9

Re: 【教程】如何使用模板创建自己的页面样式!

哦,。。。。。。。。

离线

  •  » 安装和使用
  •  » 【教程】如何使用模板创建自己的页面样式!

论坛页尾

基于 FluxBB

github twitter facebook google+ newsletter 捐赠 Piwigo.org © 2002-2019 · 联系