Working with Search Results templates

If we navigate back to our Search results page, we can inspect the markup to help locate which Twig templates Drupal uses to output the content. If we break the page into sections, we will be left with two different sections:

1. First is the search results list, which is currently being output as an ordered list. We can address this by modifying the item-list-html.twig template.

2. Second is the Search results itself, which contains the title and snippet with a highlighted keyword. We will address this by modifying the search-result.html.twig template.

Modifying the item list template

Using the FILE NAME SUGGESTIONS, we can navigate to the core/modules/system/templates folder and copy the item-list.html.twig template to our themes/octo/templates folder. Next, we will need to rename the template to item-list--search-results.html.twig and then add the following markup:

New markup

{% set classes = ['list-unstyled'] %}

{% if context.list_style %}
  {%- set attributes...