给hugo添加相册页面

今天逛木木博客的时候看到的，实现方法和效果都是简单又美观，搞起来~~

1，创建html页面

在主题文件下的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 }}

2，新增css样式代码

然后根据主题文件的结构添加样式，以我使用的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;
}

3，添加索引文件

然后到content下创建一个photos.md或者像我先创建一个photos文件夹再创建索引文件index.md贴上：

---
title: "相册"
layout: "photos"
---

完毕

这样就算造完了，在static创建一个photos把想要放的图片放进去，就会输出图片和图片名了

查看效果

看看我的相册