Wie füge ich CSS-Dateien nur zur Startseite hinzu?

Ich versuche, der Startseite eine CSS-Datei hinzuzufügen. Ich habe gesehen, wie einem Drupal 8-Thema Stylesheets (CSS) und JavaScript (JS) hinzugefügt wurden . Ich muss nur den Namen der HOOK-Maschine für die Titelseite kennen.

function THEMENAME_preprocess_HOOK(&$variables) {
  $variables['#attached']['library'][] = 'CSSPATH';
}

Welchen Namen sollte ich für die Vorverarbeitungsfunktion verwenden, damit Drupal sie nur für die Startseite aufruft?

In diesem Tutorial finden Sie genau das, was Sie möchten, unter dem Thema Hinzufügen von Bibliotheken zu bestimmten Seiten. Drupal 8 Theming Fundamentals, Part 1

Um Ihnen ein echtes Beispiel zu geben, werde ich es mit dem Bartik-Thema erklären, damit Sie es leicht ändern können.

Ich habe eine CSS-Datei cssfile.cssunter dem Pfad erstellt css/cssfile.css. Jetzt möchte ich diese CSS-Datei nur auf der Startseite verwenden.

• Schritt 1: Fügen Sie die Bibliothek zum Thema hinzu: Fügen Sie den folgenden Code in das Thema einbartik.libraries.yml

  css-filling: 
    css:
      theme:
        css/cssfile.css: {}
  

  Hinweis: Hier habe ich css-fillingdieser Bibliothek den Namen gegeben , aber Sie können jeden anderen Namen geben. Wir werden diesen Namen im Pfad verwenden
  

• Schritt 2: Das Einstellen des Codes in der bartik.themeoben genannten Bibliothek (letztendlich CSS) wird nur zur Startseite hinzugefügt.

  function bartik_preprocess_page(&$variables) {
    if ($variables['is_front']) {
      $variables['#attached']['library'][] = 'bartik/css-filling';
    }
  }
  

  Hinweis: Im obigen Code ist das Wichtigste der Pfad. Der bartikTeil stammt aus dem themenameund css-fillingstammt aus Schritt 1.

Diesen Code habe ich auf meiner Testseite getestet und er funktioniert nur auf der Titelseite.

Sie können Bibliotheken in Vorlagen anhängen. Dies ist beispielsweise html.html.twigein idealer Ort, um vom Pfad abhängige Bibliotheken anzuhängen. Sie können entweder Vorlagenvorschläge verwenden, z. B. html--front.html.twigeinen Zweigausdruck.

Die anderen Antworten drehen sich um den Vorprozess, was in Ordnung ist. Der Vorprozess ist jedoch eine Abstraktion und macht die Themenentwicklung undurchsichtiger, dh er vergräbt wichtige Informationen in einer PHP-Funktion, anstatt in der Vorlage offensichtlich und klar zu sein.

Ich sage nicht, dass Vorverarbeitung schlecht ist, nur dass es weitgehend davon abhängt, wie Sie arbeiten möchten und wie undurchsichtig / abstrakt Sie thematisieren möchten.

Um eine Bibliothek nur für die Startseite anzuhängen, html.html.twigkönnen wir den notOperator und die root_pathVariable als Bedingung verwenden:

{{ not root_path ? attach_library('my_theme/my_library') }}

Wenn Sie den Vorlagenvorschlag erstellen html--front.html.twig, können Sie die Bibliothek bedingungslos anhängen:

{{ attach_library('my_theme/my_library') }}

Stellen Sie sicher, dass Sie zuerst das gewünschte CSS als Bibliothek erstellt haben libraries.yml. Dann müssen Sie hook_preprocess_page()wie folgt verwenden:

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function THEMENAME_preprocess_page(&$variables) {
  // Add page preprocess functions here.
  if ($variables['is_front'] == TRUE) {
    // Attach your css 
    // - replace "theme_name" with the name of your theme
    // - replace "library_name" with the name of what you called 
    //   this particular css library in libraries.yml
    $variables['#attached']['library'][] = 'theme_name/library_name'
  }
}

Möglicherweise erstellen Sie eine page--front.html.twigDatei besser und hängen sie dort über Ihre libraries.ymlDatei an. Dies ist der bevorzugte Ansatz in Drupal 8.