https://v1.hugolify.io/docs/shortcodes/Recent content in Shortcodes on HugolifyHugoenhttps://v1.hugolify.io/docs/shortcodes/alert/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/alert/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">alert</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.&#34;</span> <span style="color:#a6e22e">state</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;danger&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;alert alert-danger&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum </span></span><span style="display:flex;"><span> facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non </span></span><span style="display:flex;"><span> lacus. </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div class="alert alert-danger"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.</p>https://v1.hugolify.io/docs/shortcodes/alert-block/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/alert-block/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">alert</span><span style="color:#960050;background-color:#1e0010">-</span><span style="color:#66d9ef">block</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Tempus vitae&#34;</span> <span style="color:#a6e22e">state</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;danger&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span><span style="display:flex;"><span>Lorem <span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">blank_link</span> <span style="color:#a6e22e">link</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io&#34;</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ipsum&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> dolor sit amet, consectetur adipiscing elit. </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>* In condimentum facilisis gravida. </span></span><span style="display:flex;"><span>* Nam diam ipsum, tempus vitae [posuere](https://www.hugolify.io). </span></span><span style="display:flex;"><span>* mattis non lacus. </span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">alert</span><span style="color:#960050;background-color:#1e0010">-</span><span style="color:#66d9ef">block</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;alert alert-danger&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h4</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;alert-heading&#34;</span>&gt;Tempus vitae&lt;/<span style="color:#f92672">h4</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Lorem &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io&#34;</span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;_blank&#34;</span>&gt;ipsum&lt;/<span style="color:#f92672">a</span>&gt; dolor sit amet, consectetur adipiscing elit.&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">ul</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;In condimentum facilisis gravida.&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;Nam diam ipsum, tempus vitae &lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io&#34;</span>&gt;posuere&lt;/<span style="color:#f92672">a</span>&gt;.&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;mattis non lacus.&lt;/<span style="color:#f92672">li</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div class="alert alert-danger"> <h4 class="alert-heading">Tempus vitae</h4> <p>Lorem <a href="https://www.hugolify.io" target="_blank" rel="noreferrer noopener" title="« ipsum » - external link">ipsum</a> dolor sit amet, consectetur adipiscing elit.</p>https://v1.hugolify.io/docs/shortcodes/badge/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/badge/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">badge</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lorem ipsum&#34;</span> <span style="color:#a6e22e">state</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;warning&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;badge text-bg-warning&#34;</span>&gt;Lorem&lt;/<span style="color:#f92672">span</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <span class="badge text-bg-warning">Lorem ipsum</span> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">text</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">state</span>: </span></span><span style="display:flex;"><span> [ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;danger&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;dark&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;info&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;light&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;primary&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;secondary&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;success&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#34;warning&#34;</span>, </span></span><span style="display:flex;"><span> ] <span style="color:#75715e"># select</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-links">Related links</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/badge.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/badge.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> <li> <a href="https://getbootstrap.com/docs/5.3/components/badge/" target="_blank" rel="noreferrer noopener" title="« Boostrap component » - external link">Boostrap component</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/blank_link/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/blank_link/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">blank_link</span> <span style="color:#a6e22e">link</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io/&#34;</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Link with target blank&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io/&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;_blank&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;noreferrer noopener&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;« Link with target blank » - external link&#34;</span> </span></span><span style="display:flex;"><span> &gt;Link with target blank&lt;/<span style="color:#f92672">a</span> </span></span><span style="display:flex;"><span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <a href="https://www.hugolify.io/" target="_blank" rel="noreferrer noopener" title="« Link with target blank » - external link">Link with target blank</a> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">link</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">text</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/blank_link.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/blank_link.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-decap-cms/blob/main/admin/app/editor/shortcodes/blank_link.js" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-decap-cms » - external link">Shortcode file — hugolify-decap-cms</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/blockquote/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/blockquote/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">blockquote</span> <span style="color:#a6e22e">quote</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.&#34;</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;John Doe&#34;</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Founder&#34;</span> <span style="color:#a6e22e">image</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://res.cloudinary.com/uncinq/image/upload/v1758205367/sebastien-moulene_ft0yg7.jpg&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">figure</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;quote&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">blockquote</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum </span></span><span style="display:flex;"><span> facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non </span></span><span style="display:flex;"><span> lacus. </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">blockquote</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;…&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(min-width: 577px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;…, … 2x, … 3x&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;…, … 2x, … 3x&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/jpg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">img</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;…&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;50&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;50&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decoding</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;async&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">cite</span>&gt;John Doe&lt;/<span style="color:#f92672">cite</span>&gt;&lt;<span style="color:#f92672">br</span> /&gt; </span></span><span style="display:flex;"><span> Founder </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">figure</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <figure class="quote"> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus.</p>https://v1.hugolify.io/docs/shortcodes/button/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/button/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">button</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;This is a button&#34;</span> <span style="color:#a6e22e">url</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io/&#34;</span> <span style="color:#a6e22e">blank</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;true&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">a</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io/&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">target</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;_blank&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;noreferrer noopener&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;« This is a button » - external link&#34;</span> </span></span><span style="display:flex;"><span> &gt;This is a button&lt;/<span style="color:#f92672">a</span> </span></span><span style="display:flex;"><span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <a href="https://www.hugolify.io/" class="btn btn-primary" title="« This is a button » - external link" target="_blank" rel="noreferrer noopener">This is a button</a> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">text</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">blank</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># boolean</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">class</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-links">Related links</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/button.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/button.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-decap-cms/blob/main/admin/app/editor/shortcodes/button.js" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-decap-cms » - external link">Shortcode file — hugolify-decap-cms</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/dailymotion/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/dailymotion/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">dailymotion</span> <span style="color:#a6e22e">2656646242</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://geo.dailymotion.com/player.html?video=x9t0c4w&#34;</span> <span style="color:#a6e22e">allowfullscreen</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://geo.dailymotion.com/player.html?video=x9t0c4w" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allow="fullscreen" loading="lazy"> </iframe> </div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">id</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/dailymotion.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/dailymotion.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/details/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/details/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">details</span> <span style="color:#a6e22e">summary</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;This is a question&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span><span style="display:flex;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. </span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">details</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">details</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">summary</span>&gt;This is a question&lt;/<span style="color:#f92672">summary</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum </span></span><span style="display:flex;"><span> facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non </span></span><span style="display:flex;"><span> lacus. </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">details</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <details> <summary>This is a question</summary> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum facilisis gravida. Nam diam ipsum, tempus vitae posuere at, mattis non lacus. </div> </details> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">name</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">summary</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">contents</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># markdown</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/details.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/details.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/figure/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/figure/<h2 id="example-1">Example 1</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">figure</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">legend</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lorem ipsum&#34;</span> <span style="color:#a6e22e">credit</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Unsplash&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">figure</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(min-width: 577px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/jpg&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://res.cloudinary.com/uncinq/image/upload/v1758204688/test_pfae0v.jpg&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">decoding</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;async&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Lorem ipsum&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;credit&#34;</span>&gt;Unsplash&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">figure</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758204688/test_pfae0v.jpg, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758204688/test_pfae0v.jpg 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758204688/test_pfae0v.jpg, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758204688/test_pfae0v.jpg 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758204688/test_pfae0v.jpg 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204688/test_pfae0v.jpg, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204688/test_pfae0v.jpg 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758204688/test_pfae0v.jpg 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758204688/test_pfae0v.jpg" alt="" width="856" height="571" loading="lazy" decoding="async"> </picture> <figcaption> <p>Lorem ipsum</p> <p class="credit">Unsplash</p> </figcaption> </figure> <h2 id="example-2">Example 2</h2> <h3 id="markdown-usage-1">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">figure</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Screensot of Hugolify admin with Decap CMS&#34;</span> <span style="color:#a6e22e">legend</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Screenshot&#34;</span> <span style="color:#a6e22e">screenshot</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;true&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered-1">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;screenshot&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">figure</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(min-width: 577px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/webp&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">srcset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;image/jpg&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;(max-width: 576px)&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://res.cloudinary.com/uncinq/image/upload/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Screensot of Hugolify admin with Decap CMS&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span> <span style="color:#a6e22e">decoding</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;async&#34;</span> /&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">picture</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Screenshot&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">figure</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer-1">Visual renderer</h3> <div class="screenshot"ZgotmplZ> <span></span> <figure> <picture> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_856/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_856/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png 2x" type="image/webp" media="(min-width: 577px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/f_webp,w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png, https://res.cloudinary.com/uncinq/image/upload/dpr_2.0,f_webp,w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png 2x, https://res.cloudinary.com/uncinq/image/upload/dpr_3.0,f_webp,w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png 3x" type="image/webp" media="(max-width: 576px)"> <source srcset="https://res.cloudinary.com/uncinq/image/upload/w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png 2x, https://res.cloudinary.com/uncinq/image/upload/w_360/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png 3x" type="image/jpg" media="(max-width: 576px)"> <img src="https://res.cloudinary.com/uncinq/image/upload/w_856/v1758126305/screenshot-hugolify-decapcms-home_ynatqv.png" alt="Screensot of Hugolify admin with Decap CMS" width="856" height="438" loading="lazy" decoding="async"> </picture> <figcaption> <p>Screenshot</p>https://v1.hugolify.io/docs/shortcodes/map/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/map/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">map</span> <span style="color:#a6e22e">markers</span><span style="color:#f92672">=</span><span style="color:#e6db74">`{&#34;coordinates&#34;:[44.8425666,-0.5737107]},{&#34;coordinates&#34;:[45.8425666,1.5937107]},{&#34;coordinates&#34;:[46.8425666,-0.5737107]}`</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;map js-map&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data-markers</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;[{&amp;quot;coordinates&amp;quot;:[44.8425666,-0.5737107]},{&amp;quot;coordinates&amp;quot;:[45.8425666,1.5937107]},{&amp;quot;coordinates&amp;quot;:[46.8425666,-0.5737107]}]&#34;</span> </span></span><span style="display:flex;"><span>&gt;&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div class="map js-map" data-markers="[{&#34;coordinates&#34;:[44.8425666,-0.5737107]},{&#34;coordinates&#34;:[45.8425666,1.5937107]},{&#34;coordinates&#34;:[46.8425666,-0.5737107]}]"></div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">markers</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># object</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">zoom</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># [1…20] if only one marker</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-links">Related links</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/map.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/map.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/assets/js/components/map.js" target="_blank" rel="noreferrer noopener" title="« JS file — hugolify-theme » - external link">JS file — hugolify-theme</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/qr/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/qr/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">qr</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.hugolify.io&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/qr_6cbabfe65842f919.png&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;132&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;132&#34;</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <img src="https://v1.hugolify.io/qr_6cbabfe65842f919.png" width="132" height="132"> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">text</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://gohugo.io/shortcodes/qr/" target="_blank" rel="noreferrer noopener" title="« Shortcode documentation — Hugo » - external link">Shortcode documentation — Hugo</a> </li> <li> <a href="https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_shortcodes/qr.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — Hugo » - external link">Shortcode file — Hugo</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/qr.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/span_lang/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/span_lang/<p>In accessibility, it is necessary to identify words corresponding to a language other than the content of the page.</p> <h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">span_lang</span> <span style="color:#a6e22e">text</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;English text&#34;</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;en&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;en&#34;</span>&gt;English text&lt;/<span style="color:#f92672">span</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <span lang="en">Lorem ipsum</span> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">text</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">lang</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string (e.g: de)</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-links">Related links</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/span_lang.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/span_lang.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/twitch/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/twitch/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">twitch</span> <span style="color:#a6e22e">2656646242</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://player.twitch.tv/?channel=2656646242&#34;</span> <span style="color:#a6e22e">allowfullscreen</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://player.twitch.tv/?video=2656646242&amp;parent=v1.hugolify.io" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allow="fullscreen" loading="lazy"> </iframe> </div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">id</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/twitch.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/twitch.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/video/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/video/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">video</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mp4</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/videos/lawyerify-international.mp4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">webm</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/videos/lawyerify-international.webm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">controls</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">screenshot</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">legend</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lorem ipsum&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">credit</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Lawyerify&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">figure</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">video</span> <span style="color:#a6e22e">muted</span> <span style="color:#a6e22e">playsinline</span> <span style="color:#a6e22e">controls</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/videos/lawyerify-international.webm&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/webm&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">source</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/videos/lawyerify-international.mp4&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;video/mp4&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">video</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span>&gt;Lorem ipsum&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">p</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;credit&#34;</span>&gt;Lawyerify&lt;/<span style="color:#f92672">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">figcaption</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">figure</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div class="screenshot"> <span></span> <figure> <video class="js-video is-lazy" playsinline controls muted > <source data-src="https://v1.hugolify.io/videos/lawyerify-international.webm" type="video/webm" /> <source data-src="https://v1.hugolify.io/videos/lawyerify-international.mp4" type="video/mp4" /> </video> <figcaption> <p>Lorem ipsum</p> <p class="credit">Lawyerify</p> </figcaption> </figure> </div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">mp4</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">webm</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">controls</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># boolean</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">autoplay</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># boolean</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">loop</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># boolean</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">legend</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">credit</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># markdown</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">screenshot</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># boolean (set true if you want add a fake browser around your picture)</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/video.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/video.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/vimeo/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/vimeo/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">vimeo</span> <span style="color:#a6e22e">146022717</span> <span style="color:#a6e22e">vimeo</span> <span style="color:#e6db74">&#34;iframe title&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;vimeo&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;iframe title&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://player.vimeo.com/video/JP8HNPKQWfI?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://player.vimeo.com/video/146022717?dnt=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allow="fullscreen"> </iframe> </div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">id</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">class</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://gohugo.io/shortcodes/vimeo/" target="_blank" rel="noreferrer noopener" title="« Shortcode documentation — Hugo » - external link">Shortcode documentation — Hugo</a> </li> <li> <a href="https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_shortcodes/vimeo.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — Hugo » - external link">Shortcode file — Hugo</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/vimeo.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — hugolify-theme » - external link">Shortcode file — hugolify-theme</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-admin/blob/main/layouts/partials/admin/shortcodes/fields/vimeo.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-admin » - external link">Shortcode fields file — hugolify-admin</a> </li> </ul>https://v1.hugolify.io/docs/shortcodes/youtube/Mon, 01 Jan 0001 00:00:00 +0000https://v1.hugolify.io/docs/shortcodes/youtube/<h2 id="example">Example</h2> <h3 id="markdown-usage">Markdown usage</h3> <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-go-html-template" data-lang="go-html-template"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#960050;background-color:#1e0010">&lt;</span> <span style="color:#a6e22e">youtube</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;JP8HNPKQWfI&#34;</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Proin maximus&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;youtube&#34;</span> <span style="color:#960050;background-color:#1e0010">&gt;</span><span style="color:#75715e">}}</span> </span></span></code></pre></div><h3 id="html-rendered">HTML rendered</h3> <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-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;youtube&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.youtube.com/embed/JP8HNPKQWfI?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="visual-renderer">Visual renderer</h3> <div class="youtube"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/JP8HNPKQWfI?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" title="Proin maximus"></iframe> </div> <h2 id="datas">Datas</h2> <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-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">id</span>: <span style="color:#e6db74">&#34;&#34;</span> <span style="color:#75715e"># string</span> </span></span></code></pre></div><h2 id="cms-availability">CMS availability</h2> <h3 id="hugolify-admin">Hugolify Admin</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/">Hugolify Admin</a> <ul> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/cloudcannon/">CloudCannon</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/decap-cms/">Decap CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/netlify-cms/">Netlify CMS</a> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/pages-cms/">Pages CMS</a> <span class="badge text-bg-danger">Not available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/sveltia-cms/">Sveltia CMS</a> <span class="badge text-bg-success">Available</span> <span class="badge text-bg-info">Since v1.0.0</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/admin/cms/tina-cms/">Tina CMS</a> <span class="badge text-bg-danger">Not available</span> </li> </ul> </li> </ul> <h3 id="old-repositories">Old repositories</h3> <ul> <li><a href="https://v1.hugolify.io/docs/cms/decap-cms/">Hugolify Decap CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/netlify-cms/">Hugolify Netlify CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-success">Available</span> </li> <li><a href="https://v1.hugolify.io/docs/cms/sveltia-cms/">Hugolify Sveltia CMS</a> <span class="badge text-bg-warning">Deprecated</span> <span class="badge text-bg-danger">Not available</span> </li> </ul> <h2 id="related-link">Related link</h2> <ul> <li> <a href="https://gohugo.io/shortcodes/youtube/" target="_blank" rel="noreferrer noopener" title="« Shortcode documentation — Hugo » - external link">Shortcode documentation — Hugo</a> </li> <li> <a href="https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_shortcodes/youtube.html" target="_blank" rel="noreferrer noopener" title="« Shortcode file — Hugo » - external link">Shortcode file — Hugo</a> </li> <li> <a href="https://github.com/Hugolify/hugolify-theme/blob/main/layouts/shortcodes/youtube.html" target="_blank" rel="noreferrer noopener" title="« Shortcode fields file — hugolify-theme » - external link">Shortcode fields file — hugolify-theme</a> </li> </ul>