{"id":1979,"date":"2024-10-14T15:51:58","date_gmt":"2024-10-14T12:51:58","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=1979"},"modified":"2025-12-17T17:30:19","modified_gmt":"2025-12-17T15:30:19","slug":"how-to-create-a-custom-hyva-theme","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/create-custom-hyva-theme","title":{"rendered":"How to Create a Custom Hyv\u00e4 Theme"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full disable_zoom\"><img loading=\"lazy\" width=\"1600\" height=\"600\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1.png\" alt=\"How to Create a Custom Hyv\u00e4 Theme\" class=\"wp-image-1988\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1.png 1600w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1-300x113.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1-1024x384.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1-768x288.png 768w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1-1536x576.png 1536w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1-1568x588.png 1568w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Creating a custom theme using the Hyv\u00e4 frontend in Magento 2 involves several steps. It includes setting up the development environment, creating and enabling the child Hyv\u00e4 theme, and more. Following them is important to create a proper and effective custom Hyv\u00e4 theme for your store.<\/p>\n\n\n\n<p>With <a href=\"\/blog\/magento-hyva-theme-news\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 Theme now available as a free<\/a>, open-source solution, it&#8217;s easier than ever to get started with high-performance Magento development. So, this tutorial walks you through each step so you can easily develop a custom Hyv\u00e4 theme with a unique, high-performance design tailored to your store. However, before getting started, make sure that you meet the following requirements.<\/p>\n\n\n\n<h2>Requirements<\/h2>\n\n\n\n<ul><li>Magento 2.4.4-p9, 2.4.5-p8, 2.4.6-p7, 2.4.7-p1 or higher<\/li><li>A Hyv\u00e4 <a href=\"http:\/\/packagist.com\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">packagist.com<\/a> key<\/li><li>PHP 8.1, 8.2, 8.3, or 8.4<\/li><li>Node.js version 20.0.0 or any later version<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-color:#f1f3fd;min-height:200px\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-dark-gray-color has-text-color\">Building a custom Hyv\u00e4 theme involves technical steps and specific requirements. If you prefer a professional touch or want to save time, our expert team is ready to assist.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background\" href=\"\/hyva-theme-development\" style=\"border-radius:26px;background:linear-gradient(135deg,rgb(125,80,208) 0%,rgb(46,96,182) 100%)\" target=\"_blank\" rel=\"noreferrer noopener\">Get Expert Hyv\u00e4 Development Help<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2>How to Create a Custom Hyv\u00e4 Theme<\/h2>\n\n\n\n<p>Creating a custom Hyv\u00e4 theme with a unique design involves several key steps. By following this guide, you\u2019ll be able to craft a high-performance, visually distinct theme tailored to your Magento store.<\/p>\n\n\n\n<p><strong>Steps to Get Started:<\/strong><\/p>\n\n\n\n<p><a href=\"#step-1-set-up-the-development-environment\">Step 1: Set up the development environment<\/a>.<br><a href=\"#step-2-create-a-child-hyva-theme\">Step 2: Create a child Hyv\u00e4 theme<\/a>.<br><a href=\"#step-3-enable-child-hyva-theme-for-magento-2\">Step 3: Enable your custom Hyv\u00e4 theme<\/a>.<br><a href=\"#step-4-set-css-compilation-paths-in-the-child-hyva-theme\">Step 4: Set CSS compilation paths in your custom Hyv\u00e4 theme<\/a>.<br><a href=\"#step-5-configure-tailwind-config-js-for-custom-hyva-theme-design\">Step 5: Configure Tailwind.config.js for a unique design<\/a>.<\/p>\n\n\n\n<p>Let\u2019s dive deeper into the process and explore how to bring your custom Hyv\u00e4 theme to life.<\/p>\n\n\n\n<h3>Step 1: Set up the development environment<\/h3>\n\n\n\n<ol><li>Ensure your Magento 2 project already has a Hyv\u00e4 base (Hyv\u00e4-base) theme installed via Composer.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">composer require hyva-themes\/magento2-default-theme<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li>Check the installed tools.<\/li><\/ol>\n\n\n\n<p>To use Alpine.js and Tailwind CSS, you will need Node.js. Verify that it is already set up on your system:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">node -v<\/code><\/pre><\/div>\n\n\n\n<h3>Step 2: Create a child Hyv\u00e4 theme<\/h3>\n\n\n\n<ol><li>Generate a new catalog for your own theme.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">app\/design\/frontend\/Plumrocket\/CustomTheme<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li>Create <code>theme.xml<\/code> file.<\/li><\/ol>\n\n\n\n<p>In the new directory, you need to create a <code>theme.xml<\/code> file to declare your custom theme and its parent Hyva theme:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n   &lt;title>Plumrocket CustomTheme&lt;\/title>\n   &lt;parent>Hyva\/default&lt;\/parent>\n   &lt;media>\n       &lt;preview_image>media\/preview.png&lt;\/preview_image>\n   &lt;\/media>\n&lt;\/theme>\n<\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\"><li>Create <code>registration.php<\/code> file.<\/li><\/ol>\n\n\n\n<p>The theme must be registered in the root directory of your theme <code>Plumrocket\/CustomTheme<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php\nuse \\Magento\\Framework\\Component\\ComponentRegistrar;\nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend\/Plumrocket\/CustomTheme', __DIR__);<\/code><\/pre><\/div>\n\n\n\n<ol start=\"4\"><li>Download the theme preview image.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">app\/design\/frontend\/Plumrocket\/CustomTheme\/media\/preview.png\n<\/code><\/pre><\/div>\n\n\n\n<ol start=\"5\"><li>Copy the web catalog from the Hyv\u00e4 theme.<\/li><\/ol>\n\n\n\n<p>Clone the web catalog with all its files from the parent theme.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">vendor\/hyva-themes\/magento2-default-theme\/web\/ into your own theme.<\/code><\/pre><\/div>\n\n\n\n<p>The Magento root command:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">cp -r vendor\/hyva-themes\/magento2-default-theme\/web\/app\/design\/frontend\/Plumrocket\/CustomTheme\/<\/code><\/pre><\/div>\n\n\n\n<h3>Step 3: Enable child Hyv\u00e4 theme for Magento 2<\/h3>\n\n\n\n<p>Activate the theme through the admin panel:<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\" style=\"margin-bottom: 25px;\">Step-by-step guide:<\/p>\n\n\n\n<ol><li>Go to <strong>Content &gt; Design &gt; Configuration<\/strong><\/li><li>In the list of available stores, click Edit next to the required store<\/li><li>In the Default Theme section, select your theme (Plumrocket CustomTheme) from the list.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<h3>Step 4: Set CSS compilation paths in the child Hyv\u00e4 theme<\/h3>\n\n\n\n<ol><li><strong>Update the paths for the child theme.<\/strong><\/li><\/ol>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\" style=\"margin-bottom: 25px;\">Step-by-step guide:<\/p>\n\n\n\n<ol><li>Open the <code>app\/design\/frontend\/Plumrocket\/CustomTheme\/web\/tailwind\/tailwind.config.js<\/code> file.&nbsp;<\/li><li>Navigate the <code>content<\/code> section, which is responsible for paths to files that need to be processed by Tailwind CSS. Here, you must enable the lines located under the comment: <br><code>\/\/ parent theme in Vendor (if this is a child-theme)<\/code>.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<p>This is what the updated content section should look like:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">content: [\n   \/\/ this theme's phtml and layout XML files\n   '..\/..\/**\/*.phtml',\n   '..\/..\/*\/layout\/*.xml',\n   '..\/..\/*\/page_layout\/override\/base\/*.xml',\n   \/\/ parent theme in Vendor (if this is a child-theme)\n   '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/**\/*.phtml',\n   '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/*\/layout\/*.xml',\n   '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/*\/page_layout\/override\/base\/*.xml',\n   \/\/ app\/code phtml files (if need tailwind classes from app\/code modules)\n   \/\/'..\/..\/..\/..\/..\/..\/..\/app\/code\/**\/*.phtml',\n]\n<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li><strong>Install dependencies for Tailwind<\/strong>.<\/li><\/ol>\n\n\n\n<p>Install dependencies for Tailwind and execute the command in the directory<\/p>\n\n\n\n<p><code>app\/design\/frontend\/Plumrocket\/CustomTheme\/web\/tailwind<\/code> to install packages:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">npm install<\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\"><li><strong>Compilation of styles.<\/strong><\/li><\/ol>\n\n\n\n<p>Run the command in the directory <code>app\/design\/frontend\/Plumrocket\/CustomTheme\/web\/tailwind<\/code>.<\/p>\n\n\n\n<p>The following command is used to start tracking file modifications that utilize Tailwind CSS classes. It is helpful during active development when you frequently change the .phtml, .xml, or CSS files in your theme.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">npm run watch<\/code><\/pre><\/div>\n\n\n\n<p>How it works:<\/p>\n\n\n\n<ul><li><em>Track changes to files<\/em>: When you modify any file that contains Tailwind classes (e.g. .phtml, .xml, or .js), Tailwind automatically generates new CSS styles based on those classes. <\/li><li><em>Swift style updates<\/em>: Tailwind uses Just-in-Time (JIT) compilation, which means that only the necessary styles are generated on the fly.<\/li><\/ul>\n\n\n\n<p>Here is the command that prepares the project for production. It optimizes styles for a productive environment.<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">npm run build-prod<\/code><\/pre><\/div>\n\n\n\n<p>How it works:<\/p>\n\n\n\n<ul><li><em>CSS Purge<\/em>: Tailwind CSS uses a process called purge, which removes all unnecessary CSS classes, leaving only those that are used in your code. This significantly reduces the size of the final CSS file.<\/li><li><em>Minification<\/em>: All styles are minimized and optimized to reduce file size and improve page load speed.<\/li><\/ul>\n\n\n\n<h3>Step 5: Configure Tailwind.config.js for custom Hyv\u00e4 theme design<\/h3>\n\n\n\n<p>The <code>tailwind.config.js<\/code> file defines the styles and adapts them to the needs of your project. It is used to extend or override the default Tailwind CSS settings. Let\u2019s take a closer look at an example of a custom configuration for a different design:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">theme: {\n   extend: {\n       screens: {\n           'sm': '640px',\n           'md': '768px',\n           'lg': '1024px',\n           'xl': '1280px',\n           '2xl': '1536px'\n       },\n       fontFamily: {\n           sans: [\"Roboto\", \"Arial\", \"sans-serif\"]\n       },\n       colors: {\n           primary: {\n               lighter: colors.indigo['300'],\n               \"DEFAULT\": colors.indigo['600'],\n               darker: colors.indigo['800']\n           },\n           secondary: {\n               lighter: colors.teal['100'],\n               \"DEFAULT\": colors.teal['200'],\n               darker: colors.teal['300']\n           },\n           background: {\n               lighter: colors.gray['100'],\n               \"DEFAULT\": colors.gray['200'],\n               darker: colors.gray['300']\n           },\n           green: colors.green,\n           orange: colors.orange,\n           purple: colors.purple\n       },\n       textColor: {\n           orange: colors.orange,\n           red: {\n               ...colors.red,\n               \"DEFAULT\": colors.red['500']\n           },\n           primary: {\n               lighter: colors.black,\n               \"DEFAULT\": colors.gray['900'],\n               darker: colors.gray['700']\n           },\n           secondary: {\n               lighter: colors.gray['500'],\n               \"DEFAULT\": colors.gray['600'],\n               darker: colors.gray['700']\n           }\n       },\n       backgroundColor: {\n           primary: {\n               lighter: colors.indigo['500'],\n               \"DEFAULT\": colors.indigo['600'],\n               darker: colors.indigo['700']\n           },\n           secondary: {\n               lighter: colors.teal['100'],\n               \"DEFAULT\": colors.teal['200'],\n               darker: colors.teal['300']\n           },\n           container: {\n               lighter: '#ffffff',\n               \"DEFAULT\": '#f8f9fa',\n               darker: '#e9ecef'\n           }\n       },\n       borderColor: {\n           primary: {\n               lighter: colors.indigo['500'],\n               \"DEFAULT\": colors.indigo['600'],\n               darker: colors.indigo['700']\n           },\n           secondary: {\n               lighter: colors.teal['100'],\n               \"DEFAULT\": colors.teal['200'],\n               darker: colors.teal['300']\n           },\n           container: {\n               lighter: '#dcdcdc',\n               \"DEFAULT\": '#ced4da',\n               darker: '#adb5bd'\n           }\n       },\n       minWidth: {\n           8: spacing[\"8\"],\n           20: spacing[\"20\"],\n           40: spacing[\"40\"],\n           48: spacing[\"48\"]\n       },\n       minHeight: {\n           14: spacing[\"14\"],\n           a11y: '44px',\n           'screen-25': '25vh',\n           'screen-50': '50vh',\n           'screen-75': '75vh'\n       },\n       maxHeight: {\n           '0': '0',\n           'screen-25': '25vh',\n           'screen-50': '50vh',\n           'screen-75': '75vh'\n       },\n       container: {\n           center: true,\n           padding: '1.5rem'\n       }\n   }\n},\n<\/code><\/pre><\/div>\n\n\n\n<p>Overall, this configuration file allows you to easily customize the theme to a specific design and display a unique style based on your business needs. What was done in the code snippet:<\/p>\n\n\n\n<ul><li><em>Fonts<\/em>: The Roboto font is utilized instead of the standard Segoe UI. This changes the appearance of the text on the site, making it more modern.<\/li><li><em>Colors<\/em>: The primary color has been changed to indigo, giving the site a fresh look with a cool color palette. The secondary color now uses shades of green (teal).<\/li><li><em>Texts and backgrounds<\/em>: Modifications have been made to text and background colors by using darker shades for sharp contrast and improved readability.<\/li><li><em>Containers<\/em>: Now, the container is centered on the screen and has additional padding for improved design responsiveness.<\/li><\/ul>\n\n\n\n<p>If you have issues with creating a child Hyv\u00e4 theme and customizing it according to your needs, feel free to reach out to us for our custom <a href=\"\/hyva-theme-development\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 development services<\/a>.<\/p>\n\n\n\n<h2>Frequently Asked Questions (FAQ)<\/h2>\n\n\n\n<p class=\"has-normal-font-size\"><strong>Do I need to buy Hyv\u00e4 to create a custom theme?<\/strong><\/p>\n\n\n\n<p>No, <a href=\"\/blog\/magento-hyva-theme-news\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 Theme is free<\/a> and open source. You can download and use the theme to create custom themes without purchasing anything.<\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>How do I customize colors and fonts in a Hyv\u00e4 theme?<\/strong><\/p>\n\n\n\n<p>All styling is managed via <strong>Tailwind.config.js<\/strong>, where you can define colors, fonts, breakpoints, and spacing tokens.<\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>Can I clone the Hyv\u00e4 default theme and modify it?<\/strong><\/p>\n\n\n\n<p>Yes, but best practice is to create a child theme and override only what you need.<\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>How do I switch a Magento store to a custom Hyv\u00e4 theme?<\/strong><\/p>\n\n\n\n<p>Go to <strong>Content \u2192 Design \u2192 Configuration \u2192 Store View \u2192 Apply Theme<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a custom theme using the Hyv\u00e4 frontend in Magento 2 involves several steps. It includes setting up the development environment, creating and enabling the child Hyv\u00e4 theme, and more. Following them is important to create a proper and effective custom Hyv\u00e4 theme for your store.<\/p>\n<p>So, this tutorial walks you through each step so you can easily develop a custom Hyv\u00e4 theme with a unique, high-performance design tailored to your store.<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[165,123],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Custom Hyv\u00e4 Theme: Step-by-Step Guide<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom Hyv\u00e4 child theme for Magento 2 in just 5 steps. Follow a complete guide to enhance your store\u2019s performance and appearance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/create-custom-hyva-theme\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Custom Hyv\u00e4 Theme: Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a custom Hyv\u00e4 child theme for Magento 2 in just 5 steps. Follow a complete guide to enhance your store\u2019s performance and appearance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/create-custom-hyva-theme\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners &amp; Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-14T12:51:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T15:30:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/magento-2-sort-and-filter-by-rating-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1979"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=1979"}],"version-history":[{"count":18,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1979\/revisions"}],"predecessor-version":[{"id":2782,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/1979\/revisions\/2782"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=1979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=1979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=1979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}