我的妻子想和她的朋友分享大量的旧学校照片。
她的一些朋友建议她使用 iCloud,但我知道我可以设置 Apache 和我的家庭互联网连接来提供这些照片 - 要么使用静态 IP 链接,要么最好使用我自己的域名。我可能会用我自己的域名来做这件事。
但我需要有关页面呈现方面的帮助。
我需要一些简单的方法来生成一个 HTML 文件,该文件将在每张学校图片的页面上显示缩略图,然后用户可以单击图片以查看其全尺寸并下载。
这里没有动态内容,没有视频,没有动画。它只是一个用于存放和分享老同学照片的单一用途网页。
我记得很多年前有一个名为“Netscape Communicator”的软件包,它可以让你创建一个像我描述的那样简单的网页,但现在我在存储库中找不到任何可以帮助我的东西。
请提出一个可以让我完成该过程的解决方案。
谢谢你,geo
答案1
可以相当轻松地创建包含一堆图像缩略图和链接的简单 HTML 文件。假设:
- HTML 文件与图像位于同一目录
所有图像都具有某些属性,这使得在命令行中循环它们变得容易(
.jpg
例如,所有扩展名为 的文件)。这样可以更轻松地为他们创建缩略图。您应该使用缩略图,这样人们就不会在打开您的页面时下载整套图片。
适应这个帖子:
printf "%s\n" '<!DOCTYPE html><meta charset=utf-8><title>Images</title>' > images.html
mkdir thumbs
for i in *.jpg
do
convert "$i" -thumbnail 100 "thumbs/$i"
printf '<a href="%s"><img src="%s" alt="%s"></a>\n' "$i" "thumbs/$i" "$i"
done >> images.html
现在,images.html
具有最低有效的 HTML5,可显示一组缩略图并链接到缩略图的图像。将您的 Apache 实例指向目录并根据需要提供服务。
您可能可以尝试用它制作一张表格或类似的东西,但这应该足够了。
使用来自以下图像的示例/usr/share/background
:
$ head images.html
<!DOCTYPE html><meta charset=utf-8><title>Images</title>
<a href="160218-deux-two_by_Pierre_Cante.jpg"><img src="thumbs/160218-deux-two_by_Pierre_Cante.jpg" alt="160218-deux-two_by_Pierre_Cante.jpg"></a>
<a href="Black_hole_by_Marek_Koteluk.jpg"><img src="thumbs/Black_hole_by_Marek_Koteluk.jpg" alt="Black_hole_by_Marek_Koteluk.jpg"></a>
<a href="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"><img src="thumbs/Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg" alt="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"></a>
<a href="clock_by_Bernhard_Hanakam.jpg"><img src="thumbs/clock_by_Bernhard_Hanakam.jpg" alt="clock_by_Bernhard_Hanakam.jpg"></a>
<a href="Dans_ma_bulle_by_Christophe_Weibel.jpg"><img src="thumbs/Dans_ma_bulle_by_Christophe_Weibel.jpg" alt="Dans_ma_bulle_by_Christophe_Weibel.jpg"></a>
<a href="Flora_by_Marek_Koteluk.jpg"><img src="thumbs/Flora_by_Marek_Koteluk.jpg" alt="Flora_by_Marek_Koteluk.jpg"></a>
<a href="Icy_Grass_by_Raymond_Lavoie.jpg"><img src="thumbs/Icy_Grass_by_Raymond_Lavoie.jpg" alt="Icy_Grass_by_Raymond_Lavoie.jpg"></a>
<a href="Night_lights_by_Alberto_Salvia_Novella.jpg"><img src="thumbs/Night_lights_by_Alberto_Salvia_Novella.jpg" alt="Night_lights_by_Alberto_Salvia_Novella.jpg"></a>
<a href="passion_flower_by_Irene_Gr.jpg"><img src="thumbs/passion_flower_by_Irene_Gr.jpg" alt="passion_flower_by_Irene_Gr.jpg"></a>