http://www.example.com/pt-br/tags/shortcodes/ Recent content in Shortcodes on test blog Hugo pt-br Wed, 12 Jul 2023 00:00:00 +0000 http://www.example.com/pt-br/posts/rich-content/ Wed, 12 Jul 2023 00:00:00 +0000 http://www.example.com/pt-br/posts/rich-content/ <p>O Hugo vem com vários <a href="https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes" class="external-link" target="_blank" rel="noopener">Shortcodes Internos</a> para conteúdo rico, assim como uma <a href="https://gohugo.io/about/hugo-and-gdpr/" class="external-link" target="_blank" rel="noopener">Configuração de Privacidade</a> e uma gama de Shortcodes simples que permitem embutir versões estáticas e sem JS de várias de redes sociais.</p> <h2 id=""> <a class="heading-link" href="#"> <i class="fa-solid fa-link" aria-hidden="true" title="Link para o cabeçalho"></i> <span class="sr-only">Link para o cabeçalho</span> </a> </h2> http://www.example.com/pt-br/posts/more-rich-content/ Tue, 11 Jul 2023 00:00:00 +0000 http://www.example.com/pt-br/posts/more-rich-content/ <p>O Hugo Coder proporciona alguns Shortcodes Customizados.</p> <h2 id=""> <a class="heading-link" href="#"> <i class="fa-solid fa-link" aria-hidden="true" title="Link para o cabeçalho"></i> <span class="sr-only">Link para o cabeçalho</span> </a> </h2> http://www.example.com/pt-br/posts/html-and-css-only-tabs/ Sun, 09 Jul 2023 00:00:00 +0000 http://www.example.com/pt-br/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 para o cabeçalho"></i> <span class="sr-only">Link para o cabeçalho</span> </a> </h2> <p>O seguinte conteúdo:</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>Irá gerar:</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="alinhamento-à-direita"> Alinhamento à direita <a class="heading-link" href="#alinhamento-%c3%a0-direita"> <i class="fa-solid fa-link" aria-hidden="true" title="Link para o cabeçalho"></i> <span class="sr-only">Link para o cabeçalho</span> </a> </h2> <p>Você também pode alinhas as tabs à direita:</p>