如何使用Bootstrap在Craft网站上创建常见问题解答？

Question

我正在尝试在FAQ页面上的Craft网站上创建Bootstrap手风琴，该如何通过条目实现？

Answer 1

首先在管理节中为常见问题解答创建矩阵字段，然后在您的常见问题解答条目上创建标题和描述的子字段，然后关注您的内容，然后在FAQ页面中添加您的内容，然后输出以下代码输出条目：

{% for Faqs in entry.faqs.all() %}
                <div class="card">
                    <div class="card-header" id="heading{{count}}">
                        <h2 class="mb-0">
                            <button type="button" class="btn btn-link" data-toggle="collapse"  aria-expanded="true" aria-controls="collapse{{count}}"
                            data-target="#collapse{{count}}">
                            <i class="fa fa-plus"></i> {{Faqs.question}}</button>                                   
                        </h2>
                    </div>
                    <div id="collapse{{count}}" class="collapse " aria-labelledby="heading{{count}}"
                     data-parent="#accordionExample">
                        <div class="card-body">
                    {{Faqs.answers}}                        
                     </div>
                    </div>
            
                </div>
                                {% set count= count+1 %}

                {% endfor %} ``

        
      
    
      {% for Faqs in entry.faqs.all() %}
                        <div class="card">
                            <div class="card-header" id="heading{{count}}">
                                <h2 class="mb-0">
                                    <button type="button" class="btn btn-link" data-toggle="collapse"  aria-expanded="true" aria-controls="collapse{{count}}"
                                    data-target="#collapse{{count}}">
                                    <i class="fa fa-plus"></i> {{Faqs.question}}</button>                                   
                                </h2>
                            </div>
                            <div id="collapse{{count}}" class="collapse " aria-labelledby="heading{{count}}"
                             data-parent="#accordionExample">
                                <div class="card-body">
                            {{Faqs.answers}}                        
                             </div>
                            </div>
                    
                        </div>
                                        {% set count= count+1 %}
        
                        {% endfor %}