如何在Blogger自定义主题模板中访问博客文章特定数据（图片Alt/Title属性获取）

阿华AIGC实验室

2026-4-29

解决Blogger主题中首页文章图片继承原alt/title属性的问题

嘿，这个问题我之前帮朋友折腾过，正好能给你说清楚怎么解决～你之前试的data.post.featuredImage.alt没用，核心原因是**data:post.featuredImage本质上只是一个字符串（图片的URL），并不是包含元数据的对象**——很多自定义主题里的这个变量其实只是从文章首图的src提取出来的，所以根本没有alt/title属性可以调用。

下面给你两种靠谱的解决方案，按优先级来选：

方案1：利用Blogger内置的文章图片元数据集合（推荐）

Blogger会自动抓取文章里所有图片的属性，存到data:post.images这个数组对象里，每个元素都包含src、alt、title这些你需要的属性。你可以直接调用这个集合里的首图数据，替换掉原来的代码：

<!-- 替换你原来的img标签代码 -->
<b:if cond='data:post.images'>
  <img 
    expr:src='data:post.images[0].src' 
    <!-- 如果原图片有alt就用原alt，没有就 fallback 到文章标题 -->
    expr:alt='data:post.images[0].alt ?: data:post.title' 
    <!-- 同理处理title属性 -->
    expr:title='data:post.images[0].title ?: data:post.title'
  />
<b:else/>
  <!-- 没有图片时的 fallback 内容，可根据需求修改 -->
  <img src='https://你的默认图地址.jpg' alt='暂无图片' title='暂无图片'/>
</b:if>

为什么这个方案靠谱？

不用写复杂的正则，完全利用Blogger原生的模板数据，稳定性更高
自动处理“原图片没有alt/title”的情况，用文章标题做兜底，不会出现空属性

方案2：用正则从文章内容中提取（备选）

如果你的主题比较旧，或者Blogger没有正确抓取到图片的元数据（比如有些特殊的图片插入方式），可以用正则表达式直接从文章的HTML内容里提取第一张图片的alt和title属性：

<!-- 先定义变量存储提取到的alt和title -->
<b:with value='data:post.body.match(&quot;&lt;img[^&gt;]+alt=[&quot;&apos;]([^&quot;&apos;]+)[&quot;&apos;]&quot;)' var='extractedAlt'>
  <b:with value='data:post.body.match(&quot;&lt;img[^&gt;]+title=[&quot;&apos;]([^&quot;&apos;]+)[&quot;&apos;]&quot;)' var='extractedTitle'>
    <img 
      expr:src='data:post.featuredImage' 
      expr:alt='data:extractedAlt ? data:extractedAlt[1] : data:post.title' 
      expr:title='data:extractedTitle ? data:extractedTitle[1] : data:post.title'
    />
  </b:with>
</b:with>