Warp FRAMEWORK教程

Yootheme教程

Warp 架构中文说明——创建一个新的模块布局

模块布局定义了一组模块在特定位置的对齐和比例。例如,它们可以垂直或水平对齐。默认情况下,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%; } 

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

默认情况下,您可以在上面介绍的三个选项equaldoublestack之间进行选择如果你想要一个自定义尺寸分布 - 比方说连续三个模块的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类的width35width30这些还不存在(所有现有的宽度类都位于/warp/css/layout.css中),所以我们必须将下面的代码片段添加到现有的样式表中。你可以将它添加到现有的css / layout.css中


.width30 { width: 30%; }
.width35 { width: 35%; }
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

Search