艺术相册（网页/组件）制作

先把照片文件夹整理成一本相册，再把相册变成能放进任何网页的组件。

第一步：整理照片

连续选择多个文件夹（或选一个里面有多个子文件夹的大文件夹），就会自动变成一个书架；只选一个就是单本相册。

相册名称

内页颜色

还没有照片。

点击上面的书试试：弹出、自动翻页、读完合上归位，中途可以点 ✕ 结束。

「单文件网页」是一个只有这本书的独立网页，双击就能看；「组件包」是要放进你自己网页用的，怎么放见下面的第三步。

点上面的「下载组件包（zip）」，解压后有两个文件：photo-album.js（相册的程序）和 album.json（你的照片和设置）。选一种放法，点开看步骤：

你做的是书架（多本相册）：下面所有代码里的标签名 photo-album 都换成 photo-shelf，其余（文件名、路径、方式 B 的粘贴步骤）都不变。

特点：网页里只写两行，另外两个文件放在旁边；以后换照片只要替换 album.json。不能双击打开，要放到网站上或用本地服务器。适合正式上线。

放文件。把 photo-album.js 和 album.json 复制到你的网页（比如 index.html）所在的同一个文件夹里。
粘贴两行。用编辑器打开你的网页，在 <body> 和 </body> 之间、想让相册出现的位置粘贴：
```
<script src="photo-album.js"></script>
<photo-album src="album.json"></photo-album>
```
保存。
预览或上线。不能直接双击（浏览器不允许本地网页读取 album.json，相册会不出现），请用下面任一办法：
- 上传到网站：把网页和两个文件传到同一个文件夹（GitHub Pages、Netlify、你自己的主机都可以），再用网址打开。
- 本机预览（VS Code）：安装扩展 Live Server，右键网页 → Open with Live Server。
- 本机预览（命令行）：在这个文件夹打开终端，运行 python3 -m http.server，浏览器访问 http://localhost:8000。

没出现？先检查三个文件是否在同一个文件夹、文件名是否一字不差（注意大小写）。如果放进了子文件夹（比如 album），路径也要写上：

<script src="album/photo-album.js"></script>
<photo-album src="album/album.json"></photo-album>

特点：最后只有 1 个 HTML 文件，双击就能打开，不需要服务器。网页会变大（相册多少 MB 就多大），以后换照片要重新粘贴。适合发给别人、离线看。

复制程序。用编辑器打开 photo-album.js，全选（Ctrl+A，Mac 用 ⌘A）并复制。
复制内容。再打开 album.json，同样全选、复制。里面是很长的一大段，这是正常的，编辑器可能会卡一下。
搭好框架。在网页里想让相册出现的位置写上 <photo-album id="album"></photo-album>，再在 </body> 的正上方加上下面这段。两个「（这里粘贴…）」分别换成刚才复制的内容（整句中文提示也要删掉）：
```
<script>
（这里粘贴 photo-album.js 的全部内容）
</script>
<script>
document.getElementById('album').data =
（这里粘贴 album.json 的全部内容）
;
</script>
```
保存，双击打开。

容易出错：① 单独一行的 ; 不能删；② 相册标签要在这两段脚本的上面；③ 程序在上，内容在下，不要贴反。

方式 A 和方式 B 有什么区别？简单说，A 是「网页、程序、照片分开放」，B 是「全部合成一个文件」。

方式 A 里，网页只多两行代码，程序和照片各自是一个文件，要与网页放同一个文件夹。好处是网页小、加载轻快，而且以后想换照片，只要替换 album.json 这一个文件，不用动网页。缺点是仅打开网页不显示组件相册，必须把文件夹部署到网站上，或者用本地服务器预览。所以它更适合要正式上线的网站。

方式 B 里，程序和照片都被粘贴进了网页，最后只剩一个 HTML 文件。好处是双击就能打开，发给别人、离线看都方便，不用担心少带了文件。代价是网页会变大（相册有多少 MB，网页就有多大），以后想换照片，就得重新复制粘贴一次。所以它更适合发给朋友、当礼物、或者只想要一个文件的场合。

如果还是拿不准：要放到网站上长期用，选 A；想双击就能看、方便转发，选 B。

用什么编辑器？Windows 用自带的「记事本」或免费的 VS Code。Mac 用自带的「文本编辑」时，要先点菜单「格式 → 制作纯文本」，否则保存后网页会坏掉。改之前，先复制一份网页当备份。

怎么调整书的大小？在 <photo-album> 标签上加一个 style，数字就是书的宽度（默认 160px），两种方式通用：

<photo-album src="album.json" style="--album-thumb-width:220px"></photo-album>