Создание статического веб-сайта HTML для макетов?
Моя жена хочет совместно использовать очень большую сумму старых школьных фотографий с ее друзьями.
Некоторые ее друзья предложили, чтобы она использовала iCloud, но я знаю, что могу настроить Apache и мое домашнее Интернет-соединение для обслуживания этих фотографий - или со статической ссылкой IP или предпочтительный с моим собственным доменным именем. Я, вероятно, сделаю это со своим собственным доменным именем.
Но это - презентация страницы, с которой я нуждаюсь в помощи.
Мне нужен некоторый простой путь, где я могу генерировать файл HTML, который покажет миниатюры на странице каждого школьного изображения, затем пользователь может нажать на изображение, чтобы видеть его полный размер и загрузить его.
Нет никакого активного содержания, никаких видео, никаких анимаций. Это - просто единственная веб-страница цели, чтобы разместить и обменяться старыми школьными фотографиями.
Я помню много лет назад был пакет программного обеспечения, названный "Netscape Communicator", и он позволит Вам создать простую веб-страницу, как я описал, но я ничего не могу найти теперь в репозитории, который поможет мне.
Предложите решение, которое позволит мне завершить процесс.
Спасибо, гео-
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>
