{"_id":"569c8c15d326c80d0068f7b7","category":{"_id":"569c8b7c15bb390d00db6f9d","pages":["56a42c3295be510d00cb9c52"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":1,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-18T06:51:40.329Z","from_sync":false,"order":6,"slug":"technology-overview","title":"Technology Stack"},"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","__v":71,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-18T06:54:13.934Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:html]\n{\n  \"html\": \"Your theme's <span class=\\\"inline-code\\\"><theme-name>/templates/</span> subdirectory renders the bulk of your storefront pages. It has three subdirectories of its own, each providing HTML pages for a specific purpose:\\n\\n<ul>\\n <li><a href=\\\"#pages\\\">pages Subdirectory</a></li>\\n <li><a href=\\\"#components\\\">components Subdirectory</a></li>\\n <li><a href=\\\"#layout\\\">layout Subdirectory</a></li>\\n <li><a href=\\\"#Next\\\">Next Steps</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"pages\\\"></a> pages Subdirectory </h2>\\n\\nHTML pages within the <span class=\\\"inline-code\\\">/templates/pages/</span> subdirectory define what storefront pages to render during compilation.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"To prevent rendering errors, theme developers should not change page names within <span class=\\\"inline-code\\\">templates/pages/</span>.\",\n  \"title\": \"Reserved Page Names\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"These pages contain partials (blocks of reusable code) based on standard <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> helpers. They use Handlebars statements, and also <a href=\\\"http://yaml.org/\\\">YAML</a>-formatted <a href=\\\"/docs/using-yaml-front-matter\\\">front matter</a>, to call pages in the parallel <span class=\\\"inline-code\\\">/<a href=\\\"#components\\\">components</a>/</span> and <span class=\\\"inline-code\\\">/<a href=\\\"#layout\\\">layout</a>/</span> subdirectories. \\n\\n<br><p></p>For example, at the bottom of several <span class=\\\"inline-code\\\">/pages/</span> files, you’ll see Handlebars calls like this to <span class=\\\"inline-code\\\">/layout/</span> pages:<br><p></p>\\n\\n<pre>\\n{{> /layout/base}}\\n</pre>\\n\\n\\n<H2> <A NAME=\\\"components\\\"></a> components Subdirectory </h2>\\n\\nPages within the <span class=\\\"inline-code\\\">/templates/components/</span> subdirectory provide code snippets and partials that you can reuse throughout your theme.<br><p></p>\\n\\nYou can add pages to this subdirectory to meet your theme's needs. Also, <span class=\\\"inline-code\\\">/components/</span> pages can call other <span class=\\\"inline-code\\\">/components/</span> pages.\\n\\n<H2> <A NAME=\\\"layout\\\"></a> layout Subdirectory </h2>\\n\\nPages within the <span class=\\\"inline-code\\\">/templates/layout/</span> subdirectory define your site's overall structure (header, footer, etc.) for your site. You can implement multiple layouts here, for different use cases.\\n\\n<H2> <A NAME=\\\"Next\\\"></a> Next Steps </h2>\\nWe invite you to proceed to our:\\n\\n<ul>\\n  <li> <a href=\\\"/docs/anatomy-of-the-stencil-theme\\\">Path Anatomy</a> &ndash; a broader overview.\\n  </li>\\n<!-- <li> <a href=\\\"/docs/installing-and-launching-stencil-1\\\">Installation and Launch</a> instructions.\\n </li>\\n<li> <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial.\\n </li> -->\\n<li> <a href=\\\"/docs/target-browsers\\\">Target Browsers</a> list.\\n  </li>\\n<li> <a href=\\\"/docs/configjson-reference\\\">Configuration</a> reference.\\n  </li>\\n<li> <a href=\\\"/docs/using-yaml-front-matter\\\">Front-matter</a> overview of YAML conventions.\\n  </li>\\n<li> Front-matter <a href=\\\"/docs/front-matter-variables\\\">attributes</a> reference.\\n  </li>\\n<li> <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> development overview.\\n  </li>\\n<li> <a href=\\\"/docs/stencil-object-model\\\">Objects</a> reference.\\n  </li>\\n</ul>\"\n}\n[/block]","excerpt":"A Stencil theme's basic anatomy and assembly","slug":"compilation","type":"basic","title":"Templates, Partials, and Compilation"}

Templates, Partials, and Compilation

A Stencil theme's basic anatomy and assembly

[block:html] { "html": "Your theme's <span class=\"inline-code\"><theme-name>/templates/</span> subdirectory renders the bulk of your storefront pages. It has three subdirectories of its own, each providing HTML pages for a specific purpose:\n\n<ul>\n <li><a href=\"#pages\">pages Subdirectory</a></li>\n <li><a href=\"#components\">components Subdirectory</a></li>\n <li><a href=\"#layout\">layout Subdirectory</a></li>\n <li><a href=\"#Next\">Next Steps</a></li>\n</ul>\n\n<H2> <A NAME=\"pages\"></a> pages Subdirectory </h2>\n\nHTML pages within the <span class=\"inline-code\">/templates/pages/</span> subdirectory define what storefront pages to render during compilation." } [/block] [block:callout] { "type": "danger", "body": "To prevent rendering errors, theme developers should not change page names within <span class=\"inline-code\">templates/pages/</span>.", "title": "Reserved Page Names" } [/block] [block:html] { "html": "These pages contain partials (blocks of reusable code) based on standard <a href=\"/docs/developing-with-handlebars\">Handlebars</a> helpers. They use Handlebars statements, and also <a href=\"http://yaml.org/\">YAML</a>-formatted <a href=\"/docs/using-yaml-front-matter\">front matter</a>, to call pages in the parallel <span class=\"inline-code\">/<a href=\"#components\">components</a>/</span> and <span class=\"inline-code\">/<a href=\"#layout\">layout</a>/</span> subdirectories. \n\n<br><p></p>For example, at the bottom of several <span class=\"inline-code\">/pages/</span> files, you’ll see Handlebars calls like this to <span class=\"inline-code\">/layout/</span> pages:<br><p></p>\n\n<pre>\n{{> /layout/base}}\n</pre>\n\n\n<H2> <A NAME=\"components\"></a> components Subdirectory </h2>\n\nPages within the <span class=\"inline-code\">/templates/components/</span> subdirectory provide code snippets and partials that you can reuse throughout your theme.<br><p></p>\n\nYou can add pages to this subdirectory to meet your theme's needs. Also, <span class=\"inline-code\">/components/</span> pages can call other <span class=\"inline-code\">/components/</span> pages.\n\n<H2> <A NAME=\"layout\"></a> layout Subdirectory </h2>\n\nPages within the <span class=\"inline-code\">/templates/layout/</span> subdirectory define your site's overall structure (header, footer, etc.) for your site. You can implement multiple layouts here, for different use cases.\n\n<H2> <A NAME=\"Next\"></a> Next Steps </h2>\nWe invite you to proceed to our:\n\n<ul>\n <li> <a href=\"/docs/anatomy-of-the-stencil-theme\">Path Anatomy</a> &ndash; a broader overview.\n </li>\n<!-- <li> <a href=\"/docs/installing-and-launching-stencil-1\">Installation and Launch</a> instructions.\n </li>\n<li> <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial.\n </li> -->\n<li> <a href=\"/docs/target-browsers\">Target Browsers</a> list.\n </li>\n<li> <a href=\"/docs/configjson-reference\">Configuration</a> reference.\n </li>\n<li> <a href=\"/docs/using-yaml-front-matter\">Front-matter</a> overview of YAML conventions.\n </li>\n<li> Front-matter <a href=\"/docs/front-matter-variables\">attributes</a> reference.\n </li>\n<li> <a href=\"/docs/developing-with-handlebars\">Handlebars</a> development overview.\n </li>\n<li> <a href=\"/docs/stencil-object-model\">Objects</a> reference.\n </li>\n</ul>" } [/block]