https://v1.hugolify.io/docs/getting-started/themes/Recent content in Themes on HugolifyHugoenhttps://v1.hugolify.io/docs/getting-started/themes/theme-1/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/getting-started/themes/theme-1/<h2 id="demo">Demo</h2> <a href="https://theme-1--hugolify-demo.netlify.app/" class="btn btn-primary" title="« Explore demo » - external link" target="_blank" rel="noreferrer noopener">Explore demo</a> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204771/screenshot-hugolify-theme-1_vtrxel.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204771/screenshot-hugolify-theme-1_vtrxel.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204771/screenshot-hugolify-theme-1_vtrxel.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204771/screenshot-hugolify-theme-1_vtrxel.png" alt="Screenshot of Theme 1" width="856" height="3174" loading="lazy" decoding="async"> </picture> <figcaption> <p>Preview homepage</p> </figcaption> </figure> </div> <h2 id="setup">Setup</h2> <h3 id="import-module">Import module</h3> <div class="alert alert-light"> <p><code>/config/_default/module.yaml</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">imports</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme-1</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme</span> <span style="color:#75715e"># Core theme</span> </span></span></code></pre></div><h2 id="custom-mainsass">Custom main.sass?</h2> <h3 id="import-sass">Import sass</h3> <div class="alert alert-light"> <p><code>/assets/sass/main.sass</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Core</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme-1&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Site</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;site&#34;</span> </span></span></code></pre></div><h2 id="repository">Repository</h2> <a href="https://github.com/hugolify/hugolify-theme-1" class="btn btn-primary" title="« Hugolify theme 1 » - external link" target="_blank" rel="noreferrer noopener">Hugolify theme 1</a>https://v1.hugolify.io/docs/getting-started/themes/theme-2/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/getting-started/themes/theme-2/<h2 id="demo">Demo</h2> <a href="https://theme-2--hugolify-demo.netlify.app/" class="btn btn-primary" title="« Explore demo » - external link" target="_blank" rel="noreferrer noopener">Explore demo</a> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204772/screenshot-hugolify-theme-2_w3wa4c.png" alt="Screenshot of Theme 2" width="856" height="3059" loading="lazy" decoding="async"> </picture> <figcaption> <p>Preview homepage</p> </figcaption> </figure> </div> <h2 id="setup">Setup</h2> <h3 id="import-module">Import module</h3> <div class="alert alert-light"> <p><code>/config/_default/module.yaml</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">imports</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme-2</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme</span> <span style="color:#75715e"># Core theme</span> </span></span></code></pre></div><h2 id="custom-mainsass">Custom main.sass?</h2> <h3 id="import-sass">Import sass</h3> <div class="alert alert-light"> <p><code>/assets/sass/main.sass</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Core</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme-2&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Site</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;site&#34;</span> </span></span></code></pre></div><h2 id="repository">Repository</h2> <a href="https://github.com/hugolify/hugolify-theme-2" class="btn btn-primary" title="« Hugolify theme 2 » - external link" target="_blank" rel="noreferrer noopener">Hugolify theme 2</a>https://v1.hugolify.io/docs/getting-started/themes/theme-3/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/getting-started/themes/theme-3/<h2 id="demo">Demo</h2> <a href="https://theme-3--hugolify-demo.netlify.app/" class="btn btn-primary" title="« Explore demo » - external link" target="_blank" rel="noreferrer noopener">Explore demo</a> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204773/screenshot-hugolify-theme-3_mohiuc.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204773/screenshot-hugolify-theme-3_mohiuc.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204773/screenshot-hugolify-theme-3_mohiuc.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204773/screenshot-hugolify-theme-3_mohiuc.png" alt="Screenshot of Theme 3" width="856" height="3445" loading="lazy" decoding="async"> </picture> <figcaption> <p>Preview homepage</p> </figcaption> </figure> </div> <h2 id="setup">Setup</h2> <h3 id="import-module">Import module</h3> <div class="alert alert-light"> <p><code>/config/_default/module.yaml</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">imports</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme-3</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme</span> <span style="color:#75715e"># Core theme</span> </span></span></code></pre></div><h2 id="custom-mainsass">Custom main.sass?</h2> <h3 id="import-sass">Import sass</h3> <div class="alert alert-light"> <p><code>/assets/sass/main.sass</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Core</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme-3&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Site</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;site&#34;</span> </span></span></code></pre></div><h2 id="repository">Repository</h2> <a href="https://github.com/hugolify/hugolify-theme-3" class="btn btn-primary" title="« Hugolify theme 3 » - external link" target="_blank" rel="noreferrer noopener">Hugolify theme 3</a>https://v1.hugolify.io/docs/getting-started/themes/theme-4/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/getting-started/themes/theme-4/<h2 id="demo">Demo</h2> <a href="https://theme-4--hugolify-demo.netlify.app/" class="btn btn-primary" title="« Explore demo » - external link" target="_blank" rel="noreferrer noopener">Explore demo</a> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204769/screenshot-hugolify-theme-4_h7yeca.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204769/screenshot-hugolify-theme-4_h7yeca.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204769/screenshot-hugolify-theme-4_h7yeca.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204769/screenshot-hugolify-theme-4_h7yeca.png" alt="Screenshot of Theme 4" width="856" height="2977" loading="lazy" decoding="async"> </picture> <figcaption> <p>Preview homepage</p> </figcaption> </figure> </div> <h2 id="setup">Setup</h2> <h3 id="import-module">Import module</h3> <div class="alert alert-light"> <p><code>/config/_default/module.yaml</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">imports</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme-4</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme</span> <span style="color:#75715e"># Core theme</span> </span></span></code></pre></div><h2 id="custom-mainsass">Custom main.sass?</h2> <h3 id="import-sass">Import sass</h3> <div class="alert alert-light"> <p><code>/assets/sass/main.sass</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Core</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme-4&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Site</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;site&#34;</span> </span></span></code></pre></div><h2 id="repository">Repository</h2> <a href="https://github.com/hugolify/hugolify-theme-4" class="btn btn-primary" title="« Hugolify theme 4 » - external link" target="_blank" rel="noreferrer noopener">Hugolify theme 4</a>https://v1.hugolify.io/docs/getting-started/themes/theme-5/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/getting-started/themes/theme-5/<h2 id="demo">Demo</h2> <a href="https://theme-5--hugolify-demo.netlify.app/" class="btn btn-primary" title="« Explore demo » - external link" target="_blank" rel="noreferrer noopener">Explore demo</a> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204784/screenshot-hugolify-theme-5_zj6k7p.png" alt="Screenshot of Theme 5" width="856" height="3248" loading="lazy" decoding="async"> </picture> <figcaption> <p>Preview homepage</p> </figcaption> </figure> </div> <h2 id="setup">Setup</h2> <h3 id="import-module">Import module</h3> <div class="alert alert-light"> <p><code>/config/_default/module.yaml</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">imports</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme-5</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">path</span>: <span style="color:#ae81ff">github.com/hugolify/hugolify-theme</span> <span style="color:#75715e"># Core theme</span> </span></span></code></pre></div><h2 id="custom-mainsass">Custom main.sass?</h2> <h3 id="import-sass">Import sass</h3> <div class="alert alert-light"> <p><code>/assets/sass/main.sass</code></p> </div> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sass" data-lang="sass"><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Core</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Theme</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;hugolify-theme-5&#34;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">//</span> <span style="color:#f92672">Site</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">@import</span> <span style="color:#e6db74">&#34;site&#34;</span> </span></span></code></pre></div><h2 id="repository">Repository</h2> <a href="https://github.com/hugolify/hugolify-theme-5" class="btn btn-primary" title="« Hugolify theme 5 » - external link" target="_blank" rel="noreferrer noopener">Hugolify theme 5</a>