Erstellen von für den universellen Editor instrumentierten Blöcken create-block

Erfahren Sie, wie Sie Bausteine erstellen, die für die Verwendung mit dem universellen Editor in WYSIWYG-Authoring mit Edge Delivery Services-Projekten instrumentiert sind.

Voraussetzungen prerequisites

Dieses Handbuch enthält eine schrittweise Anleitung zum Erstellen von Bausteinen, die für den universellen Editor in WYSIWYG-Authoring mit Edge Delivery Services-Projekten instrumentiert wurden. Dies umfasst das Hinzufügen von Komponenten, das Laden von Komponentendefinitionen im universellen Editor, das Veröffentlichen von Seiten, das Implementieren von Blockdekorationen und -stilen, das Übertragen der Änderungen in die Produktion und die Überprüfung dieser Änderungen. Nach Abschluss dieser Anleitung können Sie einen neuen Block für Ihr eigenes Projekt erstellen und bereitstellen.

Dieser Leitfaden erfordert unbedingt vorhandene Kenntnisse über WYSIWYG-Inhaltserstellung mit Edge Delivery Services-Projekten sowie den universellen Editor. Bevor Sie beginnen, sollten Sie bereits Zugriff auf Edge Delivery Services haben und mit den zugehörigen Grundlagen vertraut sein. Das heißt:

Dieses Handbuch baut auf der Arbeit auf, die im Leitfaden Entwickler - Erste Schritte für WYSIWYG-Authoring mit Edge Delivery Services geleistet wurde.

Hinzufügen eines neuen Blocks zu Ihrem Projekt add-block

In dieser Anleitung erstellen Sie einen Block, um ein einprägsames Zitat auf Ihrer Seite zu rendern.

Um dieses Beispiel zu vereinfachen, werden alle Änderungen an der main-Verzweigung des Projekt-Repositorys durchgeführt. Selbstverständlich sollten Sie für Ihr eigentliches Projekt Best Practices für die Entwicklung befolgen. Entwickeln Sie hierzu in einer anderen Verzweigung und überprüfen Sie alle Änderungen über Pull-Anfragen, bevor Sie diese mit main zusammenführen.

Adobe empfiehlt, Blöcke in drei Phasen zu entwickeln:

Im folgenden Beispiel für ein Zitat wird dieser Ansatz angewendet.

Erstellen einer Blockdefinition und eines Modells create-block-model

1. Klonen Sie das GitHub-Projekt lokal, das Sie im Leitfaden Entwickler - Erste Schritte für WYSIWYG-Authoring mit Edge Delivery Services erstellt haben, und öffnen Sie es in einem Editor Ihrer Wahl.

2. Bearbeiten Sie die Datei "component-definition.json" im Stammverzeichnis des Projekts, fügen Sie die folgende Definition für Ihren neuen Anführungsblock hinzu und speichern Sie die Datei.

JSON-Beispiel

code language-json
{ "title": "Quote", "id": "quote", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Quote", "model": "quote", "quote": "<p>Think, McFly! Think!</p>", "author": "Biff Tannen" } } } } }

Screenshot

3. Bearbeiten Sie die Datei "component-models.json"im Stammverzeichnis des Projekts, fügen Sie die folgende Modelldefinition für Ihren neuen Anführungsblock hinzu und speichern Sie die Datei.

JSON-Beispiel

code language-json
{ "id": "quote", "fields": [ { "component": "text-area", "name": "quote", "value": "", "label": "Quote", "valueType": "string" }, { "component": "text-input", "valueType": "string", "name": "author", "label": "Author", "value": "" } ] }

Screenshot

4&Punkt; Bearbeiten Sie die Datei component-filters.json im Stammverzeichnis des Projekts und fügen Sie den Anführungsblock zur Filterdefinition hinzu, damit der Block zu einem beliebigen Abschnitt hinzugefügt und die Datei gespeichert werden kann.

JSON-Beispiel

code language-json
{ "id": "section", "components": [ "text", "image", "button", "title", "hero", "cards", "columns", "quote" ] }

Screenshot

5. Übertragen Sie diese Änderungen mithilfe von Git in Ihren main-Zweig.

Erstellen von Inhalten mit dem Block create-content

Nachdem Ihr standardmäßiger Zitatblock definiert und in das Beispielprojekt übertragen wurde, können Sie einer vorhandenen Seite einen Zitatblock hinzufügen.

Anwenden von Stilen auf den Block style-block

Nachdem Sie nun über einen funktionierenden Zitatblock verfügen, können Sie ihn mit Stilen versehen.

1&Punkt; kehren Sie zum Editor für Ihr Projekt zurück.

2. Erstellen Sie einen Ordner quote unter dem Ordner blocks .

3.Im neuen Ordner quote fügen Sie eine quote.js -Datei hinzu, um die Blockdekoration zu implementieren, indem Sie die folgende JavaScript hinzufügen und die Datei speichern.

JavaScript-Beispiel

code language-javascript
export default function decorate(block) { const [quoteWrapper] = block.children; const blockquote = document.createElement('blockquote'); blockquote.textContent = quoteWrapper.textContent.trim(); quoteWrapper.replaceChildren(blockquote); }

Screenshot

4. Fügen Sie im Ordner quote eine quote.css -Datei hinzu, um die Formatierung für den Block zu definieren, indem Sie den folgenden CSS-Code hinzufügen und die Datei speichern.

CSS-Beispiel

code language-css

.block.quote { background-color: #ccc; padding: 0 0 24px; display: flex; flex-direction: column; margin: 1rem 0; } .block.quote blockquote { margin: 16px; text-indent: 0; } .block.quote > div:last-child > div { margin: 0 16px; font-size: small; font-style: italic; position: relative; } .block.quote > div:last-child > div::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; height: 5px; width: 30px; background-color: darkgray; }

Screenshot

5. Übertragen Sie diese Änderungen mithilfe von Git in Ihren main-Zweig.

6&Punkt; Kehren Sie zur Registerkarte Ihres Browsers im universellen Editor zurück, wo Sie die Seite Ihres Projekts bearbeitet haben, und laden Sie die Seite neu, um Ihren formatierten Block anzuzeigen.

7&Punkt; sehen Sie den jetzt formatierten Anführungsblock auf der Seite.

8&Punkt; Stellen Sie sicher, dass die Änderungen an die Produktion gesendet wurden, indem Sie zur veröffentlichten Seite navigieren. Der Link sieht ungefähr wie folgt aus: https://<branch>--<repo>--<owner>.hlx.page

Herzlichen Glückwunsch! Sie verfügen nun über einen voll funktionierenden und formatierten Zitatblock. Sie können dieses Beispiel als Grundlage zur Erstellung Ihrer eigenen projektspezifischen Blöcke verwenden.

Blockoptionen block-options

Wenn Sie einen Block benötigen, der je nach bestimmten Umständen etwas anders aussieht oder sich etwas anders verhalten soll, sich aber nicht stark genug unterscheidet, um selbst zu einem neuen Block zu werden, können Sie die Autorinnen und Autoren aus den Blockoptionen auswählen lassen.

Durch das Hinzufügen einer classes-Eigenschaft zum Block wird die Eigenschaft in der Tabellenkopfzeile für einfache Blöcke bzw. als Wertliste für Elemente in einem Container-Block gerendert.

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

Verwenden anderer Arbeitsverzweigungen other-branches

In dieser Anleitung erfolgte die Übertragung der Änderungen der Einfachheit halber direkt auf die main-Verzweigung. Zum Experimentieren in einem Beispiel-Repository ist dies normalerweise kein Problem. Für die eigentliche Projektarbeit sollten Sie den Best Practices für die Entwicklung folgen. Entwickeln Sie hierzu in einer anderen Verzweigung und überprüfen Sie alle Änderungen über Pull-Anfragen, bevor Sie diese mit main zusammenführen.

Wenn Sie sich nicht in der main-Verzweigung entwickeln, können Sie ?ref=<branch> in der Speicherortleiste des universellen Editors anfügen, um die Seite von Ihrer Verzweigung zu laden. <branch> ist der Name der Verzweigung, wie er auch für die Vorschau Ihres Projekts oder Live-URLs verwendet wird, z. B. https://<branch>--<repo>--<owner>.hlx.page.

Die Veröffentlichung von Inhalten mit einem neuen Modell wird nur unterstützt, wenn das Modell mit der main-Verzweigung zusammengeführt wird.

Nächste Schritte next-steps

Nachdem Sie nun wissen, wie man Bausteine erstellt, ist es wichtig zu verstehen, wie man Inhalte auf semantische Weise modelliert, um ein schlankes Entwicklererlebnis zu erhalten.

Weitere Informationen zur Funktionsweise der Inhaltsmodellierung für WYSIWYG-Authoring mit Edge Delivery Services-Projekten finden Sie im Dokument Inhaltsmodellierung für WYSIWYG-Authoring mit Edge Delivery Services-Projekten .