var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),b=(n,a)=>{for(var s in a)t(n,s,{get:a[s],enumerable:!0})},i=(n,a,s,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of m(a))!N.call(n,l)&&l!==s&&t(n,l,{get:()=>a[l],enumerable:!(c=h(a,l))||c.enumerable});return n};var v=(n,a,s)=>(s=n!=null?d(u(n)):{},i(a||!n||!n.__esModule?t(s,"default",{value:n,enumerable:!0}):s,n)),g=n=>i(t({},"__esModule",{value:!0}),n);var r=k((D,o)=>{o.exports=_jsx_runtime});var x={};b(x,{default:()=>w,frontmatter:()=>y});var e=v(r()),y={title:"Create layout with HandlebarsJS",description:"Layout template is a good practice to not repeat ourselves (DRY). Handlebars templates engine does not provide a layout feature out of the box but it still is possible to create a layout. principle. Handlebars template engine, there is no out-of-the-box layout feature but it is possible to create a layout.",image:"/images/handlebars-js.png",slug:"handlebarsjs-layout",tags:["handlebarsjs","javascript"],locale:"en",updated:new Date(1653586055495),created:new Date(1653585954928)};function p(n){let a=Object.assign({p:"p",code:"code",div:"div",pre:"pre",span:"span"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.p,{children:"Layout template is a good practice following the DRY (Don't Repeat Yourself) principle. This file contains the skeleton of the pages and the remaining templates will only add the content to the skeleton. In most of the cases, the layout contains the HTML skeleton with the main CSS, JS, Fonts files, but also some main UI components like the header, footer, the navigation bar."}),` `,(0,e.jsxs)(a.p,{children:["Handlebars templates engine does not provides layout feature out of the box but it still be possible to create a layout with ",(0,e.jsx)(a.code,{children:"Partial Blocks"})," like the following code."]}),` `,(0,e.jsx)(a.p,{children:"First, create a layout template with Partial Blocks slot. You can have one or several additional variables."}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:"layout.hbs"}),(0,e.jsx)(a.pre,{className:"language-hbs",children:(0,e.jsxs)(a.code,{className:"language-hbs code-highlight",children:[(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"!"}),(0,e.jsx)(a.span,{className:"token variable",children:"DOCTYPE"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"html"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"html"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"lang"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"en"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"head"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"meta"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"charset"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"UTF-8"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"meta"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"name"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"viewport"'})," ",(0,e.jsx)(a.span,{className:"token variable",children:"content"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"width=device-width, initial-scale=1.0"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"meta"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"http-equiv"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"X-UA-Compatible"'})," ",(0,e.jsx)(a.span,{className:"token variable",children:"content"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"ie=edge"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"title"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token variable",children:"title"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"title"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[" ",(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"link"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"rel"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"stylesheet"'})," ",(0,e.jsx)(a.span,{className:"token variable",children:"href"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:'"/css/main.css"'}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"head"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsx)(a.span,{className:"code-line",children:` `}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"body"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"@"}),(0,e.jsx)(a.span,{className:"token variable",children:"partial-block"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"body"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"html"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]})]})}),` `,(0,e.jsx)(a.p,{children:"Then, use it as a Partial Block."}),` `,(0,e.jsx)(a.div,{className:"rehype-code-title",children:"homepage.hbs"}),(0,e.jsx)(a.pre,{className:"language-hbs",children:(0,e.jsxs)(a.code,{className:"language-hbs code-highlight",children:[(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token delimiter punctuation",children:"{{"}),(0,e.jsx)(a.span,{className:"token block keyword",children:"#>"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"layout"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"title"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"="}),(0,e.jsx)(a.span,{className:"token string",children:"'Homepage'"})," ",(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"h1"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),(0,e.jsx)(a.span,{className:"token variable",children:"Welcome"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"to"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"my"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"website"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"h1"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token variable",children:"p"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),(0,e.jsx)(a.span,{className:"token variable",children:"This"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"is"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"the"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"home"})," ",(0,e.jsx)(a.span,{className:"token variable",children:"page"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"p"}),(0,e.jsx)(a.span,{className:"token punctuation",children:">"}),` `]}),(0,e.jsxs)(a.span,{className:"code-line",children:[(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"/"}),(0,e.jsx)(a.span,{className:"token variable",children:"layout"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]})]})})]})}function f(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,Object.assign({},n,{children:(0,e.jsx)(p,n)})):p(n)}var w=f;return g(x);})(); ;return Component;

handlebarsjs

Snippets

Create layout with HandlebarsJS