[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fwriting\u002Fpages":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"pages\">Pages\u003C\u002Fh1>\n\u003Cp>Every Markdown file in \u003Ccode>docs\u002F\u003C\u002Fcode> is a page. The file’s path decides its URL:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>File\u003C\u002Fth>\n\u003Cth>URL\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>docs\u002Fintroduction.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fintroduction\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>docs\u002Fguides\u002Fsetup.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fguides\u002Fsetup\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>docs\u002Fguides\u002Fadvanced\u002Ftuning.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fguides\u002Fadvanced\u002Ftuning\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Folders get a page too: \u003Ccode>\u002Fguides\u003C\u002Fcode> shows the folder’s \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F3.x\u002Forganizing\u002Findex-pages\">index.md\u003C\u002Fa>, or else a list of the pages and folders inside \u003Ccode>guides\u002F\u003C\u002Fcode>. Opening a URL that ends in \u003Ccode>.md\u003C\u002Fcode>, like \u003Ccode>\u002Fguides\u002Fsetup.md\u003C\u002Fcode>, redirects to the page.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>File names end up in URLs. Use lowercase words separated by hyphens (\u003Ccode>getting-started.md\u003C\u002Fcode>), and avoid renaming published pages: links to the old URL stop working.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"titles\">\u003Ca class=\"heading-anchor\" href=\"#titles\" aria-label=\"Link to this section\" data-route=\"#titles\">#\u003C\u002Fa>Titles\u003C\u002Fh2>\n\u003Cp>A page’s title appears in the sidebar, the breadcrumbs, search results and the browser tab. Clay takes the first of:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Ccode>title\u003C\u002Fcode> in the front matter,\u003C\u002Fli>\n\u003Cli>the first \u003Ccode># heading\u003C\u002Fcode> of the page,\u003C\u002Fli>\n\u003Cli>the file name, with hyphens turned into spaces: \u003Ccode>getting-started.md\u003C\u002Fcode> becomes “Getting started”.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Most pages only need a \u003Ccode># heading\u003C\u002Fcode>. Use \u003Ccode>title\u003C\u002Fcode> when the sidebar should show something shorter than the heading.\u003C\u002Fp>\n\u003Ch2 id=\"front-matter\">\u003Ca class=\"heading-anchor\" href=\"#front-matter\" aria-label=\"Link to this section\" data-route=\"#front-matter\">#\u003C\u002Fa>Front matter\u003C\u002Fh2>\n\u003Cp>Front matter is an optional block of settings at the very top of a page, between two \u003Ccode>---\u003C\u002Fcode> lines:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Setup\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-wrench\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">description\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">How to install and configure the project in five steps.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#076240;--shiki-dark:#B5CEA8\">2\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-light-font-weight:bold;--shiki-dark:#569CD6;--shiki-dark-font-weight:bold\"># Setting up the project\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Field\u003C\u002Fth>\n\u003Cth>Default\u003C\u002Fth>\n\u003Cth>Purpose\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>title\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>first heading, then file name\u003C\u002Ftd>\n\u003Ctd>Title in navigation, search and browser tab\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>icon\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-solid fa-file\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Ffeatures\u002Fthemes-and-icons\" data-route=\"\u002F3.x\u002Ffeatures\u002Fthemes-and-icons\">Font Awesome\u003C\u002Fa> icon in the sidebar and breadcrumbs\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>description\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>first paragraph\u003C\u002Ftd>\n\u003Ctd>Summary for search engines and link previews, see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Ffeatures\u002Fseo\" data-route=\"\u002F3.x\u002Ffeatures\u002Fseo\">SEO\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>order\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>none\u003C\u002Ftd>\n\u003Ctd>Position among the pages and folders next to it, see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Fnavigation\" data-route=\"\u002F3.x\u002Forganizing\u002Fnavigation\">navigation\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>list\u003C\u002Fcode>, \u003Ccode>hero\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Only for \u003Ccode>index.md\u003C\u002Fcode>: a list of the folder’s pages and a large header, see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F3.x\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>The full reference is on the \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fconfiguration\u002Ffront-matter\" data-route=\"\u002F3.x\u002Fconfiguration\u002Ffront-matter\">front matter\u003C\u002Fa> page. A file named \u003Ccode>index.md\u003C\u002Fcode> is not a page of its own: it is the page of its folder, see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F3.x\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Front matter only counts when \u003Ccode>---\u003C\u002Fcode> is the very first line of the file, so a horizontal rule further down a page is never mistaken for it. Values may be quoted or not:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"Setup: the long way\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-wrench\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Note\u003C\u002Fp>\n\u003Cp>Clay ignores fields it does not know. You can keep other tools’ fields, like \u003Ccode>tags\u003C\u002Fcode> or \u003Ccode>author\u003C\u002Fcode>, in the same block.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"page-layout\">\u003Ca class=\"heading-anchor\" href=\"#page-layout\" aria-label=\"Link to this section\" data-route=\"#page-layout\">#\u003C\u002Fa>Page layout\u003C\u002Fh2>\n\u003Cp>Each page shows, from top to bottom:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>the page content, rendered from Markdown,\u003C\u002Fli>\n\u003Cli>an \u003Cstrong>Edit this page\u003C\u002Fstrong> link and the date of the last change (when configured, see \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Ffeatures\u002Fpage-details\" data-route=\"\u002F3.x\u002Ffeatures\u002Fpage-details\">page details\u003C\u002Fa>),\u003C\u002Fli>\n\u003Cli>links to the previous and next page in the navigation.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>On wide screens, a table of contents lists the page’s \u003Ccode>##\u003C\u002Fcode> and \u003Ccode>###\u003C\u002Fcode> headings and marks the section you are reading.\u003C\u002Fp>\n",[6,10,13],{"id":7,"text":8,"level":9},"titles","Titles",2,{"id":11,"text":12,"level":9},"front-matter","Front matter",{"id":14,"text":15,"level":9},"page-layout","Page layout","How Markdown files become pages, how pages get their titles and which front matter fields Clay reads.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fwriting\u002Fpages.png",1792666368831]