While we know what our new Twig template should be named, we should also consider just how similar the Blog detail page is to each Post displayed on our Blog listing page. In fact, the only real differences are that our Blog detail displays the full content of our Post along with the Comments.
So instead of creating a brand new template, we can begin by duplicating the node--post--listing.html.twig template located in our themes/octo/templates folder and rename it node--post--full.html.twig.
Make sure to clear Drupal's cache and refresh the Blog detail page.
At first glance, we would think that most of our theming is completed for us. However, we actually have some components that need to be removed, such as the read more link and the teaser field. While some of these fields may not be displayed because they are being controlled from the Manager display admin, it is still good practice to remove these fields from our template.
We can begin by removing and replacing fields that we do not need. Begin by opening our Twig template, node--post--full.html.twig, and adjusting the markup in our post-content section:
New markup
<div class="post-content">
{{ title_prefix }}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{{ title_suffix }}
<div class="post-meta">
<span class="post-meta-user">
<i class="fa fa-user"></i> By {{ author_name }}
</span>
<span class="post-meta-tag">
<i class="fa fa-tag"></i> {{ content.field_tags }}
</span>
<span class="post-meta-comments">
<i class="fa fa-comments"></i>
<a href="{{ url }}/#comments">{{ comment_count }}</a>
</span>
</div>
</div>Make sure to save the template, clear Drupal's cache, and refresh the Blog detail page. The read more link should now be gone and the page is starting to resemble our mockup:
One thing we may be asking ourselves is how is the full content of our Post being displayed if we are not printing it? We actually are printing it at the bottom of our template using the general {{ content }} variable. If we want to be more specific though, we can add the full content field directly to our template and exclude it from the general content variable by following these steps:
- Open
node--post--full.html.twig. - Modify the markup as shown here:
New markup
<div class="post-meta"> ..existing markup.. {{ content.field_full_content }} </div> {{ content|without('field_image','field_teaser', 'field_tags', 'field_full_content') }} </article>
Make sure to save the template, clear Drupal's cache, and refresh the Blog detail page. We now have the first part of our blog detail page complete. What we are still missing though is the comment thread and comment form, which will allow users to interact with each post. Let's take a look at how to work with comments.