`

自定义页面布局Template转

阅读更多

一、编写模板文件
    我们将该页面风格名称定义为1_2_3_2 Columns,在Liferay/html/layouttpl/custom目录下新建1_2_3_2_columns.tpl文件,内容如下:
<div id="layout-content-outer-decoration">
<div id="layout-content-inner-decoration">
    <div id="layout-content-container">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td colspan="3" valign="top">
            $processor.processColumn("column-1")
          </td>
        </tr>
        <tr>
          <td width="79%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td width="26%" valign="top">
                  $processor.processColumn("column-2")
                </td>
<td class="layout-column-spacer" width="1%">
                    <div>&nbsp;</div>
                  </td>
                <td width="26%" valign="top">
                  $processor.processColumn("column-3")
                </td>
                  <td class="layout-column-spacer" width="1%">
                    <div>&nbsp;</div>
                  </td>
                <td width="26%" valign="top">
                  $processor.processColumn("column-4")
                </td>
                </tr>
              </table>
            </td>
          <td class="layout-column-spacer" width="1%">
            <div>&nbsp;</div>
          </td>
          <td width="20%" rowspan="2" valign="top">
            $processor.processColumn("column-5")
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td width="50%" valign="top">
                  $processor.processColumn("column-6")
                </td>
                <td width="50%" valign="top">
                  $processor.processColumn("column-7")
                </td>
              </tr>
            </table>
            </td>
        </tr>
      </table>
    </div>
</div>
</div>

    文件中前三行定义的 <div> 和最后三行 </div> 是固定的模板格式,从第四行开始就是我们需要定制的页面风格的 HTML 格式,我们需要将输出 portlet 区域的 HTML 语句用 $processor.processColumn("column-1") 来替换,“ column-1 ”是该区域的名称,并且每个区域的名字不能重复,这样系统在生成模板的时候会自动生成不同的区域来存放我们指定的 portlet 。

二、编写属性文件


    我们需要在 liferay-layout-templates.xml 文件中配置我们自定义的页面布局文件 1_2_3_2_columns.tpl ,为了和系统自带的布局文件区分开,我们创建扩展文件 liferay-layout-templates-ext.xml ,在该文件中指定我们的页面布局文件,当然也可以在 liferay-layout-templates.xml 文件直接增加定义。

 

liferay-layout-templates-ext.xml :


 <? xml version = " 1.0 " ?>
 <! DOCTYPE layout - templates PUBLIC  " -//Liferay//DTD Layout Templates 4.0.0//EN "   " http://www.liferay.com/dtd/liferay-layout-templates_4_0_0.dtd " >
 
 < layout - templates >
     < custom >
         < layout - template id = " 1_2_3_2_columns "  name = " 1-2-3-2 Columns " >
             < template - path >/ html / layouttpl / custom / 1_2_3_2_columns.tpl </ template - path >
         </ layout - template >
     </ custom >
 </ layout - templates >
 
参数 id 定义该 template 的 ID 号, name 定义该 template 在 Add Content 中显示的名称, template-path 定义该 template 的路径名。


三、定制页面
    定制好页面风格后,需要重新启动TOMCAT,登陆系统,进入GUEST频道,点击Add Content ,在Template中将会显示我们自定义的页面布局名称1-2-3-2 Columns,选择该Template,然后在页面中添加Journal Content,按照我们自定义的布局将portlet拖拉到合适的位置,再为每个Journal Content指定Article,最后就完成了各种风格页面的定制过程。使用这个的方法,我们可以定制各种满足不同需求的页面。

分享到:
评论

相关推荐

    自定义页面布局Template.pdf

    在Liferay Portal中,自定义页面布局Template是实现个性化网站设计的关键步骤,它允许开发者根据具体需求创建独特的页面结构。本教程将详细讲解如何通过Liferay Portal 4.0开发一个1_2_3_2 Columns布局,这个布局...

    Div自定义页面布局

    本篇文章将深入探讨如何使用`Div`进行自定义页面布局。 首先,理解`Div`的基础用法至关重要。`Div`是一个块级元素,意味着它会默认占据整个宽度并换行显示。可以通过设置`display`属性将其变为行内块元素或灵活的...

    magento创建自定义页面 (Bestseller实例) Bestseller products in Magento

    在Magento中创建自定义页面是一项常见的任务,这通常涉及到对系统架构的理解、模板文件的编辑以及URL的配置。在这个实例中,我们将深入探讨如何在Magento中创建一个显示“Bestseller”产品的自定义页面。 首先,...

    Nuxt pages下不同的页面对应layout下的页面布局操作

    有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面... 这里是自定义也页面的头部(布局) &lt;!-- nuxt可以理解为所对应的.vue页

    可以自由调页面布局DIV

    在网页设计中,"可以自由调页面布局DIV"是一个关键概念,它涉及到前端开发中的响应式设计和灵活性。DIV(Division)是HTML中一个非常重要的布局元素,用于将页面分割成多个区域,每个区域可以独立设置样式,实现复杂...

    Nuxt默认模板、默认布局和自定义错误页面的实现

    在Nuxt.js框架中,构建Vue.js应用时,理解和掌握默认模板、默认布局以及自定义错误页面的实现至关重要。这些功能使得开发者能够更加灵活地管理和定制应用程序的外观和行为,从而提供更好的用户体验。本文将深入探讨...

    简单HTML5+CSS3页面布局

    在页面布局方面,CSS3引入了Flexbox(弹性盒布局)和Grid(网格布局)两种全新的布局模型。Flexbox允许我们轻松地调整元素的大小和位置,实现单轴布局,如导航栏、按钮组等。而Grid布局则提供了二维布局的能力,可以...

    40种网页布局源代码

    8. Grid布局属性:`display: grid`创建Grid容器,`grid-template-columns/rows`定义列/行的数量,`grid-gap`设置网格间距,`grid-template-areas`用于创建自定义的网格模板,`grid-auto-flow`控制自动放置的模式。...

    自定义的流式布局

    这种布局模式强调内容的流动性,使得页面元素能够在不同屏幕尺寸下灵活分布,确保信息的可读性和可用性。 在网页设计中,流式布局通常依赖于CSS(Cascading Style Sheets)来实现。CSS3引入了新的选择器、布局模式...

    viewPager快速实现自定义页面滑动翻页.zip

    用户导入jar包后,只需要自己创建布局文件(xml布局文件),使用本jar包,即可生成可滑动的页面。 2.jar包导入 将本jar包复制到项目的app目录下的libs中,右键jar包-&gt;add as Library,即可开始使用。 3.使用教程 ...

    css页面布局40例

    本资料“css页面布局40例”着重于通过实例来讲解如何利用CSS实现各种各样的页面布局。这40个例子将帮助你深入理解CSS在页面布局中的应用,从而提升你的前端开发技能。 1. **盒模型与边距**: CSS盒模型包括元素的...

    django admin 自定义替换change页面模板的方法

    如果想要自定义页面内容,可以复制Django自带的模板文件到我们的模板目录中,并进行相应的修改。本文将详细说明如何自定义替换Django admin中的change页面模板。 首先,需要明确Django admin的模板文件的存放位置。...

    页面网格布局和幻灯片布局切换UI界面设计

    页面网格布局和幻灯片布局切换UI界面设计是一种常见的网页设计模式,特别是在现代网页和应用程序中,这种设计能够提供丰富的用户体验。在这个设计中,主要涉及的技术是CSS3库,这表明设计者利用了CSS3的强大功能来...

    siteorigin-panels_Templatedesign_

    SiteOrigin Panels 提供了一种简单易用的方式来创建自定义页面布局,它允许用户通过拖放功能自由调整页面元素的位置,无需深入CSS或HTML代码。这个插件尤其适合那些希望在不依赖开发者的情况下个性化其博客外观的博...

    自定义标签学习笔记

    1. **页面布局**:用于定义页面的结构和样式,如导航栏、页脚等。 2. **控制流操作**:用于实现循环、条件判断等功能。 3. **数据操作**:用于对数据库查询结果进行处理,如分页显示、排序等。 4. **表单处理**:...

    template-web.zip

    5. **可扩展性**:`template-web`可能提供了插件系统或自定义函数支持,允许开发者根据需求扩展其功能,如自定义过滤器、指令等。 **使用场景** 1. **快速开发**:在原型开发或快速构建静态页面时,`template-web`...

    VISIO WEB页面设计布局

    “GUUUI Web Prototyping Stencil 3.vss”可能是一个Web原型设计的模板集合,帮助设计师快速构建和测试页面布局;而“GUUUI Web Prototyping Template 3.vst”可能是第三个版本的Web原型设计模板,提供了预设的页面...

    vue3使用print-template生成pdfDemo

    `print-template`是一个能够帮助我们将HTML模板转换为PDF的工具,它支持自定义样式、布局和页面设置,使得生成的PDF能够尽可能地保留网页的原始样式。 `tsconfig.json`和`tsconfig.node.json`是TypeScript的配置...

    自定义表单初步设计文档

    3. **Xsn文件生成Jsp表单步骤**:这可能涉及将InfoPath设计的表单转换为适应Web环境的JSP页面,包括表单数据的提交、处理和展示逻辑。 4. **自定义表单开发实现思路**: - **创建数据表**:首先需要设计数据库结构...

    Themeforest Thin Admin Template 原版

    Thin Admin Template 包含了多种页面布局和组件,比如登录、注册、仪表盘、表单、图表、数据表格、通知、模态框等,这些都是后台管理系统中常见的元素。这些页面和组件都经过精心设计,易于定制和集成到各种项目中...

Global site tag (gtag.js) - Google Analytics