https://yrbing.github.io/tags/hugo/ Recent content in Hugo on Robin Yang https://yrbing.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E https://yrbing.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E Hugo -- 0.152.2 en-us Sat, 10 Jan 2026 15:22:57 +0800 https://yrbing.github.io/posts/add-swiper-to-hugo-shortcodes/ Sat, 10 Jan 2026 15:22:57 +0800 https://yrbing.github.io/posts/add-swiper-to-hugo-shortcodes/ <p>I’d like to add an image carousel / slider to my article. After some research, I found three common approaches:</p> <ul> <li>Hardcoding HTML directly into Markdown (tedious and hard to maintain).</li> <li>Using Hugo Modules (powerful but sometimes overkill for a simple slider).</li> <li>Creating a Custom Shortcode (the perfect balance of flexibility and performance).</li> </ul> <p>In this post, I’ll show you how I built a robust, reusable Swiper component using the Shortcode approach. This method keeps your Markdown clean while ensuring your site stays fast.</p> https://yrbing.github.io/posts/math-typesetting-in-hugo/ Mon, 29 Dec 2025 14:45:52 +0800 https://yrbing.github.io/posts/math-typesetting-in-hugo/ <p>Hugo supports LaTeX math rendering via third-party JavaScript libraries, with <a href="https://www.mathjax.org/">MathJax</a> and <a href="https://katex.org/">KaTeX</a> being the two most popular options. This guide uses <strong>KaTeX</strong> for its speed and lightweight design.</p> <p>The implementation is simple: include the library in the <code>&lt;head&gt;</code> section. However, to optimize performance, we&rsquo;ll load it conditionally—only on pages that actually need it.</p> <p>$$ \color{#c7c3c3} { \begin{pmatrix} 1 &amp; 2 \\ 3 &amp; 4 \end{pmatrix} } $$</p> <h3 id="1-create-a-partial-for-katex-assets">1. Create a Partial for KaTeX Assets</h3> <p>Create a new file at <code>/layouts/partials/helpers/math.html</code> and add the following:</p>