/categories/shortcodes/ Recent content in Shortcodes on FloatSheep's Blog Hugo -- gohugo.io en © 2023 FloatSheep{{< emoji id="footer-emoji" data="thinking_face_color" />}} <br /> 全站约 {{< wordCount "all" >}} Sat, 26 Aug 2023 10:10:04 +0800 /posts/hugo-shortcodes/ Sat, 26 Aug 2023 10:10:04 +0800 /posts/hugo-shortcodes/ <h2 id="什么是-shortcodes" class="relative group">什么是 Shortcodes <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%e4%bb%80%e4%b9%88%e6%98%af-shortcodes" aria-label="Anchor">#</a></span></h2><p><strong>Shortcodes（简码或短代码）</strong> 是 <strong>Hugo</strong> 为了避免内容作者因为 <strong>Markdown</strong> 语法的不足而插入 <strong>HTML</strong> 到内容中所创建的</p> <p>简单地说，<strong>Shortcodes</strong> 就好比 <strong>Hexo</strong> 中的 <strong>外挂标签（Tag Plugins）</strong></p> <p>我们可以随意的编写属于自己的 <strong>Shortcodes</strong></p> <h2 id="如何使用-shortcodes" class="relative group">如何使用 Shortcodes <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-shortcodes" aria-label="Anchor">#</a></span></h2><p>你使用的 <strong>Hugo Theme</strong> 可能自带了一些 <strong>Shortcodes</strong></p> <p>通过翻阅主题文档，我们可以通过简短的语法在 <strong>Markdown</strong> 中使用这些 <strong>Shortcodes</strong></p> <h3 id="shortcodes-的调用方式" class="relative group">Shortcodes 的调用方式 <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#shortcodes-%e7%9a%84%e8%b0%83%e7%94%a8%e6%96%b9%e5%bc%8f" aria-label="Anchor">#</a></span></h3><p>我们可以通过</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="nx">shortcodename</span> <span class="nx">parameters</span> <span class="p">&gt;}}</span> </span></span></code></pre></div><p>直接调用短代码</p> <h2 id="shortcodes-目录" class="relative group">Shortcodes 目录 <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#shortcodes-%e7%9b%ae%e5%bd%95" aria-label="Anchor">#</a></span></h2><p>编写 <strong>Shortcodes</strong> 就像编写 <strong>Tag Plugins</strong> 一样简单</p> <p>我们首先需要了解 <strong>Shortcodes</strong> 目录</p> <p><strong>Shortcodes</strong> 目录位于 <strong>~/layouts/</strong> 下,我们可以通过创建 <strong>HTML</strong> 文件编写自己的 <strong>Shortcodes</strong></p> <p>了解完目录，我们就可以尝试编写自己的 <strong>Shortcodes</strong> 了</p> <h2 id="编写-shortcodes" class="relative group">编写 Shortcodes <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%e7%bc%96%e5%86%99-shortcodes" aria-label="Anchor">#</a></span></h2><p>在 <code>~/layouts/shortcodes</code> 下新建一个 <strong>HTML</strong> 文件</p> <p><strong>HTML</strong> 文件的名称就是短代码的名称</p> <p>譬如:</p> <ul> <li>myShortcodes</li> <li>codeDemo</li> </ul> <p>我们在 <strong>Markdown</strong> 中写作时就可以通过 <code>{{&lt; myShortcodes parameters &gt;}}</code> 的方式调用</p> <p>现在我们将它命名为 <strong>colorfont</strong></p> <p> <figure><img src="https://dogefs.s3.ladydaily.com/hajeekn/storage/202308261042959.png" alt="image-20230826104235937" class="mx-auto my-0 rounded-md" /> </figure> </p> <p>我们在里面写一段简单的 <strong>HTML</strong></p> <p>让我们可以通过 <code>color=colorname</code> 的方式传参给 <strong>Shortcodes</strong>，所以我们使用 <code>{{ with .Get &quot;color&quot; }}</code></p> <p> <figure><img src="https://dogefs.s3.ladydaily.com/hajeekn/storage/202308261048844.png" alt="image-20230826104800765" class="mx-auto my-0 rounded-md" /> </figure> </p> <p>接着，我们使用 <strong>Shortcodes</strong> 让文字变红，这时候，我们就需要使用 <code>{{ .Inner }}</code> 来获取我们传给 <strong>Shortcodes</strong> 的文字</p> <p> <figure><img src="https://dogefs.s3.ladydaily.com/hajeekn/storage/202308261051551.png" alt="image-20230826105125474" class="mx-auto my-0 rounded-md" /> </figure> </p> <p>这样我们就完成了一个简单的 <strong>Shortcodes</strong></p> <p>来试试效果吧！</p> <p>在 <strong>Markdown</strong> 中使用 <code>{{&lt; colorfont color=&quot;red&quot; &gt;}} Content {{&lt;/ colorfont &gt;}}</code> 来调用</p> <p style="color: red"> Content </p> <p>看，成功了！</p> <p>它还有更多用法，比如插入一个 <strong>Emoji</strong></p> <img loading="lazy" class="emoji-object" src="https://api.hesiy.cn/api/emoji?emoji=face_with_tongue_color" type="image/svg+xml"></img> <p>我们还可以将它们融合在一起</p> <p style="color: green"> 泰库拉！<img loading="lazy" class="emoji-object" src="https://api.hesiy.cn/api/emoji?emoji=smiling_face_with_sunglasses_color" type="image/svg+xml"></img></p> <p>它还有许多的用法，就等各位去一一发掘了</p> <div class="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"> <span class="pe-3 text-primary-400"> <span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg> </span> </span> <span class="dark:text-neutral-300"><strong>警告!</strong> 如果你想要自定义 <strong>Shortcodes</strong> 的样式，你应该在另外的 <strong>CSS</strong> 文件中书写样式，你不应该在 <strong>Shortcodes</strong> 文件中直接使用 <code>&lt;style /&gt;</code> 语法，也不应该在 <strong>Shortcodes</strong> 中引入样式，那将会浪费不必要的流量</span> </div>