https://yanyanliu.com/tags/privacy/ Recent content in Privacy on Hugo Theme Stack Hugo -- gohugo.io zh-cn Mon, 26 Jan 2026 00:00:00 +0000 https://yanyanliu.com/p/shortcodes/ Mon, 26 Jan 2026 00:00:00 +0000 https://yanyanliu.com/p/shortcodes/ <p>Stack theme also provides some custom shortcodes to enhance your content.</p> <h2 id="quote">Quote </h2><p>The <code>quote</code> shortcode allows you to display a quote with an author, source, and URL.</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><span class="cite"><span>― </span><span>A famous person, </span><a href="https://en.wikipedia.org/wiki/Book"><cite>The book they wrote</cite></a></span></blockquote> <h3 id="usage">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; quote author=&#34;Author Name&#34; source=&#34;Source Title&#34; url=&#34;https://example.com&#34; &gt;}} </span></span><span class="line"><span class="cl">Quote content here. </span></span><span class="line"><span class="cl">{{&lt; /quote &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="video">Video </h2><p>The <code>video</code> shortcode allows you to embed self-hosted or remote video files.</p> <div class="video-wrapper"> <video controls src="https://www.w3schools.com/html/mov_bbb.mp4" > <p> Your browser doesn't support HTML5 video. Here is a <a href="https://www.w3schools.com/html/mov_bbb.mp4">link to the video</a> instead. </p> </video> </div> <h3 id="usage-1">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; video src=&#34;https://example.com/video.mp4&#34; &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="bilibili">Bilibili </h2><p>Embed videos from Bilibili. Supports both <code>av</code> and <code>bv</code> IDs.</p> <div class="video-wrapper"> <iframe src="https://player.bilibili.com/player.html?as_wide=1&amp;high_quality=1&amp;page=1&bvid=BV1634y1t7xR" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe> </div> <h3 id="usage-2">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; bilibili &#34;BV1634y1t7xR&#34; &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="youtube">YouTube </h2><p>Hugo&rsquo;s built-in YouTube shortcode.</p> <div class="video-wrapper"> <iframe loading="lazy" src="https://www.youtube.com/embed/ZJthWmvUzzc" allowfullscreen title="YouTube Video" > </iframe> </div> <h3 id="usage-3">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; youtube ZJthWmvUzzc &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="tencent-video">Tencent Video </h2><p>Embed videos from Tencent Video.</p> <div class="video-wrapper"> <iframe src="https://v.qq.com/txp/iframe/player.html?vid=u00306ng962&auto=0" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe> </div> <h3 id="usage-4">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; tencent &#34;u00306ng962&#34; &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="gitlab-snippet">GitLab Snippet </h2><p>Embed snippets from GitLab.</p> <script type="application/javascript" src="https://gitlab.com/-/snippets/2349278.js" ></script> <h3 id="usage-5">Usage </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; gitlab 2349278 &gt;}} </span></span></code></pre></td></tr></table> </div> </div><h2 id="diagrams">Diagrams </h2><p>Stack supports <a class="link" href="https://mermaid.js.org/" target="_blank" rel="noopener" >Mermaid</a> diagrams out of the box.</p> <pre class="mermaid" style="visibility:hidden">graph TD; A-->B; A-->C; B-->D; C-->D;</pre><h3 id="usage-6">Usage </h3><p>Wrap your Mermaid code in a code block with the language set to <code>mermaid</code>.</p> <pre><code>```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ```</code></pre>