Question

我正在尽力学习Hubspot的HubL语言和CSS，但我仍然坚持为我的博客创建一个2列格式（它们只提供1列格式）。我插入了他们的博客内容模块，然后根据自己的喜好编辑了“列表模板”代码，如下所示。在博客设置页面中，我将每个“列表页面”的帖子数设置为10，但希望将其换行为5。

我也应用了这种内联样式，以便第一列占用一半的空间，这很好，但无法弄清楚如何告诉它将帖子6-10包装到另一列。我正在阅读有关如何使其工作的所有内容，但没有任何内容直接适用于我的问题。

max-width: 50%; height: auto;

警告 - 我可以编辑下面的内容，我可以应用CSS样式，但这是我的知识范围。如果我必须在Javascript中执行某些操作，我可以将其复制粘贴到适用于该网站的文件中，但这是关于它的。

<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
            <div class="blog-section">
        <div class="blog-listing-wrapper cell-wrapper">
    {# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
            <div class="post-listing{% if simple_list_page %}-simple{% endif %}">
                {% if blog_author %}
                    <div class="hs-author-profile">
                        <h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
                        {% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="{{ blog_author.display_name }}"> </div> {% endif %}
                        <div class="hs-author-bio">{{ blog_author.bio }}</div>
                        {% if blog_author.has_social_profiles %}
                            <div class="hs-author-social-section">
                                <span class="hs-author-social-label">Find me on:</span>
                                <div class="hs-author-social-links">
                                    {% if blog_author.facebook %}
                                        <a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">&nbsp;</a>
                                    {% endif %}
                                    {% if blog_author.linkedin %}
                                        <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
                                    {% endif %}
                                    {% if blog_author.twitter %}
                                        <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</a>
                                    {% endif %}
                                    {% if blog_author.google_plus %}
                                        <a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">&nbsp;</a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <h3 class="hs-author-listing-header">Recent Posts</h3>
                {% endif %}
                {% for content in contents %}
                    <div class="post-item">
                        {% if not simple_list_page %}

                        {% if topic %}<h3>Posts about {{ page_meta.html_title|replace(' | ', '') }}</h3>{% endif %}

                            {% if content.topic_list %}
                                 <p id="hubspot-topic_data"> >
                                    {% for topic in content.topic_list %}
                                        <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                                    {% endfor %}
                                 </p>
                            {% endif %}

                            {{ content.publish_date_localized }}
                            <div class="post-header">
                                <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                            </div>
                            <div class="post-body clearfix">
                                <!--post summary-->

                                {% if content.post_list_summary_featured_image %}
                                    <div class="hs-featured-image-wrapper">
                                        <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
                                            <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
                                        </a>
                                    </div>
                                {% endif %}

                                {{ content.post_list_content|safe }}

                                {% if content_group.show_summary_in_listing %}
                                <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                {% endif %}                                    
                            </div>
                        {% else %}
                            <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            {% if not simple_list_page %}
            <div class="blog-pagination">
                {% if last_page_num %}
                    <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
                {% endif %}
                    <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
                {% if next_page_num %}
                    <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

</div>

Answer 1

您可以反转循环并使用模数将帖子拆分为2列

将您的开场循环更改为：

ulimit

然后将循环的结束更改为：

<div class="span5">{% for content in contents|reverse %}

HubSpot中的两（2）列博客布局

1 个答案: