it-swarm.com.de

Wie füge ich JavaScript auf einer einzelnen Seite so hinzu, dass es skalierbar ist?

Ich habe eine Reihe von Materialien über die Verwendung von JS in Drupal 8 Theming und Modulentwicklung) gelesen, aber nicht verstanden, wie man Dinge wie GSAP-Animationen und interaktive D3-Diagramme zu einzelnen Knoten.

Jedes benutzerdefinierte JS wird immer nur auf einer Seite benötigt. Im Laufe der Zeit kann die Website auf 10 oder sogar 100 solcher Seiten anwachsen.

Das Lesen der Modulentwicklungsdokumentation, das Erstellen eines benutzerdefinierten Moduls und das Hinzufügen jeder JS-Datei zur Datei myModule.libraries.yml mit Logik zum Laden jeder auf nur einer Seite basierend auf der ID würde funktionieren, aber bevor ich diesen Pfad beschreite, dachte ich, ich würde es tun Fragen Sie, ob es einen anderen Weg gibt, dies zu tun.

7

Die folgenden Schritte machen die Arbeit mit externen JavaScript-Bibliotheken in Drupal 8 absolut klar (einschließlich des bedingten Ladens auf bestimmten Seiten):

Schritt 1 : Platzieren Sie die JavaScript-Datei in Ihrem Design oder Modul in einem Ordner namens js. Nach diesem Schritt muss Ihre Ordnerstruktur wie folgt aussehen:

my-theme/js/my-script.js

Schritt 2 : Wenn Ihr Thema bereits eine my-theme.libraries.yml-Datei enthält, öffnen Sie sie, wenn nicht, erstellen Sie sie.

In Drupal 8 Bibliotheken sind einfach Sammlungen von CSS- oder JS-Dateien, die unter einem eindeutig identifizierten Bibliotheksnamen gebündelt sind.

In diesem Schritt müssen wir die in Schritt 1 erstellte JS-Datei in unsere Bibliothek aufnehmen. Dazu fügen wir der Datei my-theme.libraries.yml die folgenden Codezeilen hinzu.

my-library:
  js: 
    js/my-script.js: {}

Jetzt haben wir eine Asset-Bibliothek namens my-theme/my-library, die auf verschiedene Arten auf unsere Site geladen werden kann.

Schritt 3 : Der letzte Schritt besteht darin, die Bibliothek auf unserer Site zu laden. Dies kann auf vier verschiedene Arten erfolgen:

Weg 1: Bibliothek global über die Datei theme-name.info.yml anhängen

Bibliotheken können in der Datei theme-name.info.yml angegeben werden, indem Sie sie wie folgt zur Eigenschaft library hinzufügen:

name: my-theme
type: theme
description: my theme
package: other
core: 8.x
libraries: 
  - my-theme/global-effects
  - my-theme/my-library

base theme: stable

Alle hier in der Datei themename.info.yml angegebenen Bibliotheken werden auf jeder Seite zur Verfügung gestellt.

Weg 2: Verwenden von hook_page_attachments_alter in der Datei theme-name.theme.

Die folgenden Codezeilen hängen unsere Bibliothek nur an die Seite mit den Knotenlisten an.

function mytheme_page_attachments_alter(&$page){
  $path = $current_path = \Drupal::service('path.current')->getPath();
  if($path == '/node') {
    $page['#attached']['library'][] = 'my-theme/my-library';
  }
}

Weg 3: Ein weiterer nützlicher Weg, um eine Bibliothek bedingt hinzuzufügen, ist die Verwendung einer Vorverarbeitungsfunktion wie hook_preprocess_page ().

Hier ist ein weiteres Beispiel für die Beschränkung unserer Asset-Bibliothek auf die Startseite

function mytheme_preprocess_page(&$variables){
  if ($variables['is_front'] == TRUE) {
    $variables['#attached']['library'][] = 'my-theme/my-library';
  }
}

Weg 4: Asset-Bibliotheken können auch aus einer Twig - Vorlage mit der Funktion attach_library angehängt werden. Jederzeit, wenn diese Vorlage vorhanden ist Bei Verwendung wird die entsprechende Bibliothek gemäß den vorlagenspezifischen Bedingungen angehängt.

Um dies in Aktion zu sehen, müssen wir eine Vorlage in unserem Thema erstellen oder ändern. In diesem Beispiel ändern wir die Vorlage node.html.twig, um unsere Bibliothek nur anzuhängen, wenn node.id == 1 mit den folgenden Codezeilen versehen ist

{% if node.id == 1 %}
  {{ attach_library('my-theme/my-library') }}
{% endif %}

Wenn dies an Ort und Stelle ist und Knoten 1 auf unserer Site besucht, können wir unsere Bibliothek in Aktion sehen.

22
vivek agarwal

Siehe: https://www.drupal.org/developing/api/8/assets

Zitat von Seite:

Anhängen einer Bibliothek an Seite (n)

Je nachdem, welche Assets geladen werden müssen, möchten Sie die entsprechende Asset-Bibliothek auf andere Weise anhängen. Schließlich werden einige Asset-Bibliotheken auf allen Seiten benötigt, andere nur sehr selten und wieder andere auf den meisten, aber nicht ganz allen.

Am wichtigsten ist jedoch, dass wir nicht entscheiden, ob wir eine Bibliothek anhängen möchten, basierend auf der Seite, auf der wir uns befinden (dh auf welcher URL oder Route), sondern basierend darauf, welche Dinge auf der Seite sichtbar sind: Wenn eine Seite ein '# enthält Geben Sie '=>' table ', einen' #type '=>' dropbutton 'und einen' #type '=>' foobar 'ein, dann laden wir nur die Bibliotheken, die jedem dieser' # -Typen zugeordnet sind. Wir sind jedoch nicht nur auf '#type' beschränkt: Vielleicht möchten wir eine bestimmte Asset-Bibliothek nur für eine bestimmte Instanz eines '#type' laden. In diesem Fall hängen wir es einfach an das Render-Array dieser Instanz an.

Natürlich gibt es sehr selten einen triftigen Grund, ein bestimmtes Asset tatsächlich auf alle Seiten zu laden (z. B. ein Analytics-JavaScript, das das Laden von Seiten verfolgt), unabhängig von den "Dingen" auf einer Seite.

2
NWOM