个人站代码解析：Hugo + PaperMod + Cloudflare Pages

luostratus.cn/
├── hugo.yaml                  # 站点配置
├── archetypes/
│   ├── default.md              # 普通文章模板
│   └── gallery.md              # 画廊模板
├── content/
│   ├── about.md
│   ├── posts/                  # 博客文章
│   └── gallery/
│       ├── _index.md           # 画廊主页（branch bundle）
│       └── *.png / *.jpg       # 图片资源（bundle 成员）
└── layouts/
    ├── gallery/
    │   ├── list.html            # ★ 画廊核心：排序 + 瀑布流
    │   └── single.html          # 画廊详情
    └── partials/
        ├── extend_head.html     # 全站 CSS + 动效
        └── extend_footer.html   # 返回顶部 + 导航 JS

baseURL: https://luostratus.cn/
locale: zh-cn
theme: PaperMod

# 分页 —— 注意版本兼容性
pagination:
  pagerSize: 10

# 代码高亮
markup:
  highlight:
    style: catppuccin-macchiato
    noClasses: false

# JSON 输出是 PaperMod 搜索功能必需的
outputs:
  home:
    - HTML
    - RSS
    - JSON

params:
  ShowReadingTime: true
  ShowToc: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowPostNavLinks: true
  dateFormat: "2006-01-02"     # Go 诞生日 = YYYY-MM-DD

content/gallery/
├── _index.md          ← Branch Bundle，可通过 .Resources 访问所有文件
├── 00-校色卡.png       ← 固定首位
├── 2026-07-01_15.23.21.png
├── IMG_20250712_212757.jpg
└── ...

{{ $dateStr := "—" }}

// 第一层：匹配 YYYY-MM-DD 格式（截图类文件）
{{ $m1 := findRE `^(\d{4}-\d{2}-\d{2})` $filename 1 }}

// 第二层：匹配 20xxMMDD 格式
//        关键是用 "20" 开头限定，避开 Unix 时间戳
{{ $m2 := findRE `(20\d{6})` $filename 1 }}

输入：34 张图片（含日期的 N 张 + 无日期的 M 张 + 1 张固定图）

1. 分离
   ├── $pinned ← .Resources.GetMatch "00-校色卡*"
   ├── $dated  ← 有日期的图片（格式化为 {r: resource, d: "2026-07-01"}）
   └── $undated ← 无日期的图片

2. 排序
   ├── $dated = sort $dated "d" "desc"     // 新 → 旧
   └── $undated = shuffle $undated          // 随机

3. 穿插间隔
   ├── $gap = len($dated) / (len($undated) + 1)
   └── 每隔 $gap 张已排序图片，插入 1 张无日期图片

4. 渲染
   ├── 首先渲染 $pinned（固定首位，不参与排序）
   └── 循环渲染排序后的穿插序列

{{ $.Scratch.Set "di" 0 }}           // 初始化排序计数
{{ $.Scratch.Set "ui" 0 }}           // 初始化无日期计数
{{ $.Scratch.Set "slot" $gap }}      // 下一次插入槽位

{{ range $idx := seq (add $dt $ut) }}
  {{ $di := $.Scratch.Get "di" }}    // 读取当前状态
  {{ $ui := $.Scratch.Get "ui" }}
  ...
  {{ $.Scratch.Set "di" (add $di 1) }} // 更新状态（仅在 Scratch 作用域内）
{{ end }}

.gallery-masonry {
  column-count: 2;           /* CSS3 多列布局，天然瀑布流 */
  column-gap: 20px;
}
.gallery-item {
  break-inside: avoid;       /* 防止图片在列间断裂 */
}
.gallery-item img {
  width: 100%;
  height: auto;              /* 保持原始宽高比，不裁切 */
  border-radius: 8px;
  cursor: zoom-in;
}

// 直接 toggle class，不需要额外的 overlay 元素
onclick="this.classList.toggle('zoomed')"

/* 放大状态：fixed 定位 + 超大阴影模拟遮罩 */
.gallery-item img.zoomed {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw; max-height: 92vh;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.8);  /* 遮罩 */
  z-index: 1000;
  cursor: zoom-out;
}

/* 类按钮化的链接 */
#menu a {
  padding: 6px 14px;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}

/* hover：半透明底色浮现 */
#menu a:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translateY(-1px);
}

/* 当前页：底部指示横条 */
#menu a[aria-current="page"]::after {
  content: '';
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--primary);
  transition: width 0.3s;       /* hover 时向外伸展 */
}

// 对比 URL 路径，标记匹配的导航项
const currentPath = window.location.pathname.replace(/\/$/, '') || '/';
document.querySelectorAll('#menu a').forEach(link => {
  const linkPath = new URL(link.href).pathname.replace(/\/$/, '') || '/';
  if (linkPath === currentPath) {
    link.setAttribute('aria-current', 'page');
  }
});

本地编写 → git push → GitHub
                         ↓
              Cloudflare Pages 自动触发
                         ↓
              Hugo build（~1min）
                         ↓
              全球 330+ 节点分发
                         ↓
              luostratus.cn 可访问