内容摘要：去年帮朋友搭博客，他用 Typecho 快三年，一直卡在图片展示上。默认主题把配图压成缩略图塞在摘要里，点进去才看到大图，手机端更糟——图片直接撑破容器。他问我有没有办法只改模板不改程序，我扔过去一个

去年帮朋友搭博客，图题模他用 Typecho 快三年，片主一直卡在图片展示上。图题模默认主题把配图压成缩略图塞在摘要里，片主点进去才看到大图，图题模手机端更糟——图片直接撑破容器。片主他问我有没有办法只改模板不改程序，图题模我扔过去一个自己改的片主图片主题，三天后他发消息说阅读量涨了四成。图题模这事让我意识到，片主Typecho 的图题模图片主题模板不是锦上添花，而是片主很多视觉类博客的刚需。

Typecho 默认的图题模模板体系其实挺克制，index.php 负责列表，片主post.php 管详情，图题模图片处理全靠插件或手写 CSS。问题出在列表页：官方主题用 the_excerpt() 输出纯文本摘要，图片被过滤得干干净净。你要做图片站，得先干掉这个函数，换成 $this->content 配合正则截取第一张图。我习惯在 functions.php 里加个 getFirstImage()，用 preg_match 抓 <img> 标签的 src，没有图就回退到随机缩略图。这段代码不超过十行，但能决定列表页是图文并茂还是干巴巴的文字链。

模板文件的结构得跟着改。index.php 里循环输出文章时，把 <div class="post"> 改成 <article class="card">，图片容器用 aspect-ratio: 16/9 锁死比例，object-fit: cover 裁切。别用固定宽高，移动端会崩。我见过有人写死 width="300" height="200"，结果 iPad 上图片被拉成马脸。CSS 里加一行 img { max-width: 100%; height: auto; } 是底线，但图片主题要更狠——直接上 picture 标签配合 srcset，让浏览器自己选尺寸。Typecho 附件系统支持多尺寸缩略图，在模板里调 $this->attachments 就能拿到不同宽度的 URL。

详情页反而简单。post.php 里把 <?php $this->content(); ?> 外面包一层 <div class="gallery">，CSS 用 display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;。图片自动排成瀑布流，点开用纯 CSS 的 :target 做灯箱，不依赖 JavaScript。我试过 Fancybox 和 LightGallery，功能全但拖慢加载，一个 200KB 的 JS 文件换来的动画效果，不如把图片本身压到 100KB 以内。Typecho 有 Attachment 类可以生成 WebP，在 themeInit 里挂个钩子，上传时自动转格式，比前端折腾强。

有个坑得提前说：Typecho 的 theContent() 会过滤 style 属性，你在编辑器里写 style="width:50%" 会被吃掉。解决办法是在 functions.php 里用 Content::plugin() 注册自定义解析，或者干脆放弃行内样式，全部交给模板 CSS 控制。我选后者，编辑器只负责插图，排版归主题管，分工明确。

图片主题的缓存策略也值得聊两句。Typecho 默认不生成静态 HTML，每次请求都查数据库。图片站流量上来后，SELECT 查询能把 MySQL 拖垮。装个 TeCache 或者 Typecho-Plugin-Cache，把列表页和详情页缓存成文件，命中率能到 90% 以上。我朋友那个站日 PV 两千左右，开缓存前 TTFB 是 800ms，开完降到 120ms。图片本身丢给 CDN，又拍云或七牛都行，Typecho 有现成插件改附件 URL 前缀。

模板改到最后，你会发现最麻烦的不是代码，是取舍。图片站要的是快和清晰，但高清图必然大。我的做法是列表页用 400px 宽的缩略图，详情页用 1200px 主图加点击查看原图。Typecho 附件支持自定义字段，上传时勾选“生成多尺寸”，模板里按需调用。这套方案不完美——比如 GIF 动图会被压成静态——但对付 90% 的图片博客够用了。

如果你也在用 Typecho 做图片站，别急着找现成主题。先把自己最常看的三个图片博客截图，分析它们的列表页布局、图片比例、间距和字体。然后打开 index.php，从删掉 the_excerpt() 开始改。改到第五个版本，基本就顺眼了。