0

我正在尽最大努力学习 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>

4

1 回答 1

0

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

将您的开场循环更改为:

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

然后将循环的关闭更改为:

   {% if loop.index % 5 == 0 %}
     </div><div class="span5">
   {% endif %}
 {% endfor %}
 </div> <!-- close the span5 we opened -->
</div> <!-- close the parent loop container -->
于 2016-01-02T16:39:10.497 回答