Gutenberg Alles, was Sie über den neuesten Editor von WordPress wissen müssen
Gutenberg ist ein neuer Editor für WordPress Ersetzen Sie den aktuellen TinyMCE-Editor. Es ist ein ehrgeiziges Projekt, das WordPress in vielerlei Hinsicht verändern wird und sowohl reguläre Endbenutzer als auch Entwickler betreffen wird, insbesondere diejenigen, die auf das Editor-Fenster angewiesen sind, um an WordPress zu arbeiten. So sieht es aus.
Gutenberg führt auch ein neues Paradigma in WordPress ein “Block”.
“Block” ist der abstrakte Begriff zur Beschreibung Markup-Einheiten die aus dem Inhalt oder dem Layout einer Webseite zusammengestellt werden. Die Idee kombiniert Konzepte, was wir heute in WordPress erreichen Shortcodes, benutzerdefiniertes HTML und Embed-Discovery in eine einzige konsistente API und Benutzererfahrung.
Einrichten des Projekts
Einige Entwickler sind sich der Tatsache bewusst, dass Gutenberg auf React aufgebaut ist Barriere ist für Einstiegsentwickler zu hoch für die Entwicklung von Gutenberg.
Das Einrichten von React.js kann recht zeitaufwändig und verwirrend sein, wenn Sie gerade erst damit beginnen. Sie benötigen mindestens einen JSX-Transformator, Babel. Abhängig von Ihrem Code benötigen Sie möglicherweise einige Babel-Plugins und einen Bundler wie Webpack, Rollup oder Parcel.
Glücklicherweise, Einige Leute in der WordPress-Community wurden verstärkt und versuchen, die Entwicklung von Gutenberg für alle so einfach wie möglich zu gestalten. Heute haben wir ein Werkzeug, mit dem eine Gutenberg-Heizplatte erzeugt wird Wir können sofort mit dem Schreiben von Code beginnen anstatt mit den Werkzeugen und den Konfigurationen zu verwirren.
Guten Block erstellen
Das Create-guten-Block ist ein initiiertes Projekt von Ahmad Awais. Es ist ein Zero-Configuration-Tool-Kit (# 0CJS), mit dem Sie den Gutenberg-Block mit einigen modernen Stacks wie React, Webpack, ESNext, Babel, ESLint und Sass entwickeln können. Folgen Sie den Anweisungen, um mit Create Guten Block zu beginnen.
Verwenden von ES5 (ECMAScript 5)
Verwenden Sie alle diese Tools, um eine einfache zu erstellen “Hallo Welt” Block scheint einfach zu viel. Wenn Sie möchten, dass Ihre Stapel schlank bleiben, können Sie einen Gutenberg-Block mit einem einfachen, alten ECMAScript 5 entwickeln, mit dem Sie möglicherweise bereits vertraut sind. Wenn Sie haben WP-CLI 1.5.0 auf Ihrem Computer installiert, du kannst einfach laufen…
wp gerüstblock[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--Macht]</pre> <p>… Bis <strong>Generieren Sie die Gutenberg Block Boilerplate nach Ihrem Plugin oder Thema</strong>. Dieser Ansatz ist insbesondere für vorhandene Plugins und Themen, die Sie vor der Gutenberg-Ära entwickelt haben, sinnvoller.</p> <p>Anstatt ein neues Plugin für die Gutenberg-Blöcke zu erstellen, möchten Sie möglicherweise die Blöcke in Ihre Plugins oder die Designs integrieren. Und damit dieses Tutorial für jedermann leicht zu folgen ist, <strong>Wir verwenden ECMAScript 5 mit WP-CLI</strong>.</p> <h4>Einen neuen Block registrieren</h4> <p>Gutenberg ist derzeit als Plugin entwickelt und wird mit WordPress 5.0 zusammengeführt, wann immer sich das Team bereit fühlt. Sie müssen es also vorerst von der installieren <strong>Plugins Seite in <code>wp-admin</code></strong>. Wenn Sie es installiert und aktiviert haben, führen Sie den folgenden Befehl im Terminal oder an der Eingabeaufforderung aus, wenn Sie sich auf einem Windows-Computer befinden.</p> <pre name="code"> wp scaffold block series --title = "HTML5 Series" --theme</pre> <p>Dieser Befehl erzeugt einen Block zum aktuell aktiven Design. Unser Block besteht aus folgenden Dateien:</p> <pre name="code"> . EIN¢?? ?? ??¢?? ?? ??¢?? ?? Serie â?? 'à  ¢?? ?? ??¢?? ?? ??¢?? ?? block.js â?? 'à  ¢?? ?? ??¢?? ?? ??¢?? ?? editor.css â?? 'à  ¢?? ?? ??¢?? ?? ??¢?? ?? style.css â?? ?? ??¢?? ?? ??¢?? ?? series.php </pre> <p>Laden wir die Hauptdatei unserer Blöcke in die <code>Functions.php</code> unseres Themas:</p> <pre name="code"> if (function_exists ('register_block_type')) erfordert get_template_directory (). '/blocks/series.php'; </pre> <p>Beachten Sie, dass wir das Laden der Datei mit einer Bedingung versehen. Dies stellt sicher <strong>Kompatibilität mit der vorherigen WordPress-Version, dass unser Block nur geladen wird, wenn Gutenberg vorhanden ist</strong>. Unser Block sollte jetzt in der Gutenberg-Schnittstelle verfügbar sein.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>So sieht es aus, wenn wir den Block einfügen.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>Gutenberg-APIs</h3> <p>Gutenberg führt zwei API-Sets ein, um einen neuen Block zu registrieren. Wenn wir uns das anschauen <code>series.php</code>, Wir werden den folgenden Code finden, der unseren neuen Block registriert. Es auch <strong>lädt das Stylesheet und die JavaScripts im Frontend und im Editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', Array ('editor_script' => 'Serienblockeditor', 'editor_style' => 'Serienblockeditor', 'style' => 'Serienblock',));</pre> <p>Wie wir oben sehen können, heißt unser Block <code>zwanzigsechszehn / serie</code>, Der Blockname muss eindeutig sein und einen Namensraum haben, um eine Kollision mit den anderen durch die anderen Plugins gebrachten Blocks zu vermeiden.</p> <p>Außerdem, <strong>Gutenberg bietet eine Reihe neuer JavaScript-APIs für die Interaktion mit der “Block” Schnittstelle</strong> im Editor Da die API recht reichlich ist, konzentrieren wir uns auf einige Besonderheiten, die Sie meiner Meinung nach kennen sollten, um einen einfachen, aber funktionierenden Gutenberg-Block zu erhalten.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Zuerst werden wir nachschauen <code>wp.blocks.registerBlockType</code>. Diese Funktion wird verwendet <strong>ein neues registrieren “Block” an den Gutenberg-Redakteur</strong>. Es erfordert zwei Argumente. Das erste Argument ist der Blockname, der dem Namen folgen soll, der im registriert ist <code>register_block_type</code> Funktion in der PHP-Seite. Das zweite Argument ist ein <strong>Objekt, das die Blockeigenschaften definiert</strong> wie Titel, Kategorie und ein paar Funktionen zum Rendern der Blockschnittstelle.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series')), Kategorie: 'Widgets', Schlüsselwörter: ['html'], bearbeiten: Funktion (Requisiten) , Speichern: Funktion (Requisiten) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Mit dieser Funktion können Sie das Element innerhalb von erstellen “Block” im Postherausgeber. Das <code>wp.element.createElement</code> Funktion ist im Grunde eine Abstraktion der Reaktion <code>createElement ()</code> Funktion akzeptiert also die gleiche Menge von Argumenten. Das erste Argument nimmt den Typ des Elements an, zum Beispiel einen Absatz, a <code>Spanne</code>, oder ein <code>div</code> Wie nachfolgend dargestellt:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Wir können <strong>Alias die Funktion in eine Variable</strong> also ist es kürzer zu schreiben. Zum Beispiel:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Wenn du <strong>bevorzugen Sie die neue ES6-Syntax</strong>, Sie können es auch so machen:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Wir können auch <strong>Fügen Sie die Elementattribute hinzu</strong> so wie die <code>Klasse</code> Name oder <code>Ich würde</code> auf dem zweiten Parameter wie folgt:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>Das <code>div</code> dass wir geschaffen haben, wäre ohne den Inhalt nicht sinnvoll. Wir können <strong>Fügen Sie den Inhalt des Arguments des dritten Parameters hinzu</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Dieser Artikel ist Teil unserer "HTML5 / CSS3-Tutorials" - gewidmet Um Sie zu einem besseren Designer und / oder Entwickler zu machen, klicken Sie hier, um weitere Artikel aus derselben Serie zu sehen.</pre> <h4><code>WP-Komponenten</code></h4> <p>Das <code>WP-Komponenten</code> enthalten eine Sammlung von Gutenberg-Komponenten, wie der Name schon sagt. Bei diesen Komponenten handelt es sich technisch um angepasste React-Komponenten, darunter Button, Popover, Spinner, Tooltip und eine Reihe anderer. Wir können <strong>Wiederverwendung dieser Komponenten in unserem eigenen Block</strong>. Im folgenden Beispiel fügen wir eine Schaltflächenkomponente hinzu.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Attribute</h4> <p>Die Attribute sind der Weg, um die Daten in unserem Block zu speichern. Diese Daten können wie Inhalt, Farben, Ausrichtungen, URL usw. sein. Wir können die Attribute aus den übergebenen Eigenschaften erhalten <code>bearbeiten()</code> Funktion wie folgt:</p> <pre name="code"> edit: Funktion (Requisiten) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', Inhalt); </pre> <p>Um die Attribute zu aktualisieren, verwenden wir die <code>setAttributes ()</code> Funktion. In der Regel würden wir den Inhalt bei bestimmten Aktionen ändern, z. B. wenn eine Schaltfläche angeklickt wird, eine Eingabe gefüllt wird, eine Option ausgewählt wird usw. Im folgenden Beispiel verwenden wir diese Option, um a hinzuzufügen <strong>Zurückfallen</strong> Inhalt unseres Blocks für den Fall, dass etwas Unerwartetes passiert ist <code>seriesContent</code> Attribut.</p> <pre name="code"> edit: function (Requisiten) if (type of props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Hier ist der Fallback-Inhalt.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', Inhalt),]; </pre> <h4>Speichern des Blocks</h4> <p>Das <code>sparen()</code> Funktion funktioniert ähnlich wie die <code>bearbeiten()</code>, außer dass es den Inhalt unseres Blocks definiert, der in der Post-Datenbank gespeichert werden soll. Das Speichern des Blockinhalts ist recht unkompliziert, wie wir unten sehen können:</p> <pre name="code"> save: Funktion (Requisiten) if (! Requisiten ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', Inhalt),]; </pre> <h3>Was kommt als nächstes?</h3> <p>Gutenberg wird das WordPress-Ökosystem zum Besseren (oder möglicherweise zum Schlechteren) verändern. Es ermöglicht Entwicklern, dies zu tun <strong>eine neue Art der Entwicklung von WordPress-Plugins und -Themen einführen</strong>. Gutenberg ist nur ein Anfang. Bald die “Block” Das Paradigma wird auf andere Bereiche von WordPress wie die Einstellungs-APIs und die Widgets erweitert.</p> <p>Lerne JavaScript tief; Dies ist der einzige Weg, um in Gutenberg einzusteigen und für die Zukunft der WordPress-Industrie relevant zu bleiben. Wenn Sie bereits mit den JavaScript-Grundlagen, den Eigenheiten, den Funktionen, den Werkzeugen, den Waren und den Fehlern vertraut sind, bin ich mir sicher, dass Sie mit Gutenberg vertraut werden.</p> <p>Wie bereits erwähnt, bietet Gutenberg eine Fülle von APIs, die ausreichen, um Ihrem Block fast alles zu tun. Sie können wählen, ob Sie möchten <strong>Codieren Sie Ihren Block mit einem einfachen alten JavaScript, JavaScript mit ES6-Syntax, React oder sogar Vue</strong>.</p> <h4>Ideen und Inspirationen</h4> <p>Ich habe einen sehr (sehr) einfachen Gutenberg-Block erstellt, den Sie im Repository unseres Github-Kontos finden können. Des Weiteren habe ich eine Reihe von Repositories zusammengestellt, aus denen Sie Inspiration für den Bau eines komplexeren Blocks erhalten können.</p> <ul><li>Gutenblocks - Eine Sammlung von Blöcken von Mathieu Viet, geschrieben in JavaScript mit ES5-Syntax</li> <li>Jetpack Gutenblocks Project - eine in Jetpack gebündelte Sammlung von Blöcken</li> <li>Eine Liste von Beispielen für die Implementierung von Gutenberg, einschließlich Vue.js</li> </ul><h3>Weitere Hinweise</h3> <ul><li>Gutenberg Official Repository</li> <li>Gutenberg-Handbuch</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Hacke einen IKEA Lack Table in ein Component Rack</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Zerhacken Sie eine alte Tastatur, um eine benutzerdefinierte Bedienoberfläche zu erstellen</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Anleitung zum Windows 10 Task Manager - Teil II</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Nächste Artikel</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hacken Sie eine 10-Dollar-Taschenlampe in eine ultrahelle Premium-Lampe</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Vorheriger Artikel</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Leitfaden für Windows 10 Task Manager - Teil III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Nützliche Informationen und Tipps zur Webentwicklung. Programmierung, Webdesign, CSS, HTML, JAVASCRIPT. Konfigurieren und installieren Sie WINDOWS neu. Erstellung von Websites und Anwendungen von Grund auf neu. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>