How do I move a node's tags to be near its author information in my Bartik subtheme

Question

I want to style a node's author data and tags slightly differently to the Bartik theme in Drupal 9.3. That is, rather than:

Submitted by user1 on Mon, 1/1/70
Tags
  foo
  bar

I'd like to have:

Submitted by user1 at Mon, 1/1/70 on foo | bar

So far, I have created a subtheme tweak with the following definition in tweak.info.yml:

name: Tweak
type: theme
description: This is a sub-theme of Bartik
core_version_requirement: ^8 || ^9
base theme: bartik
version: '9.3.0'

regions:
  header: Header
  primary_menu: 'Primary menu'
  ...

I have copied the following templates into my subtheme and modified them:

templates/node.html.twig
templates/field--taxonomy-vocabulary-1.html.twig

I have enabled my subtheme and I can confirm that the overriding templates are being executed. That is, I get the following:

Submitted by user1 at Mon, 1/1/70
on foo | bar

Unfortunately, there is a lot of HTML in between the two lines, ie.

<span>
  Submitted by 
<span class="field field--name-uid field--type-entity-reference field--label-hidden">
<span lang="" about="/user/2" typeof="schema:Person" property="schema:name" datatype="">user1</span>
</span>
at 
<span class="field field--name-created field--type-created field--label-hidden">Mon, 1/1/70 - 16:29</span>
</span>
    
</div>
  </header>
 <div class="node__content clearfix">
   <div class="field field--name-taxonomy-vocabulary-1 field--type-entity-reference field--label-above clearfix">
 on
  <a href="/taxonomy/term/7" hreflang="en">foo</a>
 | <a href="/taxonomy/term/2" hreflang="en">bar</a>
  </div>

What I'd like to have is the output from field--taxonomy-vocabulary-1.html.twig within the same <div> as the Submitted by ... content. However, I cannot see how to do that. Can anyone give me some pointers?

Answer 1

@khummari's answer didn't work for me. However, I was able to adapt it.

I continued to use field--taxonomy-vocabulary-1.html.twig to theme the tags as I desired.

I then modified node.html.twig as follows. I used

{{ content.taxonomy_vocabulary_1 }}

to render the tags in my desired location. To prevent them rendering in their default location, I rendered the node's content as follows:

{{ content|without('taxonomy_vocabulary_1') }}

This feels like a bit of a hack though. Does anyone have a better suggestion?

Answer 2

In node--article.html.twig override in your theme's template directory as follow

Then override the tags field twig template as follow

following should be the result