用于在单个模块位置中可变数量的模块的PHP代码 [英] PHP code for variable numbers of modules in a single module position

问题描述

我正在使用Bootstrap 4.0从头开始创建Joomla 3.8模板.同时，我将同时自学Bootstrap 4.0和PHP，所以请多多包涵.

I am creating a Joomla 3.8 template from scratch using Bootstrap 4.0. At the same time I am teaching myself both Bootstrap 4.0 and PHP as I go along, so please bear with me.

在主要组件区域下，我有一个全角位置，称为"feature_bottom".目前，我已经为该职位分配了两个模块.在宽阔的台式机屏幕上，它们以全角垂直堆叠，但是我希望它们并排放置，直到较小的设备断点为止.在另一个菜单项上，该位置可能有三个或四个模块，因此硬编码这些模块的列宽是行不通的.

Under the main component area I have a full-width position which I have called 'feature_bottom'. At the moment, I have two modules assigned to that position. On a wide desktop screen they are stacked vertically, each full width, but I want them to be side-by-side until the smaller device break points. On another menu item there might be three or four modules in that position, so hard-coding the column width for the modules doesn't work.

在我的index.php中，我体内有以下代码:

In my index.php I have this code in the body:

<?php if ($this->countModules('featurebottom')) : ?>                          
  <div class="container-fluid">
       <div class="row">
        <div id="featurebottom" class="<?php echo $featurebottom_width; ?> featurebottom">
            <jdoc:include type="modules" name="featurebottom" style="xhtml"/>
        </div>
       </div>
    </div>
<?php endif; ?>            

我无法解决的问题是如何以及在何处告诉模板，在特征加屏幕上，如果feature_bottom位置有两个模块，那么它们应该与col-md-6并排放置，如果它们共有三个模块，每个模块与col-md-4并排，四个模块分别是col-md-3，依此类推，多达十二个模块分别分布在三行col-md-4上.

What I can't work out is how and where to tell the template that on medium plus screens if there are two modules in the feature_bottom position then they should be side-by-side with col-md-6 each, if there are three modules they are side-by-side with col-md-4 each, four modules col-md-3 each and so on, up to twelve modules spread over three rows of col-md-4 each.

我已经在head标签上方尝试了此代码(最多只能测试4个模块):

I have tried this code above the head tag (only up to 4 modules for testing purposes):

<?php if ($featurebottom == 2) {
    $featurebottom_width = "col-md-6";
} elseif ($featurebottom == 3) {
    $featurebottom_width = "col-md-4";
} elseif ($featurebottom == 4) {
    $featurebottom_width = "col-md-3";
} else {
    $featurebottom_width = "col-md-12";
}
?>

...但是什么也没发生.这两个模块仍然堆叠在一起.

... but nothing happens. The two modules are still stacked above each other.

我在做什么错了?

可以在此处查看模板: https://www.vanillasponge.co.uk

The template can be viewed here: https://www.vanillasponge.co.uk

更新:27.02.18

如果我通过浏览器的Web Developer> Inspector手动编辑页面，并在"moduletable"之后添加类"col-md"(对于每个实例)，我将获得想要的效果(参见图片).

If I edit the page manually via a browser's Web Developer > Inspector and add the class 'col-md' after 'moduletable' (for each instance) I can get exactly the effect I want (see image).

手动调整的模块的屏幕截图

如果我在Joomla模块的高级"选项卡中将"col-md"添加为模块类后缀，则它也可以(某种)起作用，但是a)它将模块标题下的主要内容加倍缩进，并且b)我没有不需要手动执行此操作，主要是因为技术含量稍低的客户端将来可能需要在以后的18个月左右由我更新其当前的Joomla模板时使用此模块的版本，以便与Bootstrap4.我不能保证他们会记得添加模块类后缀.

If I add " col-md" as a Module Class Suffix in the Joomla module Advanced Tab then it also (sort of) works, but a) it double indents the main content underneath the module title, and b) I don't want to have to do this manually, mainly because my somewhat less techy clients may have to use a version of this module in the future when their current Joomla templates are updated by me in the next 18 months or so in order to work with Bootstrap 4. I can't guarantee that they would remember to add a module class suffix.

推荐答案

我已经找到了答案(感谢 jquery网站).它所要做的就是在我的index.php文件的最底部添加一个很小的jquery脚本，该脚本恰好在关闭body标签之前(加上打开和关闭脚本标签，此处未显示:

I've found the answer (with thanks to the jquery website). All it takes is a tiny jquery script added to the very bottom of my index.php file, just before the closing body tag (plus opening and closing script tags, which don't show here:

<script>
$( ".feature-bottom > div" ).addClass( "col-md" );
</script>

对于那些对我了解甚少的Jquery的人来说，这意味着什么:

What this means, for those who know as little about Jquery as me, is:

1. .feature-bottom 是父div的类，

> div 是指父级的子div，

> div means child divs of the parent, and

.addClass 将预定义的CSS类添加到这些子级中.可以在双引号中添加多个类，每个双引号之间都用空格隔开，就像在html中一样.

.addClass adds a predefined css class to those children. It is possible to add more than one class inside the double quotes, each separated with a space, just as you would in html.

这篇关于用于在单个模块位置中可变数量的模块的PHP代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！