如何实现Tumblr IndexPage文章首图及标题跳转至Permalink？

替换为新版NPF兼容的模板代码 #

把你原来的IndexPage代码块换成以下内容，直接调用Tumblr官方提供的列表页专属标签，适配新版帖子格式：

{block:IndexPage}
  <a href="{Permalink}" class="post-preview">
    <!-- 渲染文章首图 -->
    {block:HasImages}
      {block:IndexImage}
        <img src="{IndexImageUrl}" alt="{PhotoAlt}" class="post-thumbnail">
      {/block:IndexImage}
    {/block:HasImages}
    <!-- 渲染文章标题 -->
    {block:Title}
      <h3 class="post-title">{Title}</h3>
    {/block:Title}
  </a>
{/block:IndexPage}

代码说明 #

• {block:HasImages}：判断文章是否包含图片，避免无图时出现空容器
• {block:IndexImage}：调用Tumblr为列表页优化的缩略图，自动适配展示尺寸，无需手动裁剪
• {block:Title}：仅在文章有标题时显示，避免无标题内容的空占位

配套简化CSS #

不需要原来复杂的隐藏规则，直接给预览组件设置基础样式即可：

.post-preview {
  display: block;
  margin-bottom: 1.8em;
  text-decoration: none;
  color: inherit;
}

.post-thumbnail {
  width: 100%;
  height: auto;
  max-height: 12em;
  object-fit: cover;
  border-radius: 4px;
}

.post-title {
  margin: 0.8em 0 0;
  font-size: 1.2em;
  font-weight: 600;
}

.post-preview:hover .post-title {
  color: #2c6e91; /* 替换成你需要的 hover 高亮颜色 */
}

旧代码失效原因 #

Tumblr升级NPF（New Post Format）后，{Body}标签返回的DOM结构、类名完全重构，原来针对.npf_row等旧类的CSS选择器无法匹配新结构，导致内容被错误隐藏或无法渲染。直接使用官方提供的{IndexImage}和{Title}标签是最稳定的方案，不受格式更新影响。

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