title | date | tags | slug | categories | lastmod | author | draft | ||
---|---|---|---|---|---|---|---|---|---|
Hugo简单添加相册页面 |
2022-04-13 17:54:48 +0800 |
|
413a754 |
折腾笔记 |
2022-04-13 17:54:48 +0800 |
甲拉古日 |
false |
今天逛木木博客的时候看到的,实现方法和效果都是简单又美观,搞起来~~
在主题文件下的layouts/_default/
目录下创建一个photos.html
,并贴上以下代码:
{{ define "main" }}
<div class="post">
<h2 class="post-title">{{.Title}}</h2>
</div>
<div class="page-photos">
{{ range (readDir "./static/photos") }}
<figure>
<img src="{{"photos/" | absURL }}{{ .Name }}" alt="{{ .Name }}" />
<figcaption>{{ .Name | replaceRE "(.*)[.].*" "$1"}}</figcaption>
</figure>
{{ end }}
</div>
{{ end }}
然后根据主题文件的结构添加样式,以我使用的PaperMod
为例,在assets/css/extended/blank.css
下修改(参考我的):
/* 相册 */
.page-photos figure figcaption{
margin: 0.1rem auto 1rem;
width: 36%;
border-top: 1px solid #bbb;
padding: 5px;
line-height: .8em;
}
.page-photos figure img{
box-shadow: 0 12px 40px rgba(0,0,0,.15);
border-radius: 8px;
margin: .5rem auto .3rem;
}
然后到content
下创建一个photos.md
或者像我先创建一个photos
文件夹再创建索引文件index.md
贴上:
---
title: "相册"
layout: "photos"
---
这样就算造完了,在static
创建一个photos
把想要放的图片放进去,就会输出图片和图片名了
看看我的相册