SiteFarm Subtheme Templates and Twig Debugging

One of the unique aspects to local development is the ability to turn on Twig Debugging. Twig debugging annotates the source code with the available Twig template names and specificity of each name as well as an indicator for the template currently being used.

After running fin init to build your local development environment there will be a docroot/sites/default/services.local.yml file with twig debug set to true.

twig.config:
    # Twig debugging:
    #
    # When debugging is enabled:
    # - The markup of each Twig template is surrounded by HTML comments that
    #   contain theming information, such as template file name suggestions.
    # - Note that this debugging markup will cause automated tests that directly
    #   check rendered HTML to fail. When running automated tests, 'debug'
    #   should be set to FALSE.
    # - The dump() function can be used in Twig templates to output information
    #   about template variables.
    # - Twig templates are automatically recompiled whenever the source code
    #   changes (see auto_reload below).
    #
    # For more information about debugging Twig templates, see
    # https://www.drupal.org/node/1906392.
    #
    # Not recommended in production environments
    # @default false
    debug: true

While viewing source code on your local build you should now see comments like this.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu' -->
<!-- FILE NAME SUGGESTIONS:
   x menu--main--region-navigation.html.twig
   * menu--region-navigation.html.twig
   * menu--region-navigation.html.twig
   * menu--main.html.twig
   * menu.html.twig
-->
<!-- BEGIN OUTPUT from 'profiles/sitefarm/themes/sitefarm_one/templates/navigation/menu--main--region-navigation.html.twig' -->

     <ul suggestion="region_navigation" class="menu sf-js-enabled" style="touch-action: pan-y;">A Bunch of Code...</ul>
  
<!-- END OUTPUT from 'profiles/sitefarm/themes/sitefarm_one/templates/navigation/menu--main--region-navigation.html.twig' -->

As you can see above the X denotes the template being used and the "BEGIN OUTPUT" and "END OUTPUT" comment inform you where to find the template being actively used.

If the X was next to menu.html.twig you could create a template with the same name, or any of the more specific file names above to override this template. You can then copy paste the code from the previously used template and make your altercations, or extend the template and make altercations to twig blocks or variable arrays.

Read twig debug documentation.

Read documentation on extending twig templates.