如何自定义页面布局？

Question

我在liferay 7中创建了一个页面，其中图像以全宽度绘制。在图像下我想要一个3列布局。我怎样才能做到这一点？我只是添加了一些WebContent和一些自定义CSS吗？

我在这里创建了一个新模板：

C:\Users\me\Documents\workspace\my-workspace\bundles\tomcat-8.0.32\webapps\ROOT\layouttpl\custom\1_column_3_columns.tpl

tpl看起来像这样：

<div class="portlet-layout row">
    This is the full width row
</div>
<div class="columns-3" id="main-content" role="main">
    <div class="portlet-layout row">
        <div class="col-md-4 portlet-column portlet-column-first" id="column-1">
            $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
        </div>

        <div class="col-md-4 portlet-column" id="column-2">
            $processor.processColumn("column-2", "portlet-column-content")
        </div>

        <div class="col-md-4 portlet-column portlet-column-last" id="column-3">
            $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
</div>

我不知道如何部署它，因为当我查看随机页面的设置时，我没有看到这个“新”布局（该文件名为1_column_3_columns.tpl）：

我不确定我是否以正确的方式部署了这个。从命令行我运行：

blade gw build
blade gw deploy

如何为我的网站部署/创建这个新的.tpl布局？

Answer 1

如果您想在图片下方的3列中添加应用，最好的方法是创建布局。

应该是5分钟的工作。最好复制OOTB 3第一列，并在3列上添加一行。

https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/layout-templates-intro

编辑：

如果使用刀片工具进行部署，请查看https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/blade-cli。

如果运行then deploy命令，您应该在tomcat日志中看到一条消息，指示布局已部署并已启动。 或者，只需编译代码./gradlew build，然后将war文件构建版本复制到LIFERAY_HOME/deploy/

不是模板。如果要将portlet放在顶行，则需要将占位符代码放在那里，并带有唯一的指示符。

<div class="portlet-layout row">
    $processor.processColumn("column-0", "portlet-column-content")
</div>

也许只是为了清理东西，我会去。

<div class="columns-1-3" id="main-content" role="main">
<div class="portlet-layout row">
    $processor.processColumn("column-0", "portlet-column-content")
</div>

<div class="portlet-layout row">
    <div class="col-md-4 portlet-column portlet-column-first" id="column-1">
        $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
    </div>

    <div class="col-md-4 portlet-column" id="column-2">
        $processor.processColumn("column-2", "portlet-column-content")
    </div>

    <div class="col-md-4 portlet-column portlet-column-last" id="column-3">
        $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
    </div>
</div>

另外，如果您指向正确的文件，请检查layout-template.xml文件。