How can I override the node template for one multi-site instance?

Question

I have several Drupal 9 sites on multi-site setup. currently all these sub sites use one theme placed in /themes/MyTheme folder.

now i need to theme few nodes on site A and site B and this is only difference between all sites. if i use page--node--x.html.twig convention to change layout of node x on site A, it changes layout of node x on all sites.

what is easiest way to apply page--node--x.html.twig only to site A but not site B?

is it possible to have theme on themes/MyTheme/ folder but copy only page--node--x.html.twig to sites/siteA/themes/custom folder to overwrite this layout only for site A?

Answer 1

I once had a question on how to get current multi-site instance name. You can use the accepted answer's code to add another template suggestion based on the name then:

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array $variables) {
  $site_path = \Drupal\Core\DrupalKernel::findSitePath(\Drupal::request());
  $site_path = explode('/', $site_path);
  $site_name = $site_path[1];
  $site_specific_suggestions = [];
  foreach ($suggestions as $suggestion) {
    $site_specific_suggestions[] = $suggestion . '__site_' . $site_name;
  }
  $suggestions = array_merge($suggestions, $site_specific_suggestions);
}

Before:

<!-- FILE NAME SUGGESTIONS:
   * node--236--full.html.twig
   * node--236.html.twig
   x node--page--full.html.twig
   * node--page.html.twig
   * node--full.html.twig
   * node.html.twig
-->

After:

<!-- FILE NAME SUGGESTIONS:
   * node--236--full--site-default.html.twig
   * node--236--site-default.html.twig
   * node--page--full--site-default.html.twig
   * node--page--site-default.html.twig
   * node--full--site-default.html.twig
   * node--236--full.html.twig
   * node--236.html.twig
   x node--page--full.html.twig
   * node--page.html.twig
   * node--full.html.twig
   * node.html.twig
-->