模块布局定义了一组模块在特定位置的对齐和比例。例如，它们可以垂直或水平对齐。默认情况下，Warp框架提供3种不同的模块布局。你可以在这里找到这些模块布局文件/ warp / layouts / modules / layouts /。

提供了模块布局

equal.php

每个模块具有相同的尺寸，并且水平显示，彼此相邻。我们增加了对多达6个模块的支持。当然，你可以添加更多。代码示例，4个相同大小的模块（100除以4等于25）

case 4:
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[0]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[3]);
	break;

stack.php

所有模块都有一个完整的宽度，并将垂直显示，一个在另一个之下。代码示例：

printf('<div class="grid-box width100 grid-v">%s</div>', $module);

double.php

双重布局有不同的模块比例。例如，如果您有3个模块，第一个模块的尺寸是其他两个模块的两倍。代码示例：3个模块，第一个是双倍大小

case 3:
	printf('<div class="grid-box width50 grid-h">%s</div>', $modules[0]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
	break;

如何在某个位置上设置模块布局

在您的主题设置中，您可以为模块位置设置不同的模块布局。只需点击“ 配置文件”，向下滚动到“ 布局设置”部分，然后选择要应用于此位置的模块布局。

如何添加新的模块布局？

要创建新的模块布局，请将新文件添加到/ layouts / modules / layouts。最好的方法是复制现有的模块布局并修改它。例如，将/warp/layouts/modules/layouts/double.php复制到/layouts/modules/layouts/double.php。这个新的和修改的模块布局将覆盖默认的。或者只是重命名它来创建一个新的。新创建的布局现在应该在主题设置中可用。

示例：如何添加更多列

一个常见的用例是为已经支持的6列添加一个布局。假设你想要有7个模块相互相邻，尺寸相同。在这种情况下，您将/warp/layouts/modules/layouts/equal.php复制到layouts / modules / layouts /。在您的equal.php副本中，找到应如下所示的情况6。

case 6:
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[0]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[1]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[2]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[3]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[4]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[5]);
    break;

复制该完整块并将其直接粘贴到复制块下面，但在默认块之前。重复最后的printf语句，并更改$模块[5]至$模块[6] 。由于我们现在有七个列而不是六个，所以每个单个模块的宽度必须调整。由于100％除以7（模块）约为14％，所以我们将CSS类从宽度16改为宽度14。有了这些变化，新的块应该是这样的：

case 7:
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[0]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[1]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[2]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[3]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[4]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[5]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[6]);
    break;

CSS类的width14目前还不存在（所有现有的宽度类都位于/warp/css/layout.css中），所以我们必须将下面的代码片段添加到现有的样式表中。您可以将其添加到现有的/css/layout.css中.

.width14 { width: 14.2%; } 

示例：为模块创建您自己的大小分布

默认情况下，您可以在上面介绍的三个选项equal，double和stack之间进行选择。如果你想要一个自定义尺寸分布 - 比方说连续三个模块的35％/ 30％/ 35％，你将不得不创建你自己的模块布局。为此，在/ layouts / modules / layouts /中创建一个新文件- 在本例中我们将其称为custom.php。因为我们只想在这个例子中为三个模块工作，所以custom.php的内容如下所示：

<?php

switch (count($modules)) {

    case 3:
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[0]);
        printf('<div class="grid-box width30 grid-h">%s</div>', $modules[1]);
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[2]);
        break;
        
    default:
        echo '<div class="grid-box width100 grid-h">Error: The current number of 
        modules is not supported in this layout. If you need more you need to change this custom 
        layout.</div>';

}

正如你所看到的，我们已经使用了CSS类的width35和width30。这些还不存在（所有现有的宽度类都位于/warp/css/layout.css中），所以我们必须将下面的代码片段添加到现有的样式表中。你可以将它添加到现有的css / layout.css中。

.width30 { width: 30%; }
.width35 { width: 35%; }