سؤال

أنا أعمل على موقع Jekyll وأنا أحاول إخراج ثلاثة عمود Divs متداخلا في صف. السائل يجعل هذا سهل جدا مع cycle منقي:

{% for p in site.categories.post %}
    {% cycle 'add rows': '<div class="row">', nil, nil %}
        <div class="column">
            <a href="{{ p.url }}">{{ p.title }}</a>
        </div>
    {% cycle 'close rows': nil, nil, '</div>' %}
{% endfor %}

ومع ذلك، فإن هذا يعمل فقط عندما يكون هناك 3 و 6 و 9 وما إلى ذلك. عندما يكون العدد الإجمالي للوظائف ليس مضاعف ثلاثة، <div class="row"> لا يتم إغلاقه أبدا - وينتهي حلقة الحلقة قبل أن يتم إخراج علامة الإغلاق كجزء من close rows دورة.

في Ruby، PHP، أو أي لغة أخرى يمكنني إصلاح هذا بسهولة مع مشغل Modulus، لذلك بالإضافة إلى ذلك close rows دورة سأخرج </div> متى if site.categories.size % 3 == 0. وبعد ومع ذلك، فإن السائل، لأنه لغة قالب آمنة، لا يدعم المعدض.

ماذا يمكنني أن أفعل لإغلاقه بشكل صحيح <div class="row"> عندما يكون العدد الإجمالي للوظائف ليس مضاعف ثلاثة؟

هل كانت مفيدة؟

المحلول

لمثال الخاص بك، يمكنك استخدام {% cycle 'close rows': nil, '</div>', '</div>' %} بعد {% endfor %}.

نصائح أخرى

لقد وجدت بهذه الطريقة للعمل عظيم!

{% assign mod = forloop.index0 | modulo:4 %}
{% if mod == 0 %}
   <!-- Do stuff -->
{% endif %}

الطريقة الوحيدة الآن هي كتابة مرشح سائل لإنجاز هذا. قم بتسجيل المرشح في مكان ما في التعليمات البرمجية حيث يكون من المناسب (في أماكن مختلفة إذا كنت تستخدم مع القضبان وبدونها).

السائل :: Template.register_filter (Liquidfilters)

في مشاريعك / دليل ليب إضافة liquid_filters.rb:

module LiquidFilters  
  # makes modulus operation available to templates
  def mod(data, param)
    data % param
  end  
end

بعد ذلك يمكنك استخدامه مثل متابعته في القوالب الخاصة بك: {{variable | وزارة الدفاع: 5}}

وإذا كنت بحاجة إلى استخدامه لبعض المنطق، يمكنك التقاط القيمة.

{% capture modulus %}{{ variable | mod:5 }}{% endcapture %}

لقد لاحظت أن القيمة الملتقطة هي سلسلة لذلك من أجل مقارنتها

{% if modulus == "0" %}
 ..
{% endif %}

لقد استخدمت خدعة أخرى في حلقة: عديمة الفائدة في قضيتك، مفيدة إذا كنت تريد فقط عن مودم لمعرفة ما إذا كان خطك قد انتهى وتحتاج إلى صف جديد، كما فعلت.

في هذا المثال سأذهب مع خط 4 عناصر:

{% assign currentRow = 1 %}
# enter the for loop ... then, with 4 as the divisor:
{% if forloop.index == 4 * currentRow %}
  # do whatever you want
  {% assign currentRow = currentRow + 1 %}
{% endif %}
# exit the for loop

ليست لطيفة جدا، ولكن سهلة.

أدرك أن السؤال قد تم حله للمتعة، لكنني جئت مؤخرا في هذا النوع من الوضع في السائل، وأعتقد أنني أقدم حلاي في حالة مساعدة شخص ما بمتطلبات علامات مماثلة.

في حالتي، قمت بالفعل بمرور بيان إذا كان هناك منشور واحد على الأقل، لذلك قمت بإنشاء أول "صف" DIV خارج الحلقة. أنا أيضا أغلقه بعد حلقة. هذا يحمي من القضية حيث يوجد أقل من ثلاث وظائف.

<div class="row">

    {% for p in posts %}
        <div class="column">
            <!-- Post code here -->
        </div>
        {% unless forloop.last %}
            {% cycle '', '', '</div><div class="row">' %}
        {% endunless %}
    {% endfor %}

</div>

بعد كل ثلاث وظائف، ستغلق الدورة الصف الحالي وفتح واحدة جديدة unless المنشور كان آخر واحد في Forloop، وفي هذه الحالة لا نريد فتح صف جديد، والسماح بالانفصال </div> أغلقها.

لقد تعلمت الكثير من هذا المنصب، وهذه هي ثلاثة أنماط استخدمتها طوال مشروعي. عملت كبيرة مع bootstrap أيضا. ما عليك سوى تغيير فئة العمود في التعليمات البرمجية التالية. بدلا من الأعمدة، يمكن تطبيق نفس الأنماط على سيناريوهات أخرى حيث يكون modulo مفيد، مثل الصفوف الفردية حتى. آمل أن يساعد شخص ما -

أربعة أعمدة:

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil, nil, nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, nil, nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}
</div>

ثلاثة أعمدة:

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil, nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>', '</div>' %}
</div>

عمودين:

<div class="container">
    {% for post in site.posts %}
        {% cycle 'add row' : '<div class="row">', nil %}
            <div class="column">
                <!-- liquid tags here -->
            </div>
        {% cycle 'end row' : nil, '</div>' %}
    {% endfor %}
    {% cycle 'end row' : nil, '</div>' %}
</div>

IIRC السائل لا يمنع عملية المعدلات، فقط % حرف. يمكنك إجراء معامل دون استخدام % المشغل أو العامل. علي سبيل المثال، 14.modulo(3) => 2 بدلاً من 14 % 3.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top