Hallo an alle, mein Name ist Andrey Yakovenko und ich bin ein Webentwickler von Digital Design.
In unserem Unternehmen wurden viele Projekte mit dem
sitefinity- Webinhaltsverwaltungssystem oder einfach mit CMS umgesetzt. Die Gründe, warum wir es verwenden, wurden weiter oben in
diesem Artikel beschrieben. CMS ist in der Regel eine mehrseitige Anwendung, und ich werde heute darüber sprechen, was die Implementierung von Frontend-Frameworks in Sitefinity-Lösungen bieten kann und wie dies getan werden kann.
Lyrischer Exkurs
Obwohl in sitefinity Angular.js integriert ist, fehlt aufgrund des geschlossenen Quellcodes die Möglichkeit, andere Frameworks zu integrieren. Dies hindert uns jedoch nicht daran, die Funktionen anderer Frameworks zu nutzen.
Die Beispiele in diesem Artikel sind kein Allheilmittel und dienen hauptsächlich zu Informationszwecken.
Suche nach einem neuen
Da Angular, obwohl die erste Version, bereits in sitefinity vorhanden ist, wollten wir unsere CMS-Freunde mit React oder Vue.js.
Beide Frameworks sind auf ihre eigene Weise gut und haben ihre eigenen Ansätze für die Anwendungsentwicklung. Wir werden den nächsten Vergleich jedoch nicht durchführen.
Nach einem kurzen Blick auf mögliche Lösungen wurde ein interessantes Projekt gefunden, das in React geschriebene Seiten in statisches HTML umwandelte. Diese Lösung passte nicht zu uns, da wir nicht alle Vorteile von SSR (Server Side Render) zusammen mit der Verwendung von ausführbarem Code auf der Clientseite verlieren müssen.
Von Worten zu Taten
Wie bei den meisten CMS können Sie mit Sitefinity eine Seite mit verschiedenen Elementen für die Anzeige von Inhalten (Widgets) erstellen. Zum Beispiel werden wir die Optionen zum Einbetten von Vue.js in fertige Widgets betrachten.
Der erste Weg (einfach)
Diese Methode besteht darin, Vue.js als Bibliothek mit der Hauptseitenvorlage zu verbinden.
Danach können wir unsere Anwendung in einem beliebigen Widget an einem beliebigen Ort initialisieren.
Ein Beispiel für ein einfaches Widget:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
Dies bedeutet jedoch, dass der gesamte Widget-Block als Vorlage verwendet wird und Vue.js versucht, ihn zu interpolieren. Um die Meldung an der richtigen Stelle anzuzeigen, muss ein spezielles Konstrukt geschrieben werden, das angezeigt wird, wenn der Code von js angehalten wird vor dem Rendern oder wenn der Benutzer JavaScript deaktiviert hat.
Die Lösung für dieses Problem besteht darin, eine eigene Vorlage zu schreiben, mit der das Widget dupliziert wird. Wir werden unsere Komponente erweitern.
Ein Beispiel:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
Nun wird der gesamte HTML-Code unseres Widgets durch die im Vorlagenfeld beschriebene Vorlage ersetzt. Um Daten aus dem Widget-Modell in Vue zu übertragen, müssen Sie das Modell nur auf eine beliebige Weise in JSON konvertieren und in das Datenfeld übertragen.
Der zweite Weg (schwierig)
Für diese Methode benötigen wir ein Webpack, in dessen Mindestkonfiguration vue-loader sein wird. Auch brauchen wir kein HTML-Extrakt-Plugin, wie wir können vorlagen in js code speichern.
Jetzt können wir die Single-File-Komponenten von Vue verwenden.
Ein Beispiel für eine Single-File-Komponente (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
Einzelne Dateikomponenten bieten mehr Gestaltungsoptionen als herkömmliche Komponenten und reduzieren auch die Anzahl der Dateien im Projektverzeichnis.
Nach dem Schreiben der Widget-Komponente müssen wir sie initialisieren.
Beispiel für eine Widget-Initialisierung:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
In diesem Fall wird der Code jedoch von selbst ausgeführt. Wenn die Initialisierung der Anwendung gesteuert werden muss, z. B. um den Selektor anzugeben, besteht eine rationale Lösung darin, die Anwendung in eine Methode zu packen, die jederzeit auf der Seite aufgerufen werden kann.
Lassen Sie uns unser Beispiel erweitern:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
Es verbleibt die Übertragung der Widget-Modelldaten an die Vue.js-Komponente. Dies ist einfach, indem Sie sie in JSON schreiben, bevor Sie sie an das Datenobjekt der Vue-Instanz übergeben. Danach können sie als Requisiten an die Komponente übergeben werden.
Ein Beispiel:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ data: function () { return { some: 'some value', } }, render: function (h) { return h(Sample, { props: data }) } }).$mount(selector) } initWidget('#widget-id')
Kleine Rezension
Abschließend möchte ich sagen, dass jede der vorgeschlagenen Methoden eine eigene, sogenannte Anwendungsumgebung hat. Die erste Methode eignet sich daher für die schnelle Integration eines einzelnen Abschnitts einer Anwendung, z. B. einer Schaltfläche oder eines Formulars, und die zweite Methode ist weiter fortgeschritten und verfügt über umfangreichere Funktionen zum Schreiben sowohl einzelner Teile der Anwendung als auch eigenständiger Seiten.
Beide Methoden haben jedoch einen großen Nachteil: Bei dieser Verwendung von Frameworks ist es erforderlich, denselben Job zweimal für Abschnitte der Seiten auszuführen, von denen SEO abhängt.
Auf der anderen Seite können Sie bei Bedarf mit diesem Ansatz ein beliebiges Framework, eine Bibliothek oder einen eigenen DOM-Manager in Vanilla JavaScript oder jQuery erstellen.
Das ist alles. Vielen Dank für Ihre Aufmerksamkeit.