感谢 liwenyip/hugo-easy-gallery & Zebradil · Pull Request #48 ,我们现在可以在 hugo-theme-jane 中使用 {{< gallery >}} 简码。

普通图像

这是存在 static/image 文件夹的图像。

1
![This is an image in `static/image` folder.](/image/example.jpg)

{{< figure >}} 简码

具有 title 的图像

1
{{< figure src="/image/example.jpg" title="figure image with title" >}}

具有 caption 的图像

1
{{< figure src="/image/example.jpg" caption="figure image with caption figure image with caption figure image with caption figure image with caption figure image with caption" >}}

{{< figure >}} 简码的更多用法

指定图像文件:

  • {{< figure src="thumb.jpg" link="image.jpg" >}} 将使用 thumb.jpg 作为小示意图以及使用 image.jpg 作为灯箱图。
  • {{< figure src="image.jpg" >}} or {{< figure link="image.jpg" >}} 将使用 image.jpg 作为小示意图和灯箱图。
  • {{< figure link="image.jpg" thumb="-small" >}} 将使用 image-small.jpg 作为小示意图以及使用 image.jpg 作为灯箱图。

可选参数:

  • Hugo 内置的 figure 简码的 特征/参数 都正常使用,例如 src, link, title, caption, class, attr (attribution), attrlink, alt
  • size (e.g. size="1024x768") 预定义图像的尺寸。
  • class 用来预定义 <figure> 的标签。

Optional parameters for standalone {{< figure >}} shortcodes only (i.e. don’t use on {{< figure >}} inside {{< gallery >}} - strange things may happen if you do):

  • caption-position and caption-effect work the same as for the {{< gallery >}} shortcode (see below).
  • width defines the max-width of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail’s native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don’t have a thumbnail and you don’t want the hi-res image to take up the entire width of the screen/container.
  • class="no-photoswipe" prevents a <figure> from being loaded into PhotoSwipe. If you click on the figure you’ll instead a good ol’ fashioned hyperlink to a bigger image (or - if you haven’t specified a bigger image - the same one).

To specify a directory of image files:

1
{{< gallery dir="/img/your-directory-of-images/" >}}
  • The images are automatically captioned with the file name.
  • [image].jpg is used for the hi-res image, and [image]-thumb.jpg is used for the thumbnails.
  • If [image]-thumb.jpg doesn’t exist, then [image].jpg will be used for both hi-res and thumbnail images.
  • The default thumbnail suffix is -thumb, but you can specify a different one e.g. thumb="-small" or thumb="_150x150".

To specify individual image files

1
2
3
4
5
{{< gallery >}}
  {{< figure src="image1.jpg" >}}
  {{< figure src="image2.jpg" >}}
  {{< figure src="image3.jpg" >}}
{{< /gallery >}}

Optional parameters:

  • caption-position - determines the captions’ position over the image. Options:
    • bottom (default)
    • center
    • none hides captions on the page (they will only show in PhotoSwipe)
  • caption-effect - determines if/how captions appear upon hover. Options:
    • slide (default)
    • fade
    • none (captions always visible)
  • hover-effect - determines if/how images change upon hover. Options:
    • zoom (default)
    • grow
    • shrink
    • slideup
    • slidedown
    • none
  • hover-transition - determines if/how images change upon hover. Options:
    • not set - smooth transition (default)
    • none - hard transition