{"id":642,"date":"2018-09-06T15:37:38","date_gmt":"2018-09-06T14:37:38","guid":{"rendered":"https:\/\/telltec.ch\/?p=642"},"modified":"2018-09-06T15:37:38","modified_gmt":"2018-09-06T14:37:38","slug":"seitenspezifische-body-class-mit-nuxt-js","status":"publish","type":"post","link":"https:\/\/telltec.ch\/de\/seitenspezifische-body-class-mit-nuxt-js\/","title":{"rendered":"Seitenspezifische Body Class mit Nuxt.js"},"content":{"rendered":"<p>Etwas, was ich an WordPress immer praktisch fand, ist dass es von Haus aus relativ ausgiebig seitespezifische CSS-Klassen im &lt;body&gt; Tag\u00a0 hinzuf\u00fcgt. Dies vereinfacht dann schnell und einfach CSS Styling f\u00fcr eine spezifische Seite vorzunehmen.<\/p>\n<p>Auf einer WordPress Seite sieht dies etwas so aus: <\/p>\n<pre>&lt;body class=\"post-template-default single single-post postid-585 single-format-standard logged-in large\"&gt;<\/pre>\n<\/p>\n<p>Auf einer <a href=\"https:\/\/nuxtjs.org\/\" rel=\"nofollow noopener\" target=\"_blank\">Nuxt.js<\/a> Seite hatte ich die gleiche Herausforderung, dass ich basierend auf der jeweiligen Seite gewisse CSS Anpassungen machen wollte. Die einfachste Variante aus meiner Seite ist es daf\u00fcr eben die jeweilige Seite \u00fcber eine spezifische body class ansprechen zu k\u00f6nnen.<\/p>\n<p>Mit dem folgenden Code f\u00fcgt man eine auf der <a href=\"https:\/\/router.vuejs.org\" rel=\"nofollow noopener\" target=\"_blank\">$route<\/a> basierende body class hinzu: <\/p>\n<p><script src=\"https:\/\/gist.github.com\/aaronmeder\/6f0327c225ac8cd37adb3df37916e869.js\"><\/script><\/p>\n<p>So sieht danach der Body Tag aus:<\/p>\n<pre>&lt;body class=\"page-beispielseite\"&gt;<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Etwas, was ich an WordPress immer praktisch fand, ist dass es von Haus aus relativ ausgiebig seitespezifische CSS-Klassen im &lt;body&gt; Tag\u00a0 hinzuf\u00fcgt. Dies vereinfacht dann schnell und einfach CSS Styling f\u00fcr eine spezifische Seite vorzunehmen. Auf einer WordPress Seite sieht dies etwas so aus: &lt;body class=&#8220;post-template-default single single-post postid-585 single-format-standard logged-in large&#8220;&gt; Auf einer Nuxt.js [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[144],"tags":[147,148,145,146],"class_list":["post-642","post","type-post","status-publish","format-standard","hentry","category-webentwicklung","tag-bodyattr","tag-bodyclass","tag-nuxt","tag-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":11,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/posts\/642\/revisions\/653"}],"wp:attachment":[{"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/telltec.ch\/de\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}