Change article layout on homepage

Question

I would like to change the layout of articles on my homepage. But I cannot find the template hereof.

I've got my page.html.twig, which but that only includes a placeholder "{{ page.content }}" in which all the articles are loaded.

And then I've got node--article--full.html.twig, but the layout there only seems to affect the article pages.

So where can I find the template to adapt the articles and their layout as shown on the homepage? Do I have to create something like page--node--article.html.twig to overwrite the design of something?

Answer 1

The list of nodes listed in the homepage by default is from the Frontpage(/admin/structure/views/view/frontpage) view. If you'll go to that view, you'll notice on the FORMAT section, under Show, the value is "Content | Teaser". This means that the each node displayed is using a specific View Mode called "Teaser".

Next is to enable twig debugging. Once that's done and you check the homepage's markup, specifically on one of the article listings, you'll see this:

Notice that I'm highlighting one "article teaser" and on the markup you'll see a list of file names i.e. node.html.twig, node--teaser.html.twig and etc. and the one with the "x" is the default template that is being used.If none of the other files are found then Drupal always goes to the base template which in this case is node.html.twig. So if Drupal matches a theme suggestion in the list to a physical file on your theme, that's what it will use.

With those information, you can go to the current template file using the file path(core/themes/bartik/template/node.html.twig), copy it into your custom theme, rename it as node--teaser.html.twig, do some random edits for initial testing, clear the cache and then visit the homepage again.

You should see that the "x" under "FILE NAME SUGGESTIONS" will now be beside node--teaser.html.twig and your changes to the file as well.

Answer 2

I found it, the template to change articles on the homepage is node.html.twig

If I understand correctly, there are other ways to name this template so that it becomes more specific, as node.html.twig is like a base template for all Drupal nodes (although I haven't found the exact definition hereof).