如何在Quarto博客网站中自动缩小缩略图尺寸？

内置简便方案 #

Quarto本身提供两种无需自定义脚本的解决方式：

1. 响应式图片自动生成
   Quarto默认会为文章中的图片生成多尺寸变体（通过srcset属性），即使插入的是高清图，首页缩略图会自动加载适配显示尺寸的小版本。只需确保在文章中使用标准Quarto图片语法并指定合理显示宽度：

![文章首图](high-res-image.jpg){width=1200}

项目配置中默认开启responsive-images: true（可在_quarto.yml的format.html下确认），该功能会自动生成300px、600px、900px等不同尺寸的图片文件，浏览器会根据容器大小选择加载最合适的版本。

2. 全局缩略图尺寸限制
   在_quarto.yml的博客配置中添加thumbnail-width，强制首页缩略图容器的最大宽度，配合响应式图片功能，进一步确保加载小尺寸图片：

blog:
  title: "我的博客"
  thumbnail-width: 300px

自定义脚本方案（内置方案不满足时） #

如果上述方法无法达到预期效果，你的脚本思路是可行的，核心步骤如下：

• 编写Python/R脚本，遍历所有文章的.qmd文件
• 检查YAML头部是否存在image字段，无则提取文章内第一张图片路径
• 使用图像处理库（如Python的Pillow、R的magick）生成指定宽度的缩略图（如300px）
• 将缩略图路径写入对应文章的YAMLimage字段
• 在_quarto.yml中配置pre-render钩子，让Quarto渲染前自动运行脚本：

project:
  type: blog
  pre-render: generate-thumbnails.py

示例Python脚本核心逻辑：

from pathlib import Path
from PIL import Image
import yaml
import re

for qmd_file in Path("posts").glob("*.qmd"):
    with open(qmd_file, "r", encoding="utf-8") as f:
        content = f.read()
    
    # 解析YAML头部
    if not content.startswith("---"):
        continue
    yaml_end_idx = content.find("---", 3)
    if yaml_end_idx == -1:
        continue
    
    front_matter = yaml.safe_load(content[3:yaml_end_idx])
    if "image" in front_matter:
        continue
    
    # 提取文章内第一张图片
    img_pattern = re.compile(r"!\[.*?\]\((.*?)\)", re.DOTALL)
    img_match = img_pattern.search(content[yaml_end_idx+3:])
    if not img_match:
        continue
    
    img_path = qmd_file.parent / img_match.group(1)
    if not img_path.exists():
        continue
    
    # 生成缩略图
    thumb_filename = f"thumb_{img_path.name}"
    thumb_path = img_path.parent / thumb_filename
    with Image.open(img_path) as img:
        img.thumbnail((300, float("inf")))  # 仅限制宽度，高度等比缩放
        img.save(thumb_path, optimize=True)
    
    # 更新文章YAML
    front_matter["image"] = thumb_filename
    updated_yaml = yaml.dump(front_matter, sort_keys=False)
    updated_content = f"---\n{updated_yaml}---\n{content[yaml_end_idx+3:]}"
    
    with open(qmd_file, "w", encoding="utf-8") as f:
        f.write(updated_content)

内容的提问来源于stack exchange，提问作者Matthew Law