CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cookbook | Kirby CMS</title> <link href="https://assets.getkirby.com/assets/dist/css/index.1744033384.css" rel="stylesheet"><script src="https://assets.getkirby.com/assets/dist/js/index.1744033384.js" type="module"></script> <link rel="icon" type="image/png" href="https://assets.getkirby.com/assets/images/favicon.1704303350.png"> <link rel="icon" type="image/svg+xml" href="https://assets.getkirby.com/assets/images/favicon.1704303350.svg"> <link rel="mask-icon" href="https://assets.getkirby.com/assets/images/safari-mask-icon.1704303350.svg" color="#000"> <link href="https://getkirby.com/releases.rss" rel="alternate" type="application/rss+xml" title="Kirby Releases" /> <link href="https://getkirby.com/kosmos.rss" rel="alternate" type="application/rss+xml" title="Kirby Kosmos Archive" /> <link rel="manifest" href="https://getkirby.com/app.webmanifest" /> <link href="https://getkirby.com/docs/cookbook" rel="canonical"> <script type="application/ld+json"> { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "name": "Kirby", "url": "https://getkirby.com", "logo": "https://assets.getkirby.com/assets/images/kirby-signet.1704303350.svg", "sameAs": [ "https://mastodon.social/@getkirby", "https://bsky.app/profile/getkirby.com", "https://www.linkedin.com/company/getkirby" ] }, { "@type": "WebSite", "url": "https://getkirby.com", "potentialAction": [ { "@type": "SearchAction", "target": "https://getkirby.com/search?q={search_term_string}", "query-input": "required name=search_term_string" } ] } ] }</script><link href="https://getkirby.com/open-search.xml" rel="search" title="Kirby CMS" type="application/opensearchdescription+xml"> <meta name="description" content="Delicious recipes and solutions for common tasks."> <meta property="og:site_name" content="Kirby CMS"> <meta property="og:url" content="https://getkirby.com/docs/cookbook"> <meta property="og:type" content="website"> <meta property="og:title" content="Cookbook"> <meta property="og:description" content="Delicious recipes and solutions for common tasks."> <meta property="og:image" content="https://getkirby.com/docs/cookbook/opengraph.png"> </head> <body> <div class="container"> <a href="/releases/5" class="topbar"> <span class="topbar-title"> <span class="topbar-icon">👀</span> Get a glimpse of Kirby 5 </span> <span class="topbar-link" data-active="false"> <span>Learn more</span> </span> </a> </div> <header class="header"> <a class="skipper btn btn--filled" href="#main">Skip to content</a> <div class="container"> <div class="header-content relative flex items-center"> <a class="logo" href="/"> <?xml version="1.0"?> <svg role="img" aria-labelledby="kirby-cms-icon" viewBox="0 0 36 42"> <title id="kirby-cms-icon">Kirby CMS</title> <path d="M18,0 L36,10.4981014 L36,31.5018986 L18,42 L0,31.5018986 L0,10.4981014 L18,0 Z M2,11.6926791 L2,30.3073209 L18,39.6389666 L34,30.3073209 L34,11.6926791 L18,2.36103344 L2,11.6926791 Z"/> <polyline points="26 21 21 23.59 21 24 26 24 26 28 10 28 10 24 15 24 15 23.563 10 21 10 16 18 20.297 26 16"/> </svg> </a> <div class="menu ml-auto"> <input id="menu-check" type="checkbox"> <label tabindex="0" class="menu-toggle" for="menu-check" aria-label="Show / hide menu"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="bars" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"/></svg> </label> <nav aria-label="Main menu"> <ul class="menu-1"> <li class="has-submenu"> <a href="https://getkirby.com/for/developers">The CMS</a> <ul class="menu-2"> <li><a href="https://getkirby.com/for/developers">For developers</a></li> <li><a href="https://getkirby.com/for/designers">For designers</a></li> <li><a href="https://getkirby.com/for/creators">For content creators</a></li> <li><a href="https://getkirby.com/for/clients">For clients & agencies</a></li> <li><hr /></li> <li><a href="https://getkirby.com/love">Showcase</a></li> <li><a href="https://getkirby.com/releases">Releases</a></li> <li><a class="is-external" href="https://feedback.getkirby.com">Feedback</a></li> </ul> </li> <li class="has-submenu"> <a href="https://getkirby.com/docs/guide/quickstart">Docs</a> <ul class="menu-2"> <li><a href="https://getkirby.com/docs/guide/quickstart">Guide</a></li> <li><a href="https://getkirby.com/docs/reference">Reference</a></li> <li><a href="https://getkirby.com/docs/cookbook">Cookbook</a></li> <li><a href="https://getkirby.com/docs/quicktips">Quicktips</a></li> <li><a class="is-external" href="https://www.youtube.com/kirbycasts">Screencasts</a></li> <li><a href="https://getkirby.com/docs/glossary">Glossary</a></li> </ul> </li> <li class="has-submenu"> <a href="https://getkirby.com/kosmos">Resources</a> <ul class="menu-2"> <li><a class="is-external" href="https://plugins.getkirby.com">Plugins</a></li> <li><a href="https://getkirby.com/themes">Themes</a></li> <li><hr /></li> <li><a href="https://getkirby.com/kosmos">Newsletter</a></li> <li><a href="https://getkirby.com/buzz">Buzz</a></li> <li><hr /></li> <li><a class="is-external" href="https://hub.getkirby.com">License Hub</a></li> </ul> </li> <li class="has-submenu"> <a href="https://getkirby.com/meet">Community</a> <ul class="menu-2"> <li><a href="https://getkirby.com/meet">Get together</a></li> <li><hr /></li> <li><a class="is-external" href="https://forum.getkirby.com">Support forum</a></li> <li><a class="is-external" href="https://chat.getkirby.com">Discord chat</a></li> <li><a class="is-external" href="https://community.getkirby.com">Community map</a></li> <li><hr /></li> <li><a class="is-external" href="https://mastodon.social/@getkirby">Mastodon</a></li> <li><a class="is-external" href="https://www.linkedin.com/company/getkirby">LinkedIn</a></li> </ul> </li> <li><a class="partners" href="https://getkirby.com/partners">Partners</a></li> </ul> <ul class="menu-1 menu-steps"> <li><a href="https://getkirby.com/try">Try</a></li> <li> <a href="https://getkirby.com/love" aria-label="Love"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="heart" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z"/></svg> </a> </li> <li> <a href="https://getkirby.com/buy">Buy</a> </li> </ul> </nav> </div> <style> .search-input figure svg:last-child { animation: Spin .9s linear infinite; } @keyframes Spin { 100% { transform: rotate(360deg); } } form:not([data-fetching]) .search-input figure svg:last-child { display: none; } form[data-fetching] .search-input figure svg:first-child { display: none; } .search-footer svg { width: auto; } </style> <div class="search"> <button class="search-button" type="button" data-area="all" aria-label="Search"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="search" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg> </button> <dialog class="overlay search-dialog"> <form class="relative bg-white shadow-xl" action="/search">  <div class="search-input relative flex items-stretch"> <figure class="grid place-items-center"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="search" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="loader" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z"/></svg> </figure> <input type="text" name="q" value="" placeholder="Search for anything …" autocomplete="off" > <nav class="search-input-area grid relative place-items-center flex-shrink-0 text-sm leading-tight"> <button type="button" class="flex items-center"> <span class="block search-area" data-area="all">All pages</span> </button> <ul class="bg-black shadow-xl hidden"> <li><button class="search-area" type="button" data-area="all">All pages</button></li> <li><button class="search-area" type="button" data-area="guide">Guide</button></li> <li><button class="search-area" type="button" data-area="reference">Reference</button></li> <li><button class="search-area" type="button" data-area="cookbook">Cookbook</button></li> <li><button class="search-area" type="button" data-area="plugin">Plugin</button></li> <li><button class="search-area" type="button" data-area="kosmos">Kosmos</button></li> </ul> <input name="area" type="hidden" value="all"> </nav> </div>  <div class="search-results"> <ul></ul> <template> <li class="search-result"> <a class="leading-snug" href=""> <div> <h3 class="search-title font-bold text-sm"></h3> <div class="search-byline text-xs color-gray-700"></div> <div class="search-link text-xs font-mono color-gray-600"></div> </div> <div class="search-area" data-area=""></div> </a> </li> </template> </div>  <div class="search-footer flex flex-wrap items-center justify-between text-sm"> <div class="search-more flex-shrink-0"> <a class="hidden font-bold" href="/search"> View all <span class="search-more-count mx-1"></span> results &rsaquo; </a> </div> <a class="ml-auto color-gray-600" href="https://algolia.com"> Search by <?xml version="1.0"?> <svg role="img" aria-labelledby="d0530065-8fb6-4151-adb1-9ed8e379c24c" viewBox="0 0 2196.2 500"><title id="d0530065-8fb6-4151-adb1-9ed8e379c24c">Algolia</title> <title id="algolia-icon">Algolia</title> <rect width="62.58" height="277.9" x="1845.88" y="104.73" rx="5.9" ry="5.9"/> <path d="M1070.38 275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.91 5.91 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Zm781.4-203.92h50.77c3.26 0 5.9-2.64 5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77 7.95a5.9 5.9 0 0 0-4.99 5.83v51.62c0 3.26 2.64 5.9 5.9 5.9Zm-87.75 203.92V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.91 5.91 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Zm-132.08-132.58c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78 0-36.15 3.17-51.92 9.85-15.59 6.66-29.29 16.05-40.76 28.31-11.47 12.23-20.38 26.87-26.76 44.03-6.38 17.17-9.24 37.37-9.24 58.36s3.19 36.87 9.55 54.21c6.38 17.32 15.14 32.11 26.45 44.36 11.29 12.23 24.83 21.62 40.6 28.46 15.77 6.83 40.12 10.33 52.4 10.48 12.25 0 36.78-3.82 52.7-10.48 15.92-6.68 29.46-16.23 40.78-28.46 11.29-12.25 20.05-27.04 26.25-44.36 6.22-17.34 9.24-33.22 9.24-54.21s-3.34-41.19-10.03-58.36c-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43 163.75c-11.47 15.75-27.56 23.7-48.09 23.7-20.55 0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2 0-26.89 5.59-49.14 17.06-64.87 11.45-15.75 27.54-23.52 48.07-23.52 20.55 0 36.63 7.78 48.09 23.52 11.47 15.57 17.36 37.98 17.36 64.87 0 27.19-5.72 45.3-17.19 61.2Zm-693.1-201.74h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33zm1239.55-206.92h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33zm-819.92-206.92h-49.33c-48.36 0-90.91 25.48-115.75 64.1-11.79 18.34-19.6 39.64-22.11 62.59a148.5 148.5 0 0 0 .05 32.73c4.28 38.09 23.14 71.61 50.66 94.52 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 17.99 0 34.61-5.93 48.16-15.97 16.29-11.58 28.88-28.54 34.48-47.75v50.26h-.11v11.08c0 21.84-5.71 38.27-17.34 49.36-11.61 11.08-31.04 16.63-58.25 16.63-11.12 0-28.79-.59-46.6-2.41-2.83-.29-5.46 1.5-6.27 4.22l-12.78 43.11c-1.02 3.46 1.27 7.02 4.83 7.53 21.52 3.08 42.52 4.68 54.65 4.68 48.91 0 85.16-10.75 108.89-32.21 21.48-19.41 33.15-48.89 35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0 64.1s.65 139.13 0 143.36c-12.08 9.77-27.11 13.59-43.49 14.7-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-1.32 0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33ZM249.83 0C113.3 0 2 110.09.03 246.16c-2 138.19 110.12 252.7 248.33 253.5 42.68.25 83.79-10.19 120.3-30.03 3.56-1.93 4.11-6.83 1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48 10.84-53.17 16.38-81.71 16.03-111.68-1.37-201.91-94.29-200.13-205.96 1.76-110.26 92-199.41 202.67-199.41h202.69v360.27l-115-102.18c-3.72-3.31-9.42-2.66-12.42 1.31-18.46 24.44-48.53 39.64-81.93 37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24 39.63-101.52 94-101.52 49.18 0 89.68 37.85 93.91 85.95.38 4.28 2.31 8.27 5.52 11.12l29.95 26.55c3.4 3.01 8.79 1.17 9.63-3.3 2.16-11.55 2.92-23.58 2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13 58.14-150.27 137.25-2.09 77.1 61.08 143.56 138.19 145.26 32.19.71 62.03-9.41 86.14-26.95l150.26 133.2c6.44 5.71 16.61 1.14 16.61-7.47V9.48c-.01-5.23-4.25-9.48-9.49-9.48z"/> </svg> </a> </div> </form> </dialog> </div> </div> </div> </header> <main id="main" class="main article"> <div class="container"> <div class="with-sidebar"> <nav aria-label="Cookbook menu"> <div class="sidebar cookbook-sidebar sticky" style="--top: var(--spacing-6)"> <header class="sidebar-header mb-12"> <p class="h1 color-gray-400"> <a href="/docs/cookbook">Cookbook</a> </p> <div class="sidebar-mobile-select"> <label for="mobile-menu"> Select a category … <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="angle-down" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"/></svg> </label> <select id="mobile-menu" onchange="window.location.href = this.value" > <option disabled selected>Select a category …</option> <option value="https://getkirby.com/docs/cookbook/collections"> Collections </option> <option value="https://getkirby.com/docs/cookbook/content-representations"> Content representations </option> <option value="https://getkirby.com/docs/cookbook/content-structure"> Content & structure </option> <option value="https://getkirby.com/docs/cookbook/development-deployment"> Development & deployment </option> <option value="https://getkirby.com/docs/cookbook/extensions"> Extensions </option> <option value="https://getkirby.com/docs/cookbook/forms"> Forms </option> <option value="https://getkirby.com/docs/cookbook/frontend"> Frontend </option> <option value="https://getkirby.com/docs/cookbook/headless"> Headless </option> <option value="https://getkirby.com/docs/cookbook/i18n"> i18n </option> <option value="https://getkirby.com/docs/cookbook/integrations"> Integrations </option> <option value="https://getkirby.com/docs/cookbook/navigation"> Navigation </option> <option value="https://getkirby.com/docs/cookbook/panel"> Panel </option> <option value="https://getkirby.com/docs/cookbook/performance"> Performance </option> <option value="https://getkirby.com/docs/cookbook/php"> PHP </option> <option value="https://getkirby.com/docs/cookbook/plugins"> Plugins </option> <option value="https://getkirby.com/docs/cookbook/security"> Security </option> <option value="https://getkirby.com/docs/cookbook/unclassified"> Mixed </option> </select> </div> </header> <ul class="filters"> <li> <a href="/docs/cookbook" aria-current> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="list-bullet" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"/></svg> All recipes </a> </li> <li> <button class="search-button" type="button" data-area="cookbook"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="search" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg> Search </button> </li> <li><hr class="hr"></li> <li> <a aria-label="Collections recipes" href="https://getkirby.com/docs/cookbook/collections"> Collections </a> </li> <li> <a aria-label="Content representations recipes" href="https://getkirby.com/docs/cookbook/content-representations"> Content representations </a> </li> <li> <a aria-label="Content & structure recipes" href="https://getkirby.com/docs/cookbook/content-structure"> Content & structure </a> </li> <li> <a aria-label="Development & deployment recipes" href="https://getkirby.com/docs/cookbook/development-deployment"> Development & deployment </a> </li> <li> <a aria-label="Extensions recipes" href="https://getkirby.com/docs/cookbook/extensions"> Extensions </a> </li> <li> <a aria-label="Forms recipes" href="https://getkirby.com/docs/cookbook/forms"> Forms </a> </li> <li> <a aria-label="Frontend recipes" href="https://getkirby.com/docs/cookbook/frontend"> Frontend </a> </li> <li> <a aria-label="Headless recipes" href="https://getkirby.com/docs/cookbook/headless"> Headless </a> </li> <li> <a aria-label="i18n recipes" href="https://getkirby.com/docs/cookbook/i18n"> i18n </a> </li> <li> <a aria-label="Integrations recipes" href="https://getkirby.com/docs/cookbook/integrations"> Integrations </a> </li> <li> <a aria-label="Navigation recipes" href="https://getkirby.com/docs/cookbook/navigation"> Navigation </a> </li> <li> <a aria-label="Panel recipes" href="https://getkirby.com/docs/cookbook/panel"> Panel </a> </li> <li> <a aria-label="Performance recipes" href="https://getkirby.com/docs/cookbook/performance"> Performance </a> </li> <li> <a aria-label="PHP recipes" href="https://getkirby.com/docs/cookbook/php"> PHP </a> </li> <li> <a aria-label="Plugins recipes" href="https://getkirby.com/docs/cookbook/plugins"> Plugins </a> </li> <li> <a aria-label="Security recipes" href="https://getkirby.com/docs/cookbook/security"> Security </a> </li> <li> <a aria-label="Mixed recipes" href="https://getkirby.com/docs/cookbook/unclassified"> Mixed </a> </li> </ul> </div> </nav> <article class="mb-24"> <header class="mb-12"> <h1 class="h1"> Recipes </h1> </header> <div class="mb-24"> <ul class="auto-fill auto-rows-fr" style="--min: 16rem; --gap: var(--spacing-6)"> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/ddev" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Kirby meets DDEV </h2> </div> </figure> <p class="color-gray-700 text-sm">Set up a local development environment for Kirby with DDEV in no time.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/blobs.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/panel/first-panel-area" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Panel </p> <h2 class="h3 border-top pt-3"> Basic Panel area </h2> </div> </figure> <p class="color-gray-700 text-sm">Create your first custom Panel view from scratch</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/caddy" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Kirby meets Caddy </h2> </div> </figure> <p class="color-gray-700 text-sm">How to configure the popular and simple Caddy v2 web server to run a Kirby website.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/git-based-ftp-deployment" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Git-based FTP-deploys </h2> </div> </figure> <p class="color-gray-700 text-sm">Deploy Kirby projects via GitHub actions and FTP to staging and production</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/gold.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/headless/headless-kiosk-application" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Headless </p> <h2 class="h3 border-top pt-3"> Headless kiosk app </h2> </div> </figure> <p class="color-gray-700 text-sm">Use Kirby and 11ty to generate a headless kiosk application that works offline.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/dragon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/frontend/frontend-libraries" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Frontend </p> <h2 class="h3 border-top pt-3"> Including CSS/JS libraries </h2> </div> </figure> <p class="color-gray-700 text-sm">How to add CSS or JS files to your templates</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beach.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-representations/dynamic-og-images" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content representations </p> <h2 class="h3 border-top pt-3"> Creating OG images </h2> </div> </figure> <p class="color-gray-700 text-sm">Dynamic creation of Open Graph images for social sharing</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/coding-style-standards" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Coding style standards </h2> </div> </figure> <p class="color-gray-700 text-sm">Fix coding style violations automatically with easy-to-implement, configurable tools</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/performance/responsive-images" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Performance </p> <h2 class="h3 border-top pt-3"> Responsive images </h2> </div> </figure> <p class="color-gray-700 text-sm">Boost your site's performance with images that adapt to all screen sizes</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/gold.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/headless/headless-getting-started" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Headless </p> <h2 class="h3 border-top pt-3"> Going Headless </h2> </div> </figure> <p class="color-gray-700 text-sm">Prepare Kirby for headless use.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beach.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-representations/figma-auto-populate" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content representations </p> <h2 class="h3 border-top pt-3"> Populate Figma designs </h2> </div> </figure> <p class="color-gray-700 text-sm">Using JSON representations to auto-populate your Figma designs</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/performance/lazy-loading" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Performance </p> <h2 class="h3 border-top pt-3"> Image lazy-loading </h2> </div> </figure> <p class="color-gray-700 text-sm">Lazy-loading strategies to improve your site's performance</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/replacing-core-classes" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Replacing core classes </h2> </div> </figure> <p class="color-gray-700 text-sm">Extend core classes like the Kirby or site classes</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/deepsea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/forms/user-registration" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Forms </p> <h2 class="h3 border-top pt-3"> User registration </h2> </div> </figure> <p class="color-gray-700 text-sm">Leveraging Kirby's authentication features to create a user registration system</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/darkness.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/extensions/create-pdf-preview-images" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Extensions </p> <h2 class="h3 border-top pt-3"> Preview images for PDFs </h2> </div> </figure> <p class="color-gray-700 text-sm">Display a nice auto-generated image when linking to PDF flyers, booklets etc.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/git-based-deployment-with-dokku" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Deployment with Dokku </h2> </div> </figure> <p class="color-gray-700 text-sm">A clean and simple way to get Kirby up and running with Dokku, a lightweight PaaS</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/programmable-blueprints" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> PHP-based blueprints </h2> </div> </figure> <p class="color-gray-700 text-sm">Create blueprints programmatically with PHP</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/blobs.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/panel/advanced-panel-area" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Panel </p> <h2 class="h3 border-top pt-3"> Advanced Panel area </h2> </div> </figure> <p class="color-gray-700 text-sm">Panel area with editable list, complete with dialogs, dropdowns and search</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/batch-update" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Batch updating content </h2> </div> </figure> <p class="color-gray-700 text-sm">Flexible and reliable updates to large amounts of content</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/dragon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/frontend/kirby-meets-purgecss" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Frontend </p> <h2 class="h3 border-top pt-3"> Kirby meets PurgeCSS </h2> </div> </figure> <p class="color-gray-700 text-sm">A walkthrough on how to install and use PurgeCSS with Kirby</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/dragon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/frontend/kirby-meets-tailwindcss" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Frontend </p> <h2 class="h3 border-top pt-3"> Kirby meets Tailwind CSS </h2> </div> </figure> <p class="color-gray-700 text-sm">A walkthrough on how to install and use Tailwind CSS with Kirby</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/nested-blocks" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Nested blocks </h2> </div> </figure> <p class="color-gray-700 text-sm">Building a nested block with live panel preview</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/turmoil.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/security/files-firewall" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Security </p> <h2 class="h3 border-top pt-3"> Protecting files </h2> </div> </figure> <p class="color-gray-700 text-sm">Restrict access to a files download section to authorized users</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/nginx" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Kirby meets Nginx </h2> </div> </figure> <p class="color-gray-700 text-sm">How to configure the Nginx web server to run a Kirby website.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/kirby-meets-docker" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Kirby meets Docker </h2> </div> </figure> <p class="color-gray-700 text-sm">Get started with Docker as development environment</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/viscera.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/plugins/to-bundle-or-not-to-bundle" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Plugins </p> <h2 class="h3 border-top pt-3"> Plugins with/without a build process </h2> </div> </figure> <p class="color-gray-700 text-sm">Build Panel extensions without a build process.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beach.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-representations/ajax-load-more" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content representations </p> <h2 class="h3 border-top pt-3"> Load more with Ajax </h2> </div> </figure> <p class="color-gray-700 text-sm">Add a load more button to your listings and append items via Ajax.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sky.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/php/understanding-oop" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> PHP </p> <h2 class="h3 border-top pt-3"> OOP in PHP </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn the basics of object oriented programming in PHP</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/performance/kirby-loves-cdn" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Performance </p> <h2 class="h3 border-top pt-3"> Kirby loves CDN </h2> </div> </figure> <p class="color-gray-700 text-sm">Deliver assets and files through a CDN.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sky.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/php/php-debugging-with-xdebug" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> PHP </p> <h2 class="h3 border-top pt-3"> Debugging with Xdebug </h2> </div> </figure> <p class="color-gray-700 text-sm">Xdebug helps you track down errors in your PHP scripts.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/using-mailhog-for-email-testing" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Email testing </h2> </div> </figure> <p class="color-gray-700 text-sm">MailHog and similar tools make email testing a breeze</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/i18n/find-translations" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> i18n </p> <h2 class="h3 border-top pt-3"> Finding translations </h2> </div> </figure> <p class="color-gray-700 text-sm">Search your code for all translations used with the t() helper function</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/turmoil.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/security/permission-tricks" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Security </p> <h2 class="h3 border-top pt-3"> Extending permissions </h2> </div> </figure> <p class="color-gray-700 text-sm">Fine-tune and go beyond Kirby's built-in permission system in the Panel</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/viscera.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/plugins/monolithic-plugin-setup" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Plugins </p> <h2 class="h3 border-top pt-3"> Monolithic plugin setup </h2> </div> </figure> <p class="color-gray-700 text-sm">Plugin workflow to develop and test a plugin from the same Git repository</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/shared-controllers" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Shared Controllers </h2> </div> </figure> <p class="color-gray-700 text-sm">Share the content of a controller across multiple templates</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/blobs.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/panel/first-panel-field" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Panel </p> <h2 class="h3 border-top pt-3"> Custom Panel field </h2> </div> </figure> <p class="color-gray-700 text-sm">Create a custom Panel field from scratch</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/multisite-variant" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Alternative multisite setup </h2> </div> </figure> <p class="color-gray-700 text-sm">Using symlinks to run multiple sites from the same Kirby installation.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/use-placeholders" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Placeholders </h2> </div> </figure> <p class="color-gray-700 text-sm">Use placeholders for recurring text snippets and more</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/blobs.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/panel/first-panel-section" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Panel </p> <h2 class="h3 border-top pt-3"> Custom Panel section </h2> </div> </figure> <p class="color-gray-700 text-sm">Building very basic custom Panel section for a link list</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/menu-builder" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Menu builder </h2> </div> </figure> <p class="color-gray-700 text-sm">Create custom menus from the Panel using different field types</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/viscera.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/plugins/plugin-workflow" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Plugins </p> <h2 class="h3 border-top pt-3"> Plugin testing with PHPUnit </h2> </div> </figure> <p class="color-gray-700 text-sm">Set up multiple plugins with PHPUnit testing under a single Kirby installation.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/deepsea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/forms/email-with-attachments" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Forms </p> <h2 class="h3 border-top pt-3"> Forms with attachments </h2> </div> </figure> <p class="color-gray-700 text-sm">Sending email with attachments from form input.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/subpage-builder" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Subpage builder </h2> </div> </figure> <p class="color-gray-700 text-sm">Auto-generate subpages when you create a new page</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/deepsea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/forms/creating-pages-from-frontend" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Forms </p> <h2 class="h3 border-top pt-3"> Create pages from frontend </h2> </div> </figure> <p class="color-gray-700 text-sm">Create pages from an event registration form</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/i18n/fetching-field-options" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> i18n </p> <h2 class="h3 border-top pt-3"> Fetching field options </h2> </div> </figure> <p class="color-gray-700 text-sm">Get text labels for your option values from fields</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/paginating-posts" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Paginating posts </h2> </div> </figure> <p class="color-gray-700 text-sm">Split long post into separate pages with pagination</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/filter-via-route" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Filtering via routes </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn how to filter using routes instead of parameters</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/deepsea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/forms/basic-contact-form" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Forms </p> <h2 class="h3 border-top pt-3"> Contact form </h2> </div> </figure> <p class="color-gray-700 text-sm">Create a basic contact form that sends HTML or plain text emails.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/unclassified/getkirby-com" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Mixed </p> <h2 class="h3 border-top pt-3"> How we built getkirby.com </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn more about the hidden gems and secrets in our own website.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/sitemap" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Sitemap </h2> </div> </figure> <p class="color-gray-700 text-sm">Automatically create a sitemap for search engines.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/sorting" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Sorting collections </h2> </div> </figure> <p class="color-gray-700 text-sm">Use Kirby's API to sort your content by all sorts of criteria.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/i18n/import-export" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> i18n </p> <h2 class="h3 border-top pt-3"> Import/export translations </h2> </div> </figure> <p class="color-gray-700 text-sm">Write scripts to import and export translations for external translators.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lava.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/integrations/indieauth" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Integrations </p> <h2 class="h3 border-top pt-3"> IndieAuth for your site </h2> </div> </figure> <p class="color-gray-700 text-sm">Log in to other sites with your domain via RelMeAuth/IndieAuth.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sky.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/php/debugging-basics" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> PHP </p> <h2 class="h3 border-top pt-3"> Basic error hunting & prevention </h2> </div> </figure> <p class="color-gray-700 text-sm">Debug configuration and understanding error messages</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/darkness.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/extensions/columns-in-kirbytext" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Extensions </p> <h2 class="h3 border-top pt-3"> Kirbytext columns </h2> </div> </figure> <p class="color-gray-700 text-sm">Add columns to your textarea fields with this KirbyTag plugin.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/random-content" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Random content </h2> </div> </figure> <p class="color-gray-700 text-sm">Simulate activity on your site by showing random content.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/purple.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/development-deployment/content-file-cleanup" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Development & deployment </p> <h2 class="h3 border-top pt-3"> Content clean-up </h2> </div> </figure> <p class="color-gray-700 text-sm">Remove unused fields from content files</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/table-of-contents" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Anchors and ToCs </h2> </div> </figure> <p class="color-gray-700 text-sm">Auto-replace headlines with anchors and generate in-page navigation</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/filtering" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Filtering collections </h2> </div> </figure> <p class="color-gray-700 text-sm">Filter pages, files and users with Kirby's extensive filtering methods.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/filtering-with-tags" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Filtering with tags </h2> </div> </figure> <p class="color-gray-700 text-sm">Classify content and make it easy for visitors to find related content.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/grouping-collections" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Grouping collections </h2> </div> </figure> <p class="color-gray-700 text-sm">Group pages, files, or users by various criteria.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/related-articles" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Related articles </h2> </div> </figure> <p class="color-gray-700 text-sm">Build relations between articles using YAML content and the pages field.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/abyss.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/collections/search" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Collections </p> <h2 class="h3 border-top pt-3"> Search </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn how to build a simple search for your site or sections of your site.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beach.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-representations/generating-json" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content representations </p> <h2 class="h3 border-top pt-3"> Generating JSON </h2> </div> </figure> <p class="color-gray-700 text-sm">Create a JSON representation of your blog content in Kirby.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/authors" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Adding authors </h2> </div> </figure> <p class="color-gray-700 text-sm">Tie pages to a person. Create an author system for your blog posts.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/create-a-blog" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Creating a blog </h2> </div> </figure> <p class="color-gray-700 text-sm">Set up a blog system with an overview, articles, tags, feeds and more.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/custom-post-types" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> Custom post types </h2> </div> </figure> <p class="color-gray-700 text-sm">Create different templates for different kinds of content.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/beetroot.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/content-structure/one-pager" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Content & structure </p> <h2 class="h3 border-top pt-3"> One-pager </h2> </div> </figure> <p class="color-gray-700 text-sm">Create a one-pager for small companies or simple portfolios.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/deepsea.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/forms/file-uploads" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Forms </p> <h2 class="h3 border-top pt-3"> Uploading files </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn how to upload files through a frontend form.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lava.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/integrations/dropbox" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Integrations </p> <h2 class="h3 border-top pt-3"> Dropbox sync </h2> </div> </figure> <p class="color-gray-700 text-sm">Set up Dropbox sync for your site (VPS or dedicated server required).</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/menus" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Menus </h2> </div> </figure> <p class="color-gray-700 text-sm">Create any kind of menu you need for your project.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/pagination" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Pagination </h2> </div> </figure> <p class="color-gray-700 text-sm">Use pagination to divide content into a list of digestible chunks.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/pinkblue.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/navigation/previous-next" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Navigation </p> <h2 class="h3 border-top pt-3"> Previous / Next navigation </h2> </div> </figure> <p class="color-gray-700 text-sm">Create a previous/next navigation for your site.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sky.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/php/loops" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> PHP </p> <h2 class="h3 border-top pt-3"> Fun with loops and collections </h2> </div> </figure> <p class="color-gray-700 text-sm">Foreach loops are control structures useful in many contexts.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/sky.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/php/php-templates" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> PHP </p> <h2 class="h3 border-top pt-3"> PHP templating </h2> </div> </figure> <p class="color-gray-700 text-sm">Learn some PHP basics that make creating templates a breeze.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/turmoil.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/security/access-restriction" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Security </p> <h2 class="h3 border-top pt-3"> Access forbidden </h2> </div> </figure> <p class="color-gray-700 text-sm">Use Kirby’s authentication system to build login-protected pages.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/unclassified/ab-testing" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Mixed </p> <h2 class="h3 border-top pt-3"> A/B testing with Kirby </h2> </div> </figure> <p class="color-gray-700 text-sm">Split visitors into groups to compare how different versions perform.</p> </a> </article> </li> <li> <article class="rounded shadow overflow-hidden" style="background-image: url('/assets/patterns/cookbook/lagoon.jpg'); background-position: top left; background-repeat: no-repeat; height: 100%"> <a class="block bg-white p-3" href="https://getkirby.com/docs/cookbook/unclassified/blueprints-in-frontend" style="height: 100%; margin-left: var(--spacing-5)"> <figure class="mb-3"> <div class="mb-3"> <p class="text-xs font-mono mb-1 flex align-center justify-between"> Mixed </p> <h2 class="h3 border-top pt-3"> Accessing blueprints </h2> </div> </figure> <p class="color-gray-700 text-sm">Use data from blueprints to control your template logic</p> </a> </article> </li> </ul> </div> <footer> <hr class="hr mb-6"> <p class="prose text-sm mb-6 max-w-xs"> Did you find an error? Help us improve our docs and edit this page on GitHub. Make sure to check out <a href="/styleguide">our styleguide →</a> </p> <a href="https://github.com/getkirby/getkirby.com/edit/main/content/docs/3_cookbook/cookbook.txt" class="btn btn--outlined mb-3"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="github" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"/></svg> Edit this page <span class="sr-only">on GitHub</span> </a> </footer> </article> </div> </div> </main> <footer class="footer text-sm"> <div class="container mb-24"> <hr class="hr mb-6"> <div class="flex"> <div class="footer-info mb-6"> <p class="font-bold mb-1">Kirby</p> <p class="mb-3">The CMS that adapts to any project. Made for developers, designers, creators and clients.</p> <nav aria-label="Kirby on the web" class="social mb-3"> <a rel="me" href="https://github.com/getkirby"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="github" viewBox="0 0 24 24" role="img" aria-labelledby="5870eab6-fbef-4a28-abf8-215020087771"><title id="5870eab6-fbef-4a28-abf8-215020087771">GitHub</title><path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"/></svg> </a> <a rel="me" href="https://mastodon.social/@getkirby"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="mastodon" viewBox="0 0 24 24" role="img" aria-labelledby="32dd133e-01d5-4896-b34f-7e98cf02e667"><title id="32dd133e-01d5-4896-b34f-7e98cf02e667">Mastodon</title><path d="M 20.380566 6.98424 C 20.119244 5.050461 18.421263 3.526289 16.408482 3.230936 C 16.068155 3.181103 14.78221 3 11.801931 3 L 11.778838 3 C 8.797343 3 8.158018 3.179888 7.818907 3.230936 C 5.862036 3.517782 4.075327 4.887592 3.641412 6.844463 C 3.432355 7.808313 3.410477 8.876694 3.449371 9.856344 C 3.504066 11.262618 3.515005 12.665245 3.643843 14.065441 C 3.73257 14.995259 3.886932 15.917785 4.108144 16.824509 C 4.520181 18.501827 6.187776 19.899593 7.822554 20.468424 C 9.5728 21.061562 11.454313 21.161228 13.258039 20.752838 C 13.456157 20.706652 13.653059 20.654387 13.846316 20.593615 C 14.283877 20.455053 14.798012 20.300692 15.1748 20.028431 C 15.1855 20.020786 15.192194 20.008738 15.193032 19.995613 L 15.193032 18.639174 C 15.19266 18.627041 15.186813 18.61573 15.177132 18.60841 C 15.16745 18.601089 15.154973 18.598545 15.143199 18.601494 C 13.987307 18.874971 12.80346 19.012318 11.615968 19.009886 C 9.571584 19.009886 9.022202 18.047249 8.864193 17.646152 C 8.738102 17.299969 8.658008 16.938732 8.625965 16.571695 C 8.625173 16.559242 8.630404 16.547165 8.640029 16.539223 C 8.649655 16.531281 8.662507 16.528442 8.674582 16.531586 C 9.811028 16.803846 10.975427 16.941193 12.144688 16.939978 C 12.425456 16.939978 12.705009 16.939978 12.986993 16.932684 C 14.162332 16.899868 15.400873 16.840309 16.557981 16.616667 L 16.639416 16.598436 C 18.463804 16.250818 20.20068 15.159346 20.376919 12.395416 C 20.382996 12.286025 20.398798 11.255324 20.398798 11.143504 C 20.400013 10.759422 20.523989 8.4209 20.380566 6.98424 Z M 17.57288 13.880693 L 15.654902 13.880693 L 15.654902 9.217018 C 15.654902 8.234937 15.242866 7.734171 14.405422 7.734171 C 13.484112 7.734171 13.022242 8.327311 13.022242 9.496572 L 13.022242 12.049013 L 11.115204 12.049013 L 11.115204 9.496572 C 11.115204 8.327311 10.653333 7.734171 9.732023 7.734171 C 8.898226 7.734171 8.481327 8.234937 8.480111 9.217018 L 8.480111 13.880693 L 6.56578 13.880693 L 6.56578 9.076027 C 6.56578 8.093944 6.818594 7.313625 7.323004 6.735073 C 7.844432 6.158951 8.527514 5.862381 9.375896 5.862381 C 10.357979 5.862381 11.099402 6.236738 11.59409 6.985455 L 12.071761 7.781574 L 12.549432 6.985455 C 13.044119 6.236738 13.785543 5.862381 14.765194 5.862381 C 15.613577 5.862381 16.296659 6.158951 16.819302 6.735073 C 17.323713 7.31241 17.576527 8.092729 17.576527 9.076027 L 17.574095 13.880693 Z"/></svg> </a> <a rel="me" href="https://bsky.app/profile/getkirby.com"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="c9954c86-c7e8-4d8f-a827-ddeeb5a56218"><title id="c9954c86-c7e8-4d8f-a827-ddeeb5a56218">Bluesky</title><path d="M12 11.3884C11.0942 9.62673 8.62833 6.34423 6.335 4.7259C4.13833 3.17506 3.30083 3.4434 2.75167 3.69256C2.11583 3.9784 2 4.95506 2 5.52839C2 6.10339 2.315 10.2367 2.52 10.9276C3.19917 13.2076 5.61417 13.9776 7.83917 13.7309C4.57917 14.2142 1.68333 15.4017 5.48083 19.6292C9.65833 23.9542 11.2058 18.7017 12 16.0392C12.7942 18.7017 13.7083 23.7651 18.4442 19.6292C22 16.0392 19.4208 14.2142 16.1608 13.7309C18.3858 13.9784 20.8008 13.2076 21.48 10.9276C21.685 10.2376 22 6.10256 22 5.52923C22 4.95423 21.8842 3.97839 21.2483 3.6909C20.6992 3.44256 19.8617 3.17423 17.665 4.72423C15.3717 6.34506 12.9058 9.62756 12 11.3884Z"/></svg> </a> <a rel="me" href="https://linkedin.com/company/getkirby"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" data-type="linkedin" viewBox="0 0 24 24" role="img" aria-labelledby="ae42d8c0-124a-4ee6-9e86-cdc864fff8ea"><title id="ae42d8c0-124a-4ee6-9e86-cdc864fff8ea">LinkedIn</title><path d="M6.94048 4.99993C6.94011 5.81424 6.44608 6.54702 5.69134 6.85273C4.9366 7.15845 4.07187 6.97605 3.5049 6.39155C2.93793 5.80704 2.78195 4.93715 3.1105 4.19207C3.43906 3.44699 4.18654 2.9755 5.00048 2.99993C6.08155 3.03238 6.94097 3.91837 6.94048 4.99993ZM7.00048 8.47993H3.00048V20.9999H7.00048V8.47993ZM13.3205 8.47993H9.34048V20.9999H13.2805V14.4299C13.2805 10.7699 18.0505 10.4299 18.0505 14.4299V20.9999H22.0005V13.0699C22.0005 6.89993 14.9405 7.12993 13.2805 10.1599L13.3205 8.47993Z"/></svg> </a> <a rel="me" href="https://videos.getkirby.com"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="5d18c248-ecb6-41eb-a088-fe0e70c20574"><title id="5d18c248-ecb6-41eb-a088-fe0e70c20574">YouTube</title><path d="M12.2439 4C12.778 4.00294 14.1143 4.01586 15.5341 4.07273L16.0375 4.09468C17.467 4.16236 18.8953 4.27798 19.6037 4.4755C20.5486 4.74095 21.2913 5.5155 21.5423 6.49732C21.942 8.05641 21.992 11.0994 21.9982 11.8358L21.9991 11.9884L21.9991 11.9991C21.9991 11.9991 21.9991 12.0028 21.9991 12.0099L21.9982 12.1625C21.992 12.8989 21.942 15.9419 21.5423 17.501C21.2878 18.4864 20.5451 19.261 19.6037 19.5228C18.8953 19.7203 17.467 19.8359 16.0375 19.9036L15.5341 19.9255C14.1143 19.9824 12.778 19.9953 12.2439 19.9983L12.0095 19.9991L11.9991 19.9991C11.9991 19.9991 11.9956 19.9991 11.9887 19.9991L11.7545 19.9983C10.6241 19.9921 5.89772 19.941 4.39451 19.5228C3.4496 19.2573 2.70692 18.4828 2.45587 17.501C2.0562 15.9419 2.00624 12.8989 2 12.1625V11.8358C2.00624 11.0994 2.0562 8.05641 2.45587 6.49732C2.7104 5.51186 3.45308 4.73732 4.39451 4.4755C5.89772 4.05723 10.6241 4.00622 11.7545 4H12.2439ZM9.99911 8.49914V15.4991L15.9991 11.9991L9.99911 8.49914Z"/></svg> </a> <a rel="me" href="https://chat.getkirby.com"> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-labelledby="30bfe77a-382d-423d-a443-30d50d32b37d"><title id="30bfe77a-382d-423d-a443-30d50d32b37d">Discord</title><path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z"/></svg> </a> </nav> <p class="mb-3 color-gray-700 flex items-center"> 🇪🇺 Made in Europe </p> </div> <nav aria-label="Footer menu" class="footer-menu"> <ul class="footer-menu-1 columns" style="--columns-sm: 2; --columns-md: 3; --columns: 3; --column-gap: var(--spacing-8); --row-gap: var(--spacing-6)"> <li> <p class="font-bold mb-1">The CMS</p> <ul class="footer-menu-2"> <li><a href="https://getkirby.com/for/developers">For developers</a></li> <li><a href="https://getkirby.com/for/designers">For designers</a></li> <li><a href="https://getkirby.com/for/creators">For content creators</a></li> <li><a href="https://getkirby.com/for/clients">For clients & agencies</a></li> <li><a href="https://getkirby.com/for/artists">For artists</a></li> <li><a href="https://getkirby.com/for/events">For events</a></li> <li><a href="https://getkirby.com/for/education">For education</a></li> <li><a href="https://getkirby.com/for/hospitality">For hospitality</a></li> <li><a href="https://getkirby.com/love">Showcase</a></li> <li><a href="https://getkirby.com/releases">Releases</a></li> <li><a class="is-external" href="https://feedback.getkirby.com">Feedback</a></li> </ul> </li> <li> <p class="font-bold mb-1">Docs</p> <ul class="footer-menu-2"> <li><a href="https://getkirby.com/docs/guide/quickstart">Guide</a></li> <li><a href="https://getkirby.com/docs/reference">Reference</a></li> <li><a href="https://getkirby.com/docs/cookbook">Cookbook</a></li> <li><a href="https://getkirby.com/docs/quicktips">Quicktips</a></li> <li><a class="is-external" href="https://www.youtube.com/kirbycasts">Screencasts</a></li> <li><a href="https://getkirby.com/docs/glossary">Glossary</a></li> <li><a href="https://getkirby.com/docs/archive">Archive</a></li> </ul> </li> <li> <p class="font-bold mb-1">Resources</p> <ul class="footer-menu-2"> <li><a class="is-external" href="https://plugins.getkirby.com">Plugins</a></li> <li><a href="https://getkirby.com/themes">Themes</a></li> <li><a href="https://getkirby.com/kosmos">Newsletter</a></li> <li><a href="https://getkirby.com/buzz">Buzz</a></li> <li><a class="is-external" href="https://pixels.getkirby.com">Pixels</a></li> <li><a class="is-external" href="https://hub.getkirby.com">License Hub</a></li> </ul> </li> <li> <p class="font-bold mb-1">Community</p> <ul class="footer-menu-2"> <li><a href="https://getkirby.com/meet">Get together</a></li> <li><a class="is-external" href="https://forum.getkirby.com">Support forum</a></li> <li><a class="is-external" href="https://chat.getkirby.com">Discord chat</a></li> <li><a class="is-external" href="https://community.getkirby.com">Community map</a></li> <li><a class="is-external" href="https://mastodon.social/@getkirby">Mastodon</a></li> <li><a class="is-external" href="https://www.linkedin.com/company/getkirby">LinkedIn</a></li> </ul> </li> <li> <p class="font-bold mb-1">Kirby</p> <ul class="footer-menu-2"> <li><a href="https://getkirby.com/security">Security</a></li> <li><a href="https://getkirby.com/privacy">Privacy</a></li> <li><a href="https://getkirby.com/license/2025-03-18">License</a></li> <li><a href="https://getkirby.com/press">Presskit</a></li> <li><a href="https://getkirby.com/team">Team</a></li> <li><a href="https://getkirby.com/contact">Contact</a></li> </ul> </li> <li> <p class="font-bold mb-3">With support of</p> <ul class="footer-menu-2 footer-menu-partners"> <li class="mb-3"> <a href="https://keycdn.com"> <?xml version="1.0"?> <svg role="img" aria-labelledby="keycdn-icon" viewBox="0 0 151 44"> <title id="keycdn-icon">KeyCDN</title> <path d="m4.54 35.12c.42.02.85.08 1.25.22l.06.02 5.29-5.15.2.26c.27.37.56.7.86 1.05l.12.13.22.24.13.13.13.13.11.1.13.14.12.11.14.13.13.11a14.16 14.16 0 0 0 16.3 1.39l.4.42 1.43 1.5a16.62 16.62 0 0 1 -9.44 2.64 16.6 16.6 0 0 1 -10.27-3.88l.01-.03-3.39 3.34a4.2 4.2 0 0 1 -4.04 5.45 4.23 4.23 0 0 1 0-8.45h.1zm32.3-21.8a16.62 16.62 0 0 1 -1.75 19.65l.02.02 2.08 2.2a2.63 2.63 0 0 1 2.17 4.5 2.6 2.6 0 1 1 -4.36-2.4c-.97-1.02-2.68-2.85-3.67-3.88l-.21-.23.24-.2a13.98 13.98 0 0 0 5.28-10.65 14 14 0 0 0 -1.74-7.16l1.94-1.84zm-29.44-9.86a2.6 2.6 0 0 1 2.62 3.1l4 4.2-.23.2a14.09 14.09 0 0 0 -3.55 17.83l-1.94 1.88a16.76 16.76 0 0 1 1.72-19.7l-2.2-2.3a2.63 2.63 0 0 1 -2.17-4.5c.41-.38.94-.62 1.5-.69l.24-.02zm33.71-3.36a4.23 4.23 0 1 1 -1.31 8.24l-.07-.02-5.73 5.44-.2-.26c-.3-.4-.64-.8-1-1.18l-.06-.08-.18-.17-.03-.04-.12-.1-.03-.04-.15-.15-.1-.1-.12-.1-.15-.12-.11-.1-.15-.13a14.03 14.03 0 0 0 -16.2-1.34l-1.85-1.92a16.62 16.62 0 0 1 19.7 1.27h.03l3.8-3.6a4.22 4.22 0 0 1 4.03-5.5z"/><path d="m22.7 9.53a12.46 12.46 0 0 1 12.23 13.99 12.46 12.46 0 0 1 -13.89 10.8 12.46 12.46 0 0 1 -10.8-13.89 12.48 12.48 0 0 1 12.46-10.9zm-.19 5.34a5.11 5.11 0 0 0 -4.83 5.08 5.12 5.12 0 0 0 2.83 4.56l-.96 4.51h6.45l-.96-4.51a5.1 5.1 0 0 0 2.83-4.56 5.1 5.1 0 0 0 -5.09-5.09h-.26zm.1-.03h-.02z"/><path d="m55.83 15.93c-.31 0-.53.06-.9.56l-5.21 6.78 2.26-12.7c.09-.47-.16-.63-.54-.63h-4.7c-.57 0-.72.28-.79.63l-4.04 22.92c-.1.5.22.7.56.7h4.7c.35 0 .7-.35.76-.7l1.25-7.15 2.73 7.15c.2.5.44.7.79.7h5.64c.41 0 .57-.38.41-.7l-4.01-8.78 7.15-8.12c.25-.25.22-.66-.22-.66zm21.84 6.46c0-3.73-2.14-6.74-6.68-6.74-5.24 0-8.82 2.32-9.85 8.53l-.35 2.07c-.1.56-.12 1.1-.12 1.6 0 4.45 3.45 6.62 6.93 6.62 2.63 0 4.77-.32 6.87-.98.53-.15.69-.37.78-.87l.5-2.83v-.12c0-.28-.19-.41-.47-.41h-.12c-1.2.13-4.36.25-6.02.25-1.57 0-2.58-.22-2.58-1.79 0-.28.03-.6.1-.97h9.75a.8.8 0 0 0 .79-.69l.3-1.88c.1-.6.17-1.2.17-1.79zm-5.65-.22c0 .38-.06.82-.16 1.26h-4.64c.38-1.8 1.13-3.1 2.89-3.1 1.4 0 1.91.74 1.91 1.84zm26.76-5.77c0-.25-.28-.47-.57-.47h-5.17c-.35 0-.66.25-.79.6l-4.48 11.35h-.25c-.19 0-.22-.16-.25-.53l-.57-10.8c-.03-.34-.15-.62-.5-.62h-5.05c-.53 0-.78.25-.78.6v.09l1.82 14.93c.18 1.6 1 2.16 2.47 2.16h.41l-.44 1.04c-.37.9-1.03 1.19-1.91 1.19-1.2 0-3.07-.19-4.23-.25h-.04a.87.87 0 0 0 -.81.66l-.53 3.04v.1c0 .28.28.37.6.5.8.31 2.88.56 4.13.56 4.93 0 6.71-1.94 8.25-5.3l8.63-18.63a.58.58 0 0 0 .06-.22zm13.93.25c0-.31-.18-.4-.53-.5-.85-.22-2.35-.5-4.2-.5-4.83 0-7.94 2.41-8.94 8.25l-.4 2.35c-.1.63-.16 1.22-.16 1.79 0 3.67 2.13 6.43 6.17 6.43 1.85 0 3.3-.25 4.4-.5.43-.1.68-.26.75-.66l.62-3.52v-.12c0-.28-.21-.47-.5-.47h-.06c-1.1.06-2.1.19-3.64.19-1.06 0-1.7-.38-1.7-1.8 0-.37.04-.8.13-1.34l.41-2.35c.44-2.6 1.35-3.17 2.7-3.17 1.54 0 2.48.16 3.54.22h.07c.34 0 .65-.25.72-.6l.62-3.54zm19.58-6.18c0-.31-.28-.53-.6-.53h-4.67a.77.77 0 0 0 -.72.63l-.94 5.3c-.63-.1-1.7-.22-2.2-.22-5.7 0-8.56 2.38-9.6 8.18l-.43 2.45c-.1.56-.16 1.1-.16 1.6 0 3.86 2.67 6.59 6.96 6.59a37 37 0 0 0 7.18-.79c1-.22 1.16-.4 1.26-1l3.92-22.11zm-7.81 10.29-1.5 8.6c-.6.09-1.26.15-2.17.15-1.35 0-1.82-.78-1.82-2 0-.38.03-.8.13-1.23l.44-2.45c.3-1.82 1.06-3.2 2.82-3.2.75 0 1.47.07 2.1.13zm25.28.22c0-3.51-1.44-5.33-4.92-5.33-1.16 0-2.89.28-5.08 1.72l.15-.81c.1-.47-.12-.63-.53-.63h-4.3a.77.77 0 0 0 -.72.63l-3 16.93c-.07.44.27.7.71.7h4.49c.47 0 .78-.32.85-.7l2.13-12.13a6.39 6.39 0 0 1 2.66-.7c1.07 0 1.48.26 1.48 1.23 0 .53-.13 1.07-.22 1.6l-1.76 10c-.06.32 0 .7.54.7h4.7c.38 0 .72-.35.78-.7l1.73-9.78c.16-.88.31-1.91.31-2.73zm-25.21 19.72c0-.08-.06-.14-.16-.14h-.84c-.1 0-.2.07-.23.18l-.18 1.07v.04c0 .08.06.15.15.15h.85c.1 0 .2-.09.23-.19l.18-1.07zm5.35-4.11c-1.23 0-2.24.51-2.57 2.3l-.16.88c-.03.17-.05.33-.05.49 0 1.08.73 1.82 1.81 1.82.58 0 1.02-.07 1.24-.13.2-.04.21-.1.24-.24l.11-.62c.02-.12-.02-.16-.17-.14-.34.04-.62.06-1.24.06-.39 0-.74-.12-.74-.76 0-.14.01-.3.05-.48l.16-.88c.18-.98.68-1.24 1.13-1.24.62 0 .9.03 1.21.07.15.02.2-.04.22-.15l.11-.61c.03-.16 0-.21-.16-.25-.2-.06-.61-.12-1.2-.12zm7.64 1.87c0-1-.6-1.87-1.9-1.87-1.49 0-2.4.8-2.68 2.36l-.14.77c-.03.15-.04.3-.04.45 0 1 .6 1.9 1.9 1.9 1.48 0 2.37-.8 2.67-2.35l.14-.77c.03-.16.05-.33.05-.5zm-1.26.07c0 .12-.01.27-.04.42l-.14.77c-.16.88-.57 1.28-1.24 1.28-.56 0-.83-.3-.83-.87 0-.12.01-.26.04-.41l.14-.77c.17-.94.66-1.28 1.24-1.28.56 0 .83.3.83.86zm10.57-.56c0-.85-.4-1.38-1.3-1.38-.66 0-1.2.15-1.67.46-.17-.24-.48-.46-1.02-.46-.56 0-.96.2-1.4.45l.04-.2c.02-.1-.04-.19-.16-.19h-.83c-.1 0-.2.09-.22.2l-.87 4.95c-.02.12.04.2.15.2h.88c.17 0 .2-.1.22-.2l.68-3.83c.42-.2.73-.31.92-.31.4 0 .54.1.54.45 0 .13 0 .28-.04.47l-.57 3.22c-.03.14.04.2.15.2h.87c.17 0 .21-.1.23-.2l.57-3.22c.04-.24.05-.49.05-.68.37-.18.77-.24.95-.24.41 0 .57.11.57.48a3 3 0 0 1 -.05.44l-.56 3.22c-.02.12.03.2.15.2h.87c.18 0 .2-.1.23-.2l.56-3.22c.04-.22.06-.42.06-.6z"/> </svg> </a> </li> <li> <a href="https://algolia.com"> <?xml version="1.0"?> <svg role="img" aria-labelledby="algolia-icon" viewBox="0 0 2196.2 500"> <title id="algolia-icon">Algolia</title> <rect width="62.58" height="277.9" x="1845.88" y="104.73" rx="5.9" ry="5.9"/> <path d="M1070.38 275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.91 5.91 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Zm781.4-203.92h50.77c3.26 0 5.9-2.64 5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77 7.95a5.9 5.9 0 0 0-4.99 5.83v51.62c0 3.26 2.64 5.9 5.9 5.9Zm-87.75 203.92V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46 7.94a5.91 5.91 0 0 0-4.99 5.84l.17 273.22c0 12.92 0 92.7 95.97 95.49 3.33.1 6.09-2.58 6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Zm-132.08-132.58c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78 0-36.15 3.17-51.92 9.85-15.59 6.66-29.29 16.05-40.76 28.31-11.47 12.23-20.38 26.87-26.76 44.03-6.38 17.17-9.24 37.37-9.24 58.36s3.19 36.87 9.55 54.21c6.38 17.32 15.14 32.11 26.45 44.36 11.29 12.23 24.83 21.62 40.6 28.46 15.77 6.83 40.12 10.33 52.4 10.48 12.25 0 36.78-3.82 52.7-10.48 15.92-6.68 29.46-16.23 40.78-28.46 11.29-12.25 20.05-27.04 26.25-44.36 6.22-17.34 9.24-33.22 9.24-54.21s-3.34-41.19-10.03-58.36c-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43 163.75c-11.47 15.75-27.56 23.7-48.09 23.7-20.55 0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2 0-26.89 5.59-49.14 17.06-64.87 11.45-15.75 27.54-23.52 48.07-23.52 20.55 0 36.63 7.78 48.09 23.52 11.47 15.57 17.36 37.98 17.36 64.87 0 27.19-5.72 45.3-17.19 61.2Zm-693.1-201.74h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33zm1239.55-206.92h-49.33c-48.36 0-90.91 25.48-115.75 64.1-14.52 22.58-22.99 49.63-22.99 78.73 0 44.89 20.13 84.92 51.59 111.1 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 1.23 0 2.46-.03 3.68-.09.36-.02.71-.05 1.07-.07.87-.05 1.75-.11 2.62-.2.34-.03.68-.08 1.02-.12.91-.1 1.82-.21 2.73-.34.21-.03.42-.07.63-.1 32.89-5.07 61.56-30.82 70.9-62.81v57.83c0 3.26 2.64 5.9 5.9 5.9h50.42c3.26 0 5.9-2.64 5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9zm0 206.92c-12.2 10.16-27.97 13.98-44.84 15.12-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-42.24 0-77.12-35.89-77.12-79.37 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33zm-819.92-206.92h-49.33c-48.36 0-90.91 25.48-115.75 64.1-11.79 18.34-19.6 39.64-22.11 62.59a148.5 148.5 0 0 0 .05 32.73c4.28 38.09 23.14 71.61 50.66 94.52 2.93 2.6 6.05 4.98 9.31 7.14 12.86 8.49 28.11 13.47 44.52 13.47 17.99 0 34.61-5.93 48.16-15.97 16.29-11.58 28.88-28.54 34.48-47.75v50.26h-.11v11.08c0 21.84-5.71 38.27-17.34 49.36-11.61 11.08-31.04 16.63-58.25 16.63-11.12 0-28.79-.59-46.6-2.41-2.83-.29-5.46 1.5-6.27 4.22l-12.78 43.11c-1.02 3.46 1.27 7.02 4.83 7.53 21.52 3.08 42.52 4.68 54.65 4.68 48.91 0 85.16-10.75 108.89-32.21 21.48-19.41 33.15-48.89 35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0 64.1s.65 139.13 0 143.36c-12.08 9.77-27.11 13.59-43.49 14.7-.16.01-.33.03-.49.04-1.12.07-2.24.1-3.36.1-1.32 0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38 0-10.25 1.96-20.01 5.42-28.98 11.22-29.12 38.77-49.74 71.06-49.74h49.33ZM249.83 0C113.3 0 2 110.09.03 246.16c-2 138.19 110.12 252.7 248.33 253.5 42.68.25 83.79-10.19 120.3-30.03 3.56-1.93 4.11-6.83 1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48 10.84-53.17 16.38-81.71 16.03-111.68-1.37-201.91-94.29-200.13-205.96 1.76-110.26 92-199.41 202.67-199.41h202.69v360.27l-115-102.18c-3.72-3.31-9.42-2.66-12.42 1.31-18.46 24.44-48.53 39.64-81.93 37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24 39.63-101.52 94-101.52 49.18 0 89.68 37.85 93.91 85.95.38 4.28 2.31 8.27 5.52 11.12l29.95 26.55c3.4 3.01 8.79 1.17 9.63-3.3 2.16-11.55 2.92-23.58 2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13 58.14-150.27 137.25-2.09 77.1 61.08 143.56 138.19 145.26 32.19.71 62.03-9.41 86.14-26.95l150.26 133.2c6.44 5.71 16.61 1.14 16.61-7.47V9.48c-.01-5.23-4.25-9.48-9.49-9.48z"/> </svg> </a> </li> </ul> </li> </ul> </nav> </div> </div> </footer> </body> </html>