HTML作品集

focal-point — HTML 作品集模板

作者 kripy

Focal Point 是一个基于 HTML 的极简照片画廊模板，把图片放进 images/ 目录后即可生成页面并部署。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

作者提供的预览

查看源码在新标签页打开

作者提供的预览首屏预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

纯 HTML 的极简照片画廊模板，图片放入 images/ 目录即可使用

lib/optimise.sh 自动压缩并缩放宽度超过 1920px 的图片（质量 80），跳过已优化文件

脚本会把新图片以带 alt 文本的 img 标签自动写入 index.html

README 提供 LLM 提示词，用于列出图片并改写 .image-container 内的 img 标签

macOS 可安装 pyobjc-framework-Vision，为相机生成的文件名自动生成描述性 alt 文本

代码采用 MIT 许可，可免费使用、修改、商用和分发

模板详细介绍

Focal Point 是一个纯 HTML 的极简照片画廊模板，定位为作品集式的图片展示页。使用方式是把 JPG/JPEG/PNG 图片放入 images/ 目录，然后通过脚本或手动方式把图片接入 index.html，再部署到静态托管平台。

模板自带 lib/optimise.sh 脚本，依赖 ImageMagick 与 Python 3，需要 Bash 环境（Windows 下通过 WSL 或 Git Bash 运行）。脚本会把宽度超过 1920px 的图片压缩并缩放到 1920px、质量 80，跳过已优化的图片，并自动把新图片以带 alt 文本的 img 标签写入 index.html。README 也提供了让具备项目访问权限的 LLM 来列出 images/ 目录并改写 index.html 中 .image-container 内 img 标签的提示词；在 macOS 上还可安装 pyobjc-framework-Vision，为 DSC、IMG 等相机生成的文件名自动生成描述性 alt 文本。

本地预览使用 python3 -m http.server 后访问 localhost:8000；部署方式包括 Vercel（命令行或拖拽项目文件夹）和 Netlify（拖拽项目文件夹到 app.netlify.com/drop）。无障碍方面另有 ACCESSIBILITY.md 说明其承诺、已知限制与问题反馈方式。代码采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需按各自许可单独核对。

HTML作品集

适合你的项目吗？

适用场景

个人摄影作品的静态图片画廊展示
把一批 JPG/PNG 图片快速整理成可部署的展示页面
需要自动压缩大尺寸图片并生成 img 标签与 alt 文本的图片站点
在 Vercel 或 Netlify 上通过拖拽项目文件夹完成部署的静态站点

适合人群

希望用纯 HTML 搭建照片画廊、不引入前端框架的开发者
有本地图片素材、需要脚本批量优化并接入页面的摄影或设计从业者
需要把静态图片站点部署到 Vercel 或 Netlify 的用户

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
把 JPG/JPEG/PNG 图片放入 images/ 目录
2
运行 ./lib/optimise.sh 前需安装 ImageMagick 与 Python 3，并在 Bash 环境（Windows 用 WSL 或 Git Bash）中执行
3
本地预览：运行 python3 -m http.server 后访问 http://localhost:8000
4
部署：Vercel 可用命令行或拖拽项目文件夹，Netlify 可拖拽项目文件夹到 app.netlify.com/drop
5
演示图片、字体、图标等第三方素材需按各自许可单独核对，不能仅凭代码的 MIT 许可判断

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

运行 lib/optimise.sh 优化脚本需要本地安装 ImageMagick 与 Python 3；未安装时无法使用自动压缩与自动写入 img 标签功能。
Windows 用户必须通过 WSL 或 Git Bash 等 Bash 环境运行优化脚本，普通 PowerShell/CMD 无法直接执行。
为相机生成文件名自动生成描述性 alt 文本的功能仅限 macOS，需额外安装 pyobjc-framework-Vision，其他平台不可用。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Requires [ImageMagick](https://imagemagick.org) and Python 3.
README 原文

The script requires Bash — run it via [WSL](https://learn.microsoft.com/windows/wsl) or [Git Bash](https://git-scm.com/downloads).
README 原文

pip3 install pyobjc-framework-Vision
README 原文

https://github.com/kripy/focal-point/blob/main/LICENSE https://github.com/kripy/focal-point/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 68 / 100
技术栈: HTML
网站类型: 作品集

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-05-17
截图检查日期: 2026-10-01

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: e6f9f26628751989f2360092845322563898c23c3dda41ff95a49017bfabf3fb

2026-10-01T15:36:43.034Z

来源文件 / 仓库

# Focal Point

![Focal Point gallery preview](images/mooks.jpg)

A minimal photo gallery template. Drop in your images and deploy.

## Usage

1. Put your JPG/JPEG/PNG images in the `images/` folder
2. Run the setup script (or wire up images manually)
3. Deploy

## Setup script

Requires [ImageMagick](https://imagemagick.org) and Python 3.

**macOS**
```bash
brew install imagemagick
```

**Linux (Debian/Ubuntu)**
```bash
sudo apt install imagemagick python3
```

**Linux (Fedora/RHEL)**
```bash
sudo dnf install imagemagick python3
```

**Windows**
```powershell
winget install ImageMagick.ImageMagick Python.Python.3
```
The script requires Bash — run it via [WSL](https://learn.microsoft.com/windows/wsl) or [Git Bash](https://git-scm.com/downloads).

---

```bash
./lib/optimise.sh
```

This will:
- Compress and resize any images over 1920px wide (quality 80)
- Skip images already optimised
- Add new images to `index.html` automatically with alt text

## AI naming

### Wire up images with an LLM

Put your images in `images/` and give this prompt to any LLM with access to your project:

```
List all files in the images/ directory, then update index.html to display them.
Replace the existing <img> tags inside <div class="image-container"> with one <img> tag
per image file. Set src to the relative path (e.g. images/photo.jpg or images/photo.png) and write a
meaningful, descriptive alt attribute for each one that describes the image content,
not just the filename. For camera-generated names (DSC*, IMG*, etc.), describe what
the image likely depicts based on any context available.
```

### Better alt text for camera files (macOS)

For camera-generated filenames (DSC*, IMG*, etc.), install the macOS Vision framework to generate descriptive alt text automatically:

```bash
pip3 install pyobjc-framework-Vision
```

## View locally

Install Python from [python.org](https://www.python.org/downloads/) if you don't have it, then:

```bash
python3 -m http.server
```

Then open [http://localhost:8000](http://localhost:8000).

## Deploy

### Vercel

```bash
npm i -g vercel
vercel
```

Or drag the project folder into [vercel.com/new](https://vercel.com/new).

### Netlify

Drag the project folder into [app.netlify.com/drop](https://app.netlify.com/drop). Done.

## Accessibility

See [ACCESSIBILITY.md](ACCESSIBILITY.md) for our commitment, known limitations, and how to report issues.

## License

[MIT](LICENSE)

反馈内容错误