Erstellen von für den universellen Editor instrumentierten Bausteinen create-block

Erfahren Sie, wie Sie Bausteine erstellen, die für den universellen Editor beim WYSIWYG-Authoring mit Edge Delivery Services instrumentiert sind.

Voraussetzungen prerequisites

Diese Anleitung enthält schrittweise Anweisungen zum Erstellen von Bausteine, die für den universellen Editor beim WYSIWYG-Authoring mit Edge Delivery Services instrumentiert sind. 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.

Diese Anleitung setzt Kenntnisse über WYSIWYG-Authoring-Projekte mit Edge Delivery Services sowie über den universellen Editor voraus. Bevor Sie beginnen, sollten Sie bereits Zugriff auf Edge Delivery Services haben und mit den zugehörigen Grundlagen vertraut sein. Das heißt:

Diese Anleitung baut auf der Arbeit auf, die im Rahmen des Erste-Schritte-Handbuchs für Entwickelnde zum WYSIWYG-Authoring mit Edge Delivery Services durchgeführt 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 Erste-Schritte-Handbuch für Entwickelnde zum 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 Zitatblock 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 Zitatblock hinzu und speichern Sie die Datei.

JSON-Beispiel

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

Screenshot

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

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 Ihre main-Verzweigung.

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. Kehren Sie zum Editor für Ihr Projekt zurück.

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

3. Fügen Sie im neuen quote-Ordner eine Datei quote.js hinzu, um die Blockdekoration zu implementieren, indem Sie das 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 quote-Ordner eine Datei quote.css hinzu, um den Stil 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 Ihre main-Verzweigung.

6. Kehren Sie zur Browser-Registerkarte des universellen Editors zurück, wo Sie die Seite Ihres Projekts bearbeitet haben, und laden Sie die Seite neu, um den formatierten Block anzuzeigen.

7. Sehen Sie sich den nun formatierten Zitatblock auf der Seite an.

8. Stellen Sie sicher, dass die Änderungen in die Produktion übertragen wurden. Navigieren Sie hierzu zur veröffentlichten Seite. 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.

Wiederverwenden Ihrer Bausteine für das dokumentbasierte Authoring reusing-blocks

Sie können die Bausteine, die Sie zum WYSIWYG-Authoring mit dem universellen Editor erstellen, für das dokumentbasierte Authoring nutzen, sofern Sie dasselbe Inhaltsmodell verwenden.

Weitere Informationen finden Sie im Dokument Bausteine für WYSIWYG-Authoring und dokumentbasiertes Authoring.

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.

Lesen Sie das Dokument Inhaltsmodellierung beim WYSIWYG-Authoring mit Edge Delivery Services-Projekten, um zu erfahren, wie die Inhaltsmodellierung beim WYSIWYG-Authoring mit Edge Delivery Services-Projekten funktioniert.