OctoberCMS - 重写博客组件（Rainlab博客）同一页面中的多种用法

Question

I am new to OctoberCMS and I am stuck now, I am facing issue to use my custom blog posts component (which overrides Rainlab blog posts) in the same page multiple times.

Say I have created an alias of default blogPosts to postLists and I defined my custom HTML structure and it is working well, no issues.

Now what I want is to use the postLists post structure in my page for three different categories and here I am stuck because when I pass variable to component like this - { % component 'postLists' categoryFilter='news' %} it does not work for the category filter and if I select a category from drag drop component UI it becomes global categoryFilter setting for the page.

This is my requirement.

My postList component code:-

{% set posts = __SELF__.posts %}
{% for post in posts %}

<div class="col-sm-6">
      <div class="row">
        <div class="col-sm-4 col-4 content_body_img">
            <a href="{{ post.url }}">
        {% if post.featured_images.count > 0 %}
            <img class="media-object" src="{{ post.featured_images.first.getThumb(108, 108) }}" />
        {% else %}
            <img class="media-object" src="http://placehold.it/108x108" />
        {% endif %}
    </a>
        </div>
        <div class="col-sm-8 col-8">
          <p><a href="{{ post.url }}">{{ post.title }}</a></p>
          <!--location_date-->
          <div class="location_date">
            <ul>
              <li><i class="fa fa-calendar"></i><span> {{ post.published_at|date('j F, Y') }}<span></li>
              <li><i class="fa fa-map-marker"></i>Dubai</li>
            </ul>
          </div>
          <!--location_date end -->
        </div>
      </div>
    </div>
    <!--content_body_img end -->
{% else %}
<div class="col-sm-6 col-6 col-lg-3">{{ noPostsMessage }}</div>
{% endfor %}

Please help me, any help will be very much appreciated.

Thanks Sanny

Answer 1

This is static Approach - I will post dynamic Approach as well give me some time

Best and possibly easy solution will be ( in case you just intend to show posts ) is to add 3 Post List component with Different Category filter option for each tab.

It should do your work

make sure this is optimal solution if you just need to show lists nothing else.