https://turnaoo.top/tags/gallery/ Recent content in Gallery on Hugo Theme Stack Hugo -- gohugo.io zh-cn Mon, 26 Jan 2026 00:00:00 +0000 https://turnaoo.top/p/image-gallery/ Mon, 26 Jan 2026 00:00:00 +0000 https://turnaoo.top/p/image-gallery/ <img src="https://turnaoo.top/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash.jpg" alt="Featured image of post 相册" /><p>Stack 主题内置了对相册的支持。你只需要简单地将多张图片并排放置，就可以创建一个精美的相册。</p> <h2 id="示例相册">示例相册 </h2><p><img src="https://turnaoo.top/p/image-gallery/florian-klauer-nptLmg6jqDo-unsplash.jpg" width="667" height="1000" srcset="https://turnaoo.top/p/image-gallery/florian-klauer-nptLmg6jqDo-unsplash_hu_7b8a06820e6d5c.jpg 480w, https://turnaoo.top/p/image-gallery/florian-klauer-nptLmg6jqDo-unsplash_hu_a347f10e565b40ff.jpg 1024w" loading="lazy" alt="Photo by Florian Klauer on Unsplash" class="gallery-image" data-flex-grow="66" data-flex-basis="160px" > <img src="https://turnaoo.top/p/image-gallery/luca-bravo-alS7ewQ41M8-unsplash.jpg" width="1000" height="667" srcset="https://turnaoo.top/p/image-gallery/luca-bravo-alS7ewQ41M8-unsplash_hu_258fc4da0cfc7de9.jpg 480w, https://turnaoo.top/p/image-gallery/luca-bravo-alS7ewQ41M8-unsplash_hu_d415bcea096fe061.jpg 1024w" loading="lazy" alt="Photo by Luca Bravo on Unsplash" class="gallery-image" data-flex-grow="149" data-flex-basis="359px" ></p> <p><img src="https://turnaoo.top/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash.jpg" width="1000" height="750" srcset="https://turnaoo.top/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash_hu_dfbb0c559c3df461.jpg 480w, https://turnaoo.top/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash_hu_212d0718b8e99eaa.jpg 1024w" loading="lazy" alt="Photo by Helena Hertz on Unsplash" class="gallery-image" data-flex-grow="133" data-flex-basis="320px" > <img src="https://turnaoo.top/p/image-gallery/hudai-gayiran-3Od_VKcDEAA-unsplash.jpg" width="667" height="1000" srcset="https://turnaoo.top/p/image-gallery/hudai-gayiran-3Od_VKcDEAA-unsplash_hu_41819e288bf4a8c0.jpg 480w, https://turnaoo.top/p/image-gallery/hudai-gayiran-3Od_VKcDEAA-unsplash_hu_1277885c87f69490.jpg 1024w" loading="lazy" alt="Photo by Hudai Gayiran on Unsplash" class="gallery-image" data-flex-grow="66" data-flex-basis="160px" ></p> <h2 id="它是如何工作的">它是如何工作的 </h2><p>相册由 <strong>Photoswipe</strong> 和一个自定义的内部脚本驱动。它会根据图片的宽高比自动计算出最佳布局。</p> <p>要创建一个相册，你只需要将多张图片放在同一行（或同一个段落）中。</p> <h3 id="语法">语法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>![<span style="color:#f92672">图片 1</span>](<span style="color:#a6e22e">image1.jpg</span>) ![<span style="color:#f92672">图片 2</span>](<span style="color:#a6e22e">image2.jpg</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>![<span style="color:#f92672">图片 3</span>](<span style="color:#a6e22e">image3.jpg</span>) ![<span style="color:#f92672">图片 4</span>](<span style="color:#a6e22e">image4.jpg</span>) </span></span></code></pre></div><blockquote> <p><strong>注意</strong>: 图片之间应该有两个空格，以确保它们在 Markdown 中保持在同一行。</p> </blockquote> <hr> <p>相册语法启发自 <a class="link" href="https://typlog.com/" target="_blank" rel="noopener" >Typlog</a></p>