Shortcodes on Jeison Santiago http://www.jeisonsantiago.com/tags/shortcodes/ Recent content in Shortcodes on Jeison Santiago Hugo en Wed, 12 Jul 2023 00:00:00 +0000 Rich Content http://www.jeisonsantiago.com/posts/rich-content/ Wed, 12 Jul 2023 00:00:00 +0000 http://www.jeisonsantiago.com/posts/rich-content/ <p>Hugo ships with several <a href="https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes" class="external-link" target="_blank" rel="noopener">Built-in Shortcodes</a> for rich content, along with a <a href="https://gohugo.io/about/hugo-and-gdpr/" class="external-link" target="_blank" rel="noopener">Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p> <h2 id="heading"> <a class="heading-link" href="#heading"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> More Rich Content http://www.jeisonsantiago.com/posts/more-rich-content/ Tue, 11 Jul 2023 00:00:00 +0000 http://www.jeisonsantiago.com/posts/more-rich-content/ <p>Hugo Coder provides some Custom Shortcodes.</p> <h2 id="heading"> <a class="heading-link" href="#heading"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> HTML and CSS only tabs http://www.jeisonsantiago.com/posts/html-and-css-only-tabs/ Sun, 09 Jul 2023 00:00:00 +0000 http://www.jeisonsantiago.com/posts/html-and-css-only-tabs/ <h2 id="shortcodes"> Shortcodes <a class="heading-link" href="#shortcodes"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>The following content:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tabgroup</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tab</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;Hello&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">Hello World! </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tab</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tab</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;Goodbye&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">Goodbye Everybody! </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tab</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tabgroup</span> <span class="p">&gt;</span>}} </span></span></code></pre></div><p>Will generate:</p> <div class="tabs tabs-left"> <style> .tabs input#tab-0-0:checked ~ .tab-content-0-0 { display: block; } </style> <input type="radio" class="tab-input" name="tab-select-0" id="tab-0-0" checked/> <label for="tab-0-0" class="tab-label">Hello</label> <div class="tab-content tab-content-0-0"> Hello World! </div> <style> .tabs input#tab-0-1:checked ~ .tab-content-0-1 { display: block; } </style> <input type="radio" class="tab-input" name="tab-select-0" id="tab-0-1" /> <label for="tab-0-1" class="tab-label">Goodbye</label> <div class="tab-content tab-content-0-1"> Goodbye Everybody! </div> </div> <h2 id="right-alighment"> Right alighment <a class="heading-link" href="#right-alighment"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>You can also align the tabs to the right:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tabgroup</span> <span class="na">align</span><span class="o">=</span><span class="s">&#34;right&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tab</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;Hello&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">Hello World! </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tab</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">tab</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;Goodbye&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">Goodbye Everybody! </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tab</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">tabgroup</span> <span class="p">&gt;</span>}} </span></span></code></pre></div><p>Giving you this look:</p>