Customizing the Blog Injector plugin is easy as copying the template for the chosen framework, to your theme. In fact, you just need to copy the blog_theme.html.twig template for under the templates folder of the theme you are using for your web site.

The blog_theme.html.twig template collects several blocks, which glued together, make up the full blog. Let's examine those blocks in detail.

  • The breadcrumbs block renders the breadcrumbs block.
  • The pagination block renders the pagination block.
  • The blog_content block renders the blog page content.
  • The blog_posts block renders the blog posts and the sidebar
  • The posts block just renders the blog posts.
  • The blog_post block renders a single post and the sidebar.
  • The post block renders the single post.
  • The post_header block renders the single post's header.
  • The post_header_title block renders the post's header title.
  • The post_header_taxonomy block renders the post's tags.
  • The post_header_date block renders the post date.
  • The post_header_date_extended block renders the post extended date. By default, this block is displayed only for small devices.
  • The post_contents block renders the contents of post.
  • The prev_next_buttons block renders the post commands to move to next post or to return the previous one.
  • The sidebar block renders the page sidebar.
  • The simple_search block renders the simple Search Form on the page sidebar.
  • The sidebar_taxonomy block renders the popular tags block on the page sidebar.
  • The sidebar_topictags block renders the popular tags block on the page sidebar, using the Topic Menu plugin.
  • The related_pages block renders the related pages block on the sidebar.
  • The random_pages block renders the random pages block on the sidebar.
  • The archives block renders the archives block on the sidebar.
  • The feed block renders the feed block on the sidebar.

You can customize the blocks you need to fit your needs. For example the Pure theme defines the post_header as follows:

{% block post_header %}
<div class="list-blog-header">
    {{ block('post_header_date') }}
    {{ block('post_header_title') }}      
    {{ block('post_header_taxonomy') }}
    {{ block('post_header_image') }}
</div>
{% endblock %}

while the Bootstrap theme defines the same block as follows:

{% block post_header %}
<div class="row list-blog-header">
    {{ block('post_header_left') }}  
    {{ block('post_header_right') }}
    {{ block('post_header_image') }}
</div>
{% endblock %}

You should noticed that this last block introduces the post_header_left and the post_header_right which are not defined in the Pure theme. This means you really have the freedom to customize everything there.