本篇示例专用于展示与测试博客正文中的 图片画廊（Gallery）与全屏灯箱（Lightbox） 组件。
点击任意图片均可唤起全屏居中放大灯箱，支持 Esc 快捷键或点击遮罩随时关闭。
一、自适应 3 列图片画廊网格
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="工作台研发全景" />
<div class="gallery-item__caption">工作台研发全景</div>
</div>
...
</div>
</div>二、人文质感拍立得相册（Polaroid Style）
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="2026 研发展望" />
<div class="polaroid-card__caption">2026.04 杭州·研发工坊</div>
</div>
</div>Dieses Beispiel dient ausschließlich der Demonstration und Prüfung der Komponenten Bildergalerie (Gallery) und Vollbild-Lichtbox (Lightbox) im Blog-Artikeltext.
Durch Klicken auf ein beliebiges Bild wird eine zentrierte Vollbild-Lichtbox geöffnet. Sie kann jederzeit über die Esc-Taste oder durch Klicken auf die Abdeckung geschlossen werden.
1. Responsives 3-Spalten-Bildgalerie-Raster
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="Überblick über die Arbeitsumgebung" />
<div class="gallery-item__caption">Überblick über die Arbeitsumgebung</div>
</div>
...
</div>
</div>2. Polaroid-Stil-Album mit menschlichem Touch
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="Ausblick auf die Forschung und Entwicklung 2026" />
<div class="polaroid-card__caption">2026.04 Hangzhou · R&D-Workshop</div>
</div>
</div>This example article is dedicated to showcasing and testing the Image Gallery and Full-Screen Lightbox components within blog posts.
Clicking any image will activate a full-screen, centered lightbox, which can be closed at any time by pressing the Esc key or clicking the overlay.
1. Responsive 3-Column Image Gallery Grid
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="Workbench R&D Panorama" />
<div class="gallery-item__caption">Workbench R&D Panorama</div>
</div>
...
</div>
</div>2. Aesthetic Polaroid-Style Photo Album
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="2026 R&D Outlook" />
<div class="polaroid-card__caption">2026.04 Hangzhou · R&D Workshop</div>
</div>
</div>Este ejemplo está dedicado a la demostración y prueba de los componentes de Galería de imágenes (Gallery) y Visor de pantalla completa (Lightbox) dentro del cuerpo del blog.
Haz clic en cualquier imagen para activar el visor de pantalla completa centrado y ampliado. Puedes cerrarlo en cualquier momento con la tecla Esc o haciendo clic en el fondo.
1. Cuadrícula de galería de imágenes adaptable de 3 columnas
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="Vista panorámica del entorno de desarrollo" />
<div class="gallery-item__caption">Vista panorámica del entorno de desarrollo</div>
</div>
...
</div>
</div>2. Álbum de fotos estilo Polaroid con toque humano
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="Perspectivas de I+D 2026" />
<div class="polaroid-card__caption">2026.04 Hangzhou · Taller de I+D</div>
</div>
</div>Cet article d’exemple est dédié à la démonstration et au test des composants de galerie d’images (Gallery) et de lightbox plein écran (Lightbox) dans le corps des articles de blog.
Cliquez sur n’importe quelle image pour activer la lightbox plein écran centrée et agrandie. Vous pouvez la fermer à tout moment avec la touche Esc ou en cliquant sur le masque.
1. Grille de galerie d’images adaptative à 3 colonnes
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="Vue panoramique du poste de travail de développement" />
<div class="gallery-item__caption">Vue panoramique du poste de travail de développement</div>
</div>
...
</div>
</div>2. Album photo de style Polaroid (Polaroid Style)
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="Perspectives de R&D 2026" />
<div class="polaroid-card__caption">Avril 2026, Hangzhou · Atelier de R&D</div>
</div>
</div>本篇範例專用於展示與測試部落格正文中的 圖片畫廊（Gallery）與全螢幕燈箱（Lightbox） 元件。
點擊任意圖片皆可喚起全螢幕置中放大燈箱，支援 Esc 快捷鍵或點擊遮罩隨時關閉。
一、自適應 3 列圖片畫廊網格
<div class="article-gallery">
<div class="gallery-grid gallery-grid-3">
<div class="gallery-item">
<img src="/media/shijianus/workbench.jpg" alt="工作台研發全景" />
<div class="gallery-item__caption">工作台研發全景</div>
</div>
...
</div>
</div>二、人文質感拍立得相簿（Polaroid Style）
<div class="gallery-polaroid">
<div class="polaroid-card">
<img src="/media/shijianus/workbench.jpg" alt="2026 研發展望" />
<div class="polaroid-card__caption">2026.04 杭州·研發工坊</div>
</div>
</div>
评论