5. LifeRay portal 制作一套主题

时间:2022-11-24 18:48:33

在 上一篇博文中,提到了怎么创作 theme ,其实那只是一个壳。

 

现在才是编辑。

 

先解释下它里面的 各种文件 的含义。

 

--------------------------------------

 

门户支持两种形式的风格开发,一种是直接做风格文件夹放入工程中,另一种是将风格做为一个应用与门户并行存在。在此我们只说明文件夹形式的风格制作。

目录分析:

风格包都放在/html/themes/ 下


主题目录:

css:该主题的样式文件
images:主题的图片文件
javascript:主题所需的javascript文件
templates:主题的velocity模版文件



主题样式文件
 
main.css:主样式文件
base.css:基础样式
custom.css:个性化样式
form.css:portlet中form样式
layout.css:布局样式
navigation.css:导航样式
portlet.css:portlet样式
tabs.css:表格样式
注:主题的样式要写在对应的样式文件里,这样维护方便。





主题图片:

注:主题的图片要放在对应的文件里,这样维护方便。

 



主题模版文件:



模版初始化在/html/themes/_unstyled/templates/init.vm

portal_normal.vm:是整体portal模板
它包括了:
--banner部分 
--logo徽标
--dock管理工具
--navigation导航部分
--Portlet容器部分
--bottom部分

 


navigation.vm:导航模板
--当前portal的子页或子portal
--我的空间(当前用户能访问的空间或工作区)

 


dock.vm:管理工具模板
--首页
--我的账户
--登出
--登入
--添加内容
--风格
--页面设置

 


portlet.vm:portlet模版
--top
--body
--bottom

 

 

结合上一篇博文,修改完毕,改好相应的look-and-feel.xml 文件,就可以直接 install 进去。

(注:不能自己压缩成 *.zip 或 *.war 文件,那是没有经过 ant编译的,导入去是错误的。)

 

-----------------------------------------------

 

另外方法:
制作流程:

 

A- 可以直接在 D:/gavin.wang/Java/jar/Liferay/liferay-portal-5.2.3/tomcat-6.0.18/webapps/JEDI 

    JEDI为theme 的显示名称(也就文件夹名),可以直接在该文件夹下的子文件夹中,修改各个CSS和VM文件等。

 

-------------------

 

B- 如下:


第一步:在/webapps/ROOT/html/themes拷贝一个已存在的风格文件改名为你的风格名:

第二步:在/WEB-INF/liferay-look-and-feel.xml文件<custom></custom>元素间增加如下代码:
<theme id="文件夹名" name="自定义">
  <root-path>/html/themes/${theme-id}</root-path>
  <settings>
   <setting key="bullet-style-options" value="1,2" />
  </settings>
</theme>


第三步
在/html/themes/genesis/images/
添加该风格的效果图,命名为thumbnail.png

第四步重启服务
注:默认LOGO
/com/liferay/portal/dependencies中图片company_logo.png

 


 制作一个布局


例如:我们要在portal里添加一个布局:

制作开始
第一步:创建布局模版文件
/layouttpl/custom/下添加三个文件:
2_3_columns.tpl       web布局模版文件
2_3_columns.wap.tpl   wap布局模版文件(不支持wap可以不添加)
2_3_columns.gif       布局模版效果图

2_3_columns.tpl内容如下:(css样式在/html/themes/风格包/css/layout.css中定义)
<div class="columns-2-3" id="content-wrapper">
    <table id="layout-grid">
        <tr>
            <td class="lfr-column twentyfive" id="column-1" valign="top">
                $processor.processColumn("column-1")
            </td>
            <td class="lfr-column seventyfive" id="column-2" colSpan="3" valign="top">
                $processor.processColumn("column-2")
            </td>
        </tr>
        <tr>
            <td class="lfr-column twentyfive" id="column-3" valign="top">
                $processor.processColumn("column-3")
            </td>
            <td class="lfr-column fifty" id="column-4" colSpan="2" valign="top">
                $processor.processColumn("column-4")
            </td>
            <td class="lfr-column twentyfive" id="column-5" valign="top">
                $processor.processColumn("column-5")
            </td>
        </tr>
    </table>
</div>


第二步:将做好的布局模版文件加入配置文件中
/WEB-INFO/liferay-layout-templates-ext.xml



参数 id 定义该 template 的 ID 号, name 定义该 template 在 Add Content 中显示的名称, template-path 定义该 template 的路径名。


制作完毕