{"id":12012,"date":"2021-11-08T09:22:08","date_gmt":"2021-11-08T08:22:08","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12012"},"modified":"2023-06-01T11:29:53","modified_gmt":"2023-06-01T09:29:53","slug":"react-stylowanie-komponentow-za-pomoca-styled-components","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/","title":{"rendered":"React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components"},"content":{"rendered":"\n<p>Jest kilka podej\u015b\u0107 do dodawania styl\u00f3w CSS w projektach reactowych \u2013 mo\u017cna korzysta\u0107 z tzw. sk\u00f3rek (Themes), modu\u0142\u00f3w (CSS Modules) lub dowolnych bibliotek temu s\u0142u\u017c\u0105cych np. styled-components. I w\u0142a\u015bnie to rozwi\u0105zanie chc\u0119 wam przedstawi\u0107 w poni\u017cszym artykule.<\/p>\n\n\n\n<p>Styled-components powsta\u0142o z my\u015bl\u0105 o \u0142atwym i u\u017cytecznym sposobie stylowania element\u00f3w HTML-a i opiera si\u0119 na podej\u015bciu CSS-in-JS, wed\u0142ug kt\u00f3rego szablon powinien by\u0107 \u015bci\u015ble zwi\u0105zany z JavaScriptem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instalacja styled-components<\/h2>\n\n\n\n<p>Zacznijmy od podstaw, czyli instalacji biblioteki. Zadanie to jest naprawd\u0119 proste. Styled-components funkcjonuje jako:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pakiet dost\u0119pny w repozytorium <em>npm<\/em>, wi\u0119c dodajemy go do projektu za pomoc\u0105 domy\u015blnego polecenia: <em>npm install \u2013 save styled-components.<\/em><\/li>\n\n\n\n<li>Polecenie, z kt\u00f3rego mog\u0105 skorzysta\u0107 u\u017cytkownicy yarna: <em>yarn add styled-components.<\/em><\/li>\n<\/ul>\n\n\n\n<p>A teraz \u2013 do dzie\u0142a ?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak dzia\u0142aj\u0105 styled-components<\/h2>\n\n\n\n<p>Aby style CSS mog\u0142y mie\u0107 zastosowanie, musz\u0105 by\u0107 w jaki\u015b spos\u00f3b powi\u0105zane z elementami w kodzie. W zwi\u0105zku z tym mo\u017cna zada\u0107 wszystkim akapitom <em>(&lt;p&gt;&lt;\/p&gt;)&nbsp;<\/em>&nbsp;czerwony kolor font\u00f3w. To co istotne \u2013 je\u015bli mamy kilka takich element\u00f3w na stronie, to nadanie tej w\u0142a\u015bciwo\u015bci bez rozr\u00f3\u017cnienia element\u00f3w (np. poprzez unikalne nazwy klas), zmieni kolor globalnie.<\/p>\n\n\n\n<p>Poza zastosowaniem odpowiednich atrybut\u00f3w, style CSS mo\u017cna doda\u0107 liniowo (inline). W\u00f3wczas wybranemu elementowi HTML-a dodajemy atrybut <em>styles<\/em>, a jego w\u0142a\u015bciwo\u015bciami b\u0119d\u0105 style CSS. Przyk\u0142adowo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12014\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png\"><img decoding=\"async\" width=\"638\" height=\"53\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png\" alt=\"Stylowanie inline w styled-components\" class=\"wp-image-12014\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1.png 638w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.1-300x25.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 Stylowanie inline<\/figcaption><\/figure>\n\n\n\n<p>Styled-components dzia\u0142a w\u0142a\u015bnie w oparciu o style inline. Przyjrzyjmy si\u0119 poni\u017cszemu fragmentowi kodu:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12015\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png\"><img decoding=\"async\" width=\"621\" height=\"623\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png\" alt=\"Przyk\u0142ad komponentu z wdro\u017conym styled-components\" class=\"wp-image-12015\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2.png 621w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-300x300.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.2-90x90.png 90w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Przyk\u0142ad komponentu z wdro\u017conym styled-components<\/figcaption><\/figure>\n\n\n\n<p>We wskazanym kodzie wyst\u0119puje <strong>klasa reactowa<\/strong> o nazwie <strong>App<\/strong>. Sama struktura jest do\u015b\u0107 prosta \u2013 jeden <strong>kontener<\/strong> o nazwie <strong>Wrapper<\/strong> i jego dzieci: <strong>nag\u0142\u00f3wek oraz komponent<\/strong> <strong>TextField<\/strong> (zawieraj\u0105cy elementy label oraz input). Wrapper, tak naprawd\u0119, jest divem.<\/p>\n\n\n\n<p>W jaki spos\u00f3b mo\u017cemy mu nada\u0107 style CSS wykorzystuj\u0105c omawian\u0105 bibliotek\u0119? U\u017cywamy do tego interpolacji string\u00f3w, okre\u015blaj\u0105c poszczeg\u00f3lne w\u0142asno\u015bci CSS z wykorzystaniem domy\u015blnej metody styled. Ca\u0142o\u015b\u0107 tworzy wspomniany komponent.<\/p>\n\n\n\n<p>W praktyce, po uruchomieniu projektu w przegl\u0105darce, otrzymujemy wyrenderowan\u0105, tradycyjn\u0105 struktur\u0119 HTML wraz z automatycznie nadanymi klasami, kt\u00f3re zawieraj\u0105 nasze style:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12016\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png\"><img decoding=\"async\" width=\"744\" height=\"218\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png\" alt=\"Struktura HTML w konsoli przegl\u0105darki\" class=\"wp-image-12016\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3.png 744w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.3-300x88.png 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Struktura HTML w konsoli przegl\u0105darki<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12017\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png\"><img decoding=\"async\" width=\"510\" height=\"506\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png\" alt=\"Style CSS w konsoli przegl\u0105darki\" class=\"wp-image-12017\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4.png 510w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-300x298.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.4-90x90.png 90w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 Style CSS w konsoli przegl\u0105darki<\/figcaption><\/figure>\n\n\n\n<p>Zestaw w\u0142asno\u015bci nie jest jednak przechowywany w odr\u0119bnym pliku za\u0142\u0105czanym do projektu, a zostaje jedynie wy\u015bwietlony liniowo wewn\u0105trz atrybutu <em>style<\/em> i umieszczony w nag\u0142\u00f3wku strony:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12018\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png\"><img decoding=\"async\" width=\"1004\" height=\"376\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png\" alt=\"Przyk\u0142ad za\u0142\u0105czonych liniowo styli CSS w kodzie \u017ar\u00f3d\u0142owym\" class=\"wp-image-12018\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5.png 1004w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5-300x112.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.5-768x288.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Przyk\u0142ad za\u0142\u0105czonych liniowo styli CSS w kodzie \u017ar\u00f3d\u0142owym<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wykorzystanie w\u0142a\u015bciwo\u015bci komponentu<\/h2>\n\n\n\n<p>Biblioteka styled-components pozwala r\u00f3wnie\u017c na dynamiczne stylowanie element\u00f3w poprzez wykorzystanie w\u0142a\u015bciwo\u015bci komponentu (props). Przyk\u0142adowo, mo\u017cemy przekaza\u0107 w\u0142a\u015bciwo\u015b\u0107 <em>border<\/em>, kt\u00f3rej warto\u015b\u0107 jest przes\u0142ana do metody <em>styled<\/em> jako kolor obramowania (border-color).<\/p>\n\n\n\n<p>Dodatkowo, biblioteka pozwala na wykorzystanie metody \u0142a\u0144cuchowej <em><strong>attrs<\/strong><\/em>, umo\u017cliwiaj\u0105cej dodanie atrybut\u00f3w komponentowi. Metoda ta jako argument przyjmuje element props, a jego w\u0142asno\u015bci mog\u0105 zosta\u0107 u\u017cyte do definiowania warto\u015bci parametr\u00f3w.<\/p>\n\n\n\n<p>Oba rozwi\u0105zania zosta\u0142y zaprezentowane na poni\u017cszym przyk\u0142adzie:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full wp-image-12019\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png\"><img decoding=\"async\" width=\"765\" height=\"606\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png\" alt=\"Przyk\u0142ad wykorzystania metody \u0142a\u0144cuchowej \u201eattrs\u201d\" class=\"wp-image-12019\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6.png 765w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/Ryc.6-300x238.png 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Przyk\u0142ad wykorzystania metody \u0142a\u0144cuchowej \u201eattrs\u201d<\/figcaption><\/figure>\n\n\n\n<p>Wi\u0119cej na temat API biblioteki i jej mo\u017cliwo\u015bci mo\u017cecie przeczyta\u0107 <a href=\"https:\/\/styled-components.com\/docs\/api\" rel=\"nofollow\" >na oficjalnej stronie<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wykorzystanie styled-components w projekcie z TypeScriptem<\/h2>\n\n\n\n<p>Dzi\u0119ki swojemu community (community w rozumieniu u\u017cytkownik\u00f3w danego rozwi\u0105zania og\u00f3lnie. Im wi\u0119cej os\u00f3b liczy, tym \u0142atwiej o wsparcie m.in. w rozwi\u0105zywaniu problem\u00f3w. Styled-components mo\u017ce i nie jest najpopularniejszym rozwi\u0105zaniem, niemniej w miejscach takich jak np. GitHub lub Stackoverflow znajdziemy wiele wskaz\u00f3wek i odpowiedzi na nasze potencjalne pytania), mamy dost\u0119p do przygotowanych definicji dla projekt\u00f3w reactowych. Wystarczy dodatkowo zainstalowa\u0107 paczk\u0119 <em>@types\/styled-components<\/em> lub w przypadku React Native <em>@types\/styled-componenst @types\/styled-components-react-native.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zalety i wady korzystania ze styled-components<\/h2>\n\n\n\n<p>Jak ka\u017cde narz\u0119dzie, tak\u017ce to rozwi\u0105zanie cechuje si\u0119 silniejszymi i s\u0142abszymi elementami.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pozytywne aspekty wykorzystywania biblioteki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cho\u0107 style liniowe wydaj\u0105 si\u0119 ma\u0142o atrakcyjn\u0105 metod\u0105, szczeg\u00f3lnie dla os\u00f3b przyzwyczajonych do klas CSS-owych, to takie rozwi\u0105zanie eliminuje problem niepotrzebnego kodu. W ten spos\u00f3b nie dodajemy klas, kt\u00f3re po kolejnych zmianach czy poprawkach w kodzie, czasami nie s\u0105 ju\u017c nam potrzebne.<\/li>\n\n\n\n<li>Ponadto, styled-components automatycznie generuje prefiksy dla przegl\u0105darek. Pozwala nam to na swobodne korzystanie z najnowszych rozwi\u0105za\u0144 CSS-owych, kt\u00f3re niekoniecznie s\u0105 w pe\u0142ni wspierane przez cz\u0119\u015b\u0107 przegl\u0105darek.<\/li>\n\n\n\n<li>Biblioteka ta r\u00f3wnie\u017c tworzy unikalne nazwy klas dla element\u00f3w, dzi\u0119ki czemu nie musimy si\u0119 martwi\u0107 np. o duplikaty nazw czy liter\u00f3wki.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Obawy zwi\u0105zane z wykorzystywaniem biblioteki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jedn\u0105 z obaw mo\u017ce by\u0107 niepewno\u015b\u0107 dotycz\u0105ca przysz\u0142o\u015bci. Je\u017celi wsparcie dla biblioteki zostanie wycofane lub je\u015bli tw\u00f3rcy w og\u00f3le porzuc\u0105 projekt, to wprowadzanie zmian do naszych rozwi\u0105za\u0144 mo\u017ce wymaga\u0107 wi\u0119kszej przebudowy.<\/li>\n\n\n\n<li>Wa\u017cnym aspektem jest r\u00f3wnie\u017c niezbyt du\u017ce community, w zwi\u0105zku z czym trudniej jest wyszuka\u0107 b\u0142\u0119dy i problemy, z kt\u00f3rymi si\u0119 w danym momencie mierzymy. Otrzymanie skutecznej pomocy r\u00f3wnie\u017c mo\u017ce by\u0107 wi\u0119kszym wyzwaniem.<\/li>\n<\/ul>\n\n\n\n<p>Niemniej, styled-components nadal s\u0105 warte wypr\u00f3bowania przy projektach reactowych ze wzgl\u0119du na wygod\u0119 i \u0142atwo\u015b\u0107 tworzenia dynamicznych styl\u00f3w zgodnie z metodyk\u0105 CSS-in-JS.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12012&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 7)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;React. Stylowanie komponent\u00f3w za pomoc\u0105 styled-components&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 7)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jest kilka podej\u015b\u0107 do dodawania styl\u00f3w CSS w projektach reactowych \u2013 mo\u017cna korzysta\u0107 z tzw. sk\u00f3rek (Themes), modu\u0142\u00f3w (CSS Modules) &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/react-stylowanie-komponentow-za-pomoca-styled-components\/\">Continued<\/a><\/p>\n","protected":false},"author":317,"featured_media":12022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[188,991,1154],"class_list":["post-12012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-html","tag-react","tag-styled-components"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/11\/React.-Stylowanie-komponentow-za-pomoca-styled-components.png","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=12012"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012\/revisions"}],"predecessor-version":[{"id":22130,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12012\/revisions\/22130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/12022"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=12012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=12012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=12012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}