{"id":43636,"date":"2021-09-27T15:02:52","date_gmt":"2021-09-27T13:02:52","guid":{"rendered":"https:\/\/kinsta.com\/?p=100639"},"modified":"2023-07-27T11:40:38","modified_gmt":"2023-07-27T10:40:38","slug":"laravel-kommentar","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/","title":{"rendered":"Erstellen eines Laravel Live-Kommentar-Systems"},"content":{"rendered":"

Um Vertrauen in deiner Online-Community oder deinem Blog aufzubauen, brauchst du ein gut gestaltetes Laravel-Live-Kommentarsystem.<\/p>\n

Es ist jedoch nicht einfach, es auf Anhieb richtig hinzubekommen, es sei denn, du verl\u00e4sst dich auf selbst gehostete Kommentarsysteme wie Disqus<\/a> oder Commento, die alle ihre eigenen Nachteile mit sich bringen. Sie besitzen deine Daten, bieten nur begrenzte Designs und Anpassungsm\u00f6glichkeiten und vor allem sind sie nicht kostenlos.<\/p>\n

Wenn dich also die Idee reizt, ein eigenes Echtzeit-Kommentarsystem zu entwickeln, bei dem du die Kontrolle \u00fcber deine Daten hast und das Design und die Benutzerfreundlichkeit an deinen Blog anpassen kannst, dann lies weiter.<\/p>\n

In diesem Artikel erf\u00e4hrst du, wie du ein gut durchdachtes Echtzeit-Kommentarsystem mit verschiedenen Kommentarfunktionen entwickeln kannst. Nach den Prinzipien der Echtzeit-Chat-Anwendung mit Vue.js und Socket.io<\/a> werden wir Laravel, Pusher und React verwenden, um das Echtzeit-Kommentarsystem zu entwickeln.<\/p>\n

Lasst uns loslegen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was wir bauen werden<\/h2>\n

Wir bauen ein Echtzeit-Kommentarsystem<\/a>, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen in der Community aufzubauen.<\/p>\n\n

\u00dcberblick \u00fcber die Bausteine: Laravel, Pusher und Vue<\/h2>\n

Bevor wir in die Entwicklung loslegen, wollen wir die Technologien besprechen, mit denen wir unser Echtzeit-Kommentarsystem entwickeln werden.<\/p>\n

Laravel<\/h3>\n

Laravel<\/a> ist ein Open-Source MVC-orientiertes PHP-Framework. Es wird verwendet, um einfache bis komplexe PHP-Webanwendungen zu erstellen, die f\u00fcr ihre elegante Syntax bekannt sind. Laravel zu kennen<\/a> ist wichtig, um dieses Kommentarsystem zu entwickeln.<\/p>\n

Pusher<\/h3>\n

Pusher<\/a> erm\u00f6glicht es Entwicklern, Echtzeitfunktionen in gro\u00dfem Umfang zu erstellen. In diesem Artikel wird Laravel Echo<\/a> kombiniert, um ein Echtzeit-Broadcast-Ereignis an den Pusher-Server zu senden und den Inhalt auf dem Frontend mit Vue.js anzuzeigen.<\/p>\n

Vue.js<\/h3>\n

Vue.js<\/a> ist unser Frontend-Framework der Wahl. Vue.js ist ein progressives JavaScript-Frontend-Framework, das f\u00fcr seinen einfach zu erlernenden und unkomplizierten Ansatz bei der Frontend-Entwicklung bekannt ist. Wir werden Vue.js verwenden, um unser Echtzeit-Kommentarsystem zu entwickeln.<\/p>\n

Aufbau des Kommentarsystems<\/h2>\n

Wenn das Kommentarsystem, das wir oben beschrieben haben, deinen Vorstellungen entspricht, k\u00f6nnen wir es jetzt einrichten.<\/p>\n

1. Laravel, Pusher und Echo installieren und einrichten<\/h3>\n

Die Installation und Einrichtung von Laravel, Echo und Pusher ist ganz einfach, denn Laravel hat bereits alle Aufgaben im Hintergrund erledigt, indem es Laravel Echo so eingerichtet und konfiguriert hat, dass es perfekt mit Pusher zusammenarbeitet.<\/p>\n

Als Erstes installieren und konfigurieren wir Laravel, unser Backend-PHP-Framework<\/a>. Mit diesem Befehl kannst du eine neue Instanz von Laravel starten, vorausgesetzt, du hast das Laravel CLI<\/a> global installiert:<\/p>\n

laravel new commenter<\/code><\/pre>\n
Deine neue Laravel-Instanz wird in einem Ordner namens commenter installiert. \u00d6ffnen wir den Ordner in unserem VSCode<\/a> und navigieren wir in unserem Terminal dorthin:<\/p>\n
cd commenter\n\ncode .<\/code><\/pre>\n
Bevor wir unseren Entwicklungsserver starten, installieren und konfigurieren wir einige notwendige Pakete, die f\u00fcr das Projekt verwendet werden.<\/p>\n
F\u00fchre diesen Befehl aus, um das Pusher PHP SDK zu installieren:<\/p>\n
composer require pusher\/pusher-php-server<\/code><\/pre>\n
F\u00fchre diesen Befehl aus, um die notwendigen NPM-Pakete f\u00fcr das Vue.js-Frontend zu installieren:<\/p>\n
npm install --save laravel-echo pusher-js<\/code><\/pre>\n
Als N\u00e4chstes werden wir Laravel Echo und Pusher konfigurieren. \u00d6ffne deine Datei resources\/js\/bootstrap.js<\/strong> und f\u00fcge die folgenden Skripte ein:<\/p>\n
window._ = require(\"lodash\");\nwindow.axios = require(\"axios\");\nwindow.moment = require(\"moment\");\nwindow.axios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nwindow.axios.defaults.headers.post[\"Content-Type\"] =\n    \"application\/x-www-form-urlencoded\";\nwindow.axios.defaults.headers.common.crossDomain = true;\nwindow.axios.defaults.baseURL = \"\/api\";\nlet token = document.head.querySelector('meta[name=\"csrf-token\"]');\nif (token) {\n    window.axios.defaults.headers.common[\"X-CSRF-TOKEN\"] = token.content;\n} else {\n    console.error(\"CSRF token not found\");\n}\n\n\n\/**\n * Echo exposes an expressive API for subscribing to channels and listening\n * for events that Laravel broadcasts. Echo and event broadcasting\n * allows your team to build robust real-time web applications quickly.\n *\/\nimport Echo from \"laravel-echo\";\nwindow.Pusher = require(\"pusher-js\");\nwindow.Echo = new Echo({\n    broadcaster: \"pusher\",\n    key: process.env.MIX_PUSHER_APP_KEY,\n    cluster: process.env.MIX_PUSHER_APP_CLUSTER,\n    forceTLS: true\n});<\/code><\/pre>\n
Im obigen Skript siehst du, dass wir nur die Axios-Instanz mit unseren Standardkonfigurationen konfigurieren. Als N\u00e4chstes werden wir Laravel Echo so konfigurieren, dass es Pusher und seine Konfigurationen verwendet.<\/p>\n
2. Einrichtung und Migration der Datenbank<\/h3>\n
Als N\u00e4chstes erstellen und konfigurieren wir unsere Datenbank, in der wir die Kommentare f\u00fcr die Persistenz speichern. Wir werden SQLite verwenden, du kannst aber auch einen anderen Clients verwenden.<\/p>\n
Erstelle eine database.sqlite<\/strong>-Datei im Datenbankordner und aktualisiere deine .env-<\/strong>Datei wie folgt:<\/p>\n
DB_CONNECTION=sqlite\nDB_DATABASE=\/Users\/all\/paths\/to\/project\/commenter_be\/database\/database.sqlite\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n
Als N\u00e4chstes f\u00fchrst du diesen Befehl aus, um die Kommentar-Migration zu erstellen und sie mit den folgenden Skripten zu aktualisieren:<\/p>\n
php artisan make:migration create_comments_table<\/code><\/pre>\n
\u00d6ffne die Datei database\/migrations\/xxxx_create_comments_table_xxxx.php<\/strong> und f\u00fcge diesen Code ein:<\/p>\n
<?php\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\nclass CreateCommentsTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('comments', function (Blueprint $table) {\n            $table->id();\n            $table->string('content');\n            $table->string('author');\n            $table->timestamps();\n        });\n    }\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('comments');\n    }\n}<\/code><\/pre>\n
Dadurch wird eine neue Kommentardatenbanktabelle erstellt und die Spalten Inhalt und Autor hinzugef\u00fcgt.<\/p>\n
Um die Migration zu erstellen, f\u00fchrst du diesen Befehl aus:<\/p>\n
php artisan migrate<\/code><\/pre>\n
3. Modelle erstellen<\/h3>\n
In Laravel sind Modelle von gro\u00dfer Bedeutung – sie sind der sicherste Weg, um mit unserer Datenbank zu kommunizieren und die Daten zu verwalten.<\/p>\n
Um ein Modell in Laravel zu erstellen, f\u00fchren wir den folgenden Befehl aus:<\/p>\n
php artisan make:model Comment<\/code><\/pre>\n
Als n\u00e4chstes \u00f6ffnest du die Datei app\/models\/Comment.php<\/strong> und f\u00fcgst den folgenden Code ein:<\/p>\n
<?php\nnamespace App\\Models;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass Comment extends Model\n{\n    use HasFactory;\n    protected $fillable = ['content', 'author'];\n}\n\n<\/code>The $fillable array allows us to create and update the model in mass.<\/pre>\n
4. Erstellen von Controllern<\/h3>\n
Controller sind von entscheidender Bedeutung, da sie die gesamte Logik, auch die Gesch\u00e4ftslogik, unserer Anwendungen beherbergen, also erstellen wir einen, der die Kommentarlogik handhabt:<\/p>\n
php artisan make:controller CommentController<\/code><\/pre>\n
Als n\u00e4chstes \u00f6ffnest du die Datei app\/Http\/Controllers\/CommentController.php<\/strong> und f\u00fcgst den folgenden Code ein:<\/p>\n
<?php\nnamespace App\\Http\\Controllers;\nuse App\\Models\\Comment;\nuse App\\Events\\CommentEvent;\nuse Illuminate\\Http\\Request;\n\nclass CommentController extends Controller\n{\n    \/\/\n    public function index()\n    {\n        return view('comments');\n    }\n    public function fetchComments()\n    {\n        $comments = Comment::all();\n        return response()->json($comments);\n    }\n    public function store(Request $request)\n    {\n        $comment = Comment::create($request->all());\n        event(new CommentEvent($comment));\n        return $comment;\n    }\n}<\/code><\/pre>\n
Der Controller hat drei verschiedene Methoden: eine Kommentaransicht zur\u00fcckgeben, alle Kommentare abrufen und einen neuen Kommentar speichern. Das Wichtigste ist, dass wir jedes Mal, wenn wir einen neuen Kommentar speichern, ein Ereignis ausl\u00f6sen, auf das das Frontend h\u00f6rt, um die entsprechende Seite mit dem neuen Kommentar in Echtzeit mit Pusher und Laravel Echo zu aktualisieren.<\/p>\n
5. Routen erstellen<\/h3>\n
Um unsere Routen richtig zu konfigurieren, m\u00fcssen wir viele Dateien<\/a> aktualisieren, also fangen wir an.<\/p>\n
Als Erstes aktualisieren wir die Datei api.php<\/strong> im Ordner routes. \u00d6ffne die Datei und f\u00fcge den folgenden Code ein:<\/p>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);\nRoute::get('\/comments', [CommentController::class, 'fetchComments']);\nRoute::post('\/comments', [CommentController::class, 'store']);<\/code><\/pre>\n
Als N\u00e4chstes \u00f6ffnest du die Datei channels.php<\/strong> im selben Ordner und f\u00fcgst den folgenden Code hinzu, um das Ereignis zu autorisieren, das wir zuvor ausgel\u00f6st haben:<\/p>\n
Broadcast::channel('comment', function ($user) {\n    return true;\n});<\/code><\/pre>\n
Als N\u00e4chstes \u00f6ffnest du die Datei web.php<\/strong> im selben Ordner und f\u00fcgst den folgenden Code ein, um unsere Anfrage auf die Homepage umzuleiten, wo sie von Vue.js aufgenommen wird:<\/p>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);<\/code><\/pre>\n
Zum Schluss erstellen wir eine neue Blade-Datei im Ordner resources\/views<\/strong> mit dem Namen comments.blade.php<\/strong> und f\u00fcgen den folgenden Code hinzu:<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Commenter<\/title>\n    <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n    <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.7.1\/css\/bulma.min.css\" \/>\n    <style>\n        .container {\n            margin: 0 auto;\n            position: relative;\n            width: unset;\n        }\n        #app {\n            width: 60%;\n            margin: 4rem auto;\n        }\n        .question-wrapper {\n            text-align: center;\n        }\n    <\/style>\n<\/head>\n<body>\n\n\n    <div id=\"app\">\n        <div class=\"container\">\n            <div class=\"question-wrapper\">\n                <h5 class=\"is-size-2\" style=\"color: #220052;\">\n                    What do you think about <span style=\"color: #47b784;\">Dogs<\/span>?<\/h5>\n                <br>\n                <a href=\"#Form\" class=\"button is-medium has-shadow has-text-white\" style=\"background-color: #47b784\">Comment<\/a>\n            <\/div>\n            <br><br>\n            <comments><\/comments>\n            <new-comment><\/new-comment>\n        <\/div>\n    <\/div>\n    <script async src=\"{{mix('js\/app.js')}}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Das Skript f\u00fcgt einen Beitragstitel und eine Vue-Komponente hinzu, um neue Kommentare zu dem oben erstellten Beitragstitel anzuzeigen und hinzuzuf\u00fcgen.<\/p>\n
F\u00fchre die folgenden Befehle aus, um zu testen, ob du alles richtig machst:<\/p>\n
npm run watch\n\nphp artisan serve<\/code><\/pre>\n
Wenn du diese Seite siehst, kannst du mit dem n\u00e4chsten Schritt in diesem Artikel fortfahren.<\/p>\n
\"Live-Kommentarsystem
Live-Kommentarsystem in Laravel<\/figcaption><\/figure>\n
6. Einrichten von Vue (Frontend)<\/h3>\n
Wir werden unsere Vue-Instanz erstellen und einrichten, um alle Kommentare zu diesem Beitrag<\/a> zu erstellen und anzuzeigen.<\/p>\n
Wir beginnen mit dem Einrichten unseres Vuex-Stores. Erstelle die folgenden Dateien im Ordner resource\/js\/store.<\/p>\n
Kommentarstatus erstellen<\/h4>\n
Erstelle actions.js und f\u00fcge den folgenden Code ein:<\/p>\n
let actions = {\n    ADD_COMMENT({ commit }, comment) {\n        return new Promise((resolve, reject) => {\n            axios\n                .post(`\/comments`, comment)\n                .then(response => {\n                    resolve(response);\n                })\n                .catch(err => {\n                    reject(err);\n                });\n        });\n    },\n    GET_COMMENTS({ commit }) {\n        axios\n            .get(\"\/comments\")\n            .then(res => {\n                {\n                    commit(\"GET_COMMENTS\", res.data);\n                }\n            })\n            .catch(err => {\n                console.log(err);\n            });\n    }\n};\nexport default actions;<\/code><\/pre>\n
Die Action-Datei ruft den Kommentar-Endpunkt im Backend auf.<\/p>\n
Als N\u00e4chstes erstellst du eine getters.js-Datei und f\u00fcgst den folgenden Code ein:<\/p>\n
let getters = {\n    comments: state => {\n        return state.comments;\n    }\n};\nexport default getters;<\/code><\/pre>\n
Die Getter-Datei wird verwendet, um alle Kommentare im Status abzurufen.<\/p>\n
Erstelle die Datei mutations.js und f\u00fcge sie in den folgenden Code ein:<\/p>\n
let mutations = {\n    GET_COMMENTS(state, comments) {\n        state.comments = comments;\n    },\n    ADD_COMMENT(state, comment) {\n        state.comments = [...state.comments, comment];\n    }\n};\nexport default mutations;<\/code><\/pre>\n
Als N\u00e4chstes erstellst du eine state.js-Datei und f\u00fcgst sie in den folgenden Code ein:<\/p>\n
let state = {\n    comments: []\n};\nexport default state;<\/code><\/pre>\n
Zum Schluss f\u00fcgen wir alles in die Datei index.js ein, die in die Vue-Instanz exportiert wurde, erstellen eine index.js-Datei und f\u00fcgen das Folgende hinzu:<\/p>\n
import Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport actions from \".\/actions\";\nimport mutations from \".\/mutations\";\nimport getters from \".\/getters\";\nimport state from \".\/state\";\nVue.use(Vuex);\nexport default new Vuex.Store({\n    state,\n    mutations,\n    getters,\n    actions\n});<\/code><\/pre>\n
Komponenten erstellen<\/h4>\n
Zum Schluss erstellen wir unsere Kommentar-Komponenten, um neue Kommentare anzuzeigen und hinzuzuf\u00fcgen. Beginnen wir mit der Erstellung der einzelnen Kommentar-Komponente.<\/p>\n
Erstelle im Ordner resource\/js<\/strong> einen Ordner namens components, f\u00fcge die Datei comment.vue<\/strong> hinzu und f\u00fcge den folgenden Code ein:<\/p>\n
<template>\n  <li class=\"comment-wrapper animate slideInLeft\">\n    <div class=\"profile\">\n    <\/div>\n    <div class=\"msg has-shadow\">\n      <div class=\"msg-body\">\n        <p class=\"name\">\n          {{ comment.author }} <span class=\"date\">{{ posted_at }}<\/span>\n        <\/p>\n        <p class=\"content\">{{ comment.content }}<\/p>\n      <\/div>\n    <\/div>\n  <\/li>\n<\/template>\n    \n    <script>\nexport default {\n  name: \"Comment\",\n  props: [\"comment\"],\n  computed: {\n    posted_at() {\n      return moment(this.comment.created_at).format(\"MMMM Do YYYY\");\n    },\n\n  },\n};\n<\/script>\n    \n    <style lang=\"scss\" scoped>\n.comment-wrapper {\n  list-style: none;\n  text-align: left;\n  overflow: hidden;\n  margin-bottom: 2em;\n  padding: 0.4em;\n  .profile {\n    width: 80px;\n    float: left;\n  }\n  .msg-body {\n    padding: 0.8em;\n    color: #666;\n    line-height: 1.5;\n  }\n  .msg {\n    width: 86%;\n    float: left;\n    background-color: #fff;\n    border-radius: 0 5px 5px 5px;\n    position: relative;\n    &::after {\n      content: \" \";\n      position: absolute;\n      left: -13px;\n      top: 0;\n      border: 14px solid transparent;\n      border-top-color: #fff;\n    }\n  }\n  .date {\n    float: right;\n  }\n  .name {\n    margin: 0;\n    color: #999;\n    font-weight: 700;\n    font-size: 0.8em;\n  }\n  p:last-child {\n    margin-top: 0.6em;\n    margin-bottom: 0;\n  }\n}\n<\/style><\/code><\/pre>\n
Als N\u00e4chstes erstellst du im selben Ordner die Datei comments.vue<\/strong> und f\u00fcgst den folgenden Code hinzu:<\/p>\n
<template>\n  <div class=\"container\">\n    <ul class=\"comment-list\">\n      <Comment\n        :key=\"comment.id\"\n        v-for=\"comment in comments\"\n        :comment=\"comment\"\n      ><\/Comment>\n    <\/ul>\n  <\/div>\n<\/template>\n    \n    <script>\nimport { mapGetters } from \"vuex\";\nimport Comment from \".\/Comment\";\nexport default {\n  name: \"Comments\",\n  components: { Comment },\n  mounted() {\n    this.$store.dispatch(\"GET_COMMENTS\");\n    this.listen();\n  },\n  methods: {\n    listen() {\n      Echo.channel(\"comment\").listen(\"comment\", (e) => {\n        console.log(e);\n        this.$store.commit(\"ADD_COMMENT\", e);\n      });\n    },\n  },\n  computed: {\n    ...mapGetters([\"comments\"]),\n  },\n};\n<\/script>\n    \n    <style scoped>\n.comment-list {\n  padding: 1em 0;\n  margin-bottom: 15px;\n}\n<\/style><\/code><\/pre>\n
Als letztes erstellst du eine Datei namens NewComment.vue<\/strong> und f\u00fcgst den folgenden Code hinzu:<\/p>\n
<template>\n  <div id=\"commentForm\" class=\"box has-shadow has-background-white\">\n    <form @keyup.enter=\"postComment\">\n      <div class=\"field has-margin-top\">\n        <div class=\"field has-margin-top\">\n          <label class=\"label\">Your name<\/label>\n          <div class=\"control\">\n            <input\n              type=\"text\"\n              placeholder=\"Your name\"\n              class=\"input is-medium\"\n              v-model=\"comment.author\"\n            \/>\n          <\/div>\n        <\/div>\n        <div class=\"field has-margin-top\">\n          <label class=\"label\">Your comment<\/label>\n          <div class=\"control\">\n            <textarea\n              style=\"height: 100px\"\n              name=\"comment\"\n              class=\"input is-medium\"\n              autocomplete=\"true\"\n              v-model=\"comment.content\"\n              placeholder=\"lorem ipsum\"\n            ><\/textarea>\n          <\/div>\n        <\/div>\n        <div class=\"control has-margin-top\">\n          <button\n            style=\"background-color: #47b784\"\n            :class=\"{ 'is-loading': submit }\"\n            class=\"button has-shadow is-medium has-text-white\"\n            :disabled=\"!isValid\"\n            @click.prevent=\"postComment\"\n            type=\"submit\"\n          >\n            Submit\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/form>\n    <br \/>\n  <\/div>\n<\/template>\n    \n    <script>\nexport default {\n  name: \"NewComment\",\n  data() {\n    return {\n      submit: false,\n      comment: {\n        content: \"\",\n        author: \"\",\n      },\n    };\n  },\n  methods: {\n    postComment() {\n      this.submit = true;\n      this.$store\n        .dispatch(\"ADD_COMMENT\", this.comment)\n        .then((response) => {\n          this.submit = false;\n          if (response.data) console.log(\"success\");\n        })\n        .catch((err) => {\n          console.log(err);\n          this.submit = false;\n        });\n    },\n  },\n  computed: {\n    isValid() {\n      return this.comment.content !== \"\" && this.comment.author !== \"\";\n    },\n  },\n};\n<\/script>\n    \n    <style scoped>\n.has-margin-top {\n  margin-top: 15px;\n}\n<\/style><\/code><\/pre>\n
\u00d6ffne nun die Datei app.js<\/strong> und f\u00fcge den folgenden Code hinzu, um die Vue-Komponenten zu registrieren, die du zuvor erstellt hast:<\/p>\n
\/\/ resource\/js\/app.js\n\nrequire(\".\/bootstrap\");\nwindow.Vue = require(\"vue\");\nimport store from \".\/store\/index\";\n\nVue.component(\"comment\", require(\".\/components\/Comment\"));\nVue.component(\"comments\", require(\".\/components\/Comments\"));\nVue.component(\"new-comment\", require(\".\/components\/NewComment\"));\n\nconst app = new Vue({\n    el: \"#app\",\n    store\n});<\/code><\/pre>\n\n
Zusammenfassung<\/h2>\n
Und das war’s! Du hast gerade gelernt, wie du mit Laravel ein Live-Kommentarsystem f\u00fcr deine Seite einrichtest.<\/p>\n
Wir haben die Vorteile der Erstellung und Verwaltung eines Kommentarsystems f\u00fcr den Aufbau von Vertrauen in deiner Community oder deinem Blog besprochen. Au\u00dferdem haben wir entdeckt, wie man ein gut durchdachtes Echtzeit-Kommentarsystem von Grund auf entwickelt und dabei verschiedene Kommentarfunktionen nutzt.<\/p>\n
Du kannst den Quellcode dieses Projekts in diesem Github Repo<\/a> klonen.<\/p>\n
Was h\u00e4ltst du von dem Laravel-Live-Kommentarsystem, das wir gemeinsam entwickelt haben? Lass es uns in den Kommentaren wissen!<\/p>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
Um Vertrauen in deiner Online-Community oder deinem Blog aufzubauen, brauchst du ein gut gestaltetes Laravel-Live-Kommentarsystem. Es ist jedoch nicht einfach, es auf Anhieb richtig hinzubekommen, es …<\/p>\n","protected":false},"author":193,"featured_media":43637,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[400,276],"topic":[958,969],"class_list":["post-43636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-laravel","tag-web-development","topic-laravel","topic-php-frameworks"],"yoast_head":"\nErstellen eines Laravel Live-Kommentar-Systems<\/title>\n<meta name=\"description\" content=\"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erstellen eines Laravel Live-Kommentar-Systems\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-27T13:02:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T10:40:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Erstellen eines Laravel Live-Kommentar-Systems\",\"datePublished\":\"2021-09-27T13:02:52+00:00\",\"dateModified\":\"2023-07-27T10:40:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\"},\"wordCount\":1393,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\",\"keywords\":[\"laravel\",\"web development\"],\"articleSection\":[\"WordPress Entwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\",\"name\":\"Erstellen eines Laravel Live-Kommentar-Systems\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\",\"datePublished\":\"2021-09-27T13:02:52+00:00\",\"dateModified\":\"2023-07-27T10:40:38+00:00\",\"description\":\"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Erstellen eines Laravel Live-Kommentar-Systems\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PHP-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/php-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erstellen eines Laravel Live-Kommentar-Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Erstellen eines Laravel Live-Kommentar-Systems","description":"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/","og_locale":"de_DE","og_type":"article","og_title":"Erstellen eines Laravel Live-Kommentar-Systems","og_description":"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.","og_url":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2021-09-27T13:02:52+00:00","article_modified_time":"2023-07-27T10:40:38+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Solomon Eseme","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Erstellen eines Laravel Live-Kommentar-Systems","datePublished":"2021-09-27T13:02:52+00:00","dateModified":"2023-07-27T10:40:38+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/"},"wordCount":1393,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","keywords":["laravel","web development"],"articleSection":["WordPress Entwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/","url":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/","name":"Erstellen eines Laravel Live-Kommentar-Systems","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","datePublished":"2021-09-27T13:02:52+00:00","dateModified":"2023-07-27T10:40:38+00:00","description":"Lerne, wie du mit Laravel ein Echtzeit-Kommentarsystem erstellst, das in jede Webseite oder jeden Blog integriert werden kann, um Vertrauen aufzubauen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2021\/09\/laravel-kommentar.jpeg","width":1460,"height":730,"caption":"Erstellen eines Laravel Live-Kommentar-Systems"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/laravel-kommentar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"PHP-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/php-frameworks\/"},{"@type":"ListItem","position":3,"name":"Erstellen eines Laravel Live-Kommentar-Systems"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=43636"}],"version-history":[{"count":3,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43636\/revisions"}],"predecessor-version":[{"id":43641,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/43636\/revisions\/43641"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/translations\/pt"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/43636\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/43637"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=43636"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=43636"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=43636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}