Tumblr主题开发：如何获取发帖者与互动用户的头像和用户名？

一、帖子原作者信息展示（含原创/转帖场景） #

Tumblr模板系统自带原生标签，可直接获取帖子原作者的头像与用户名，无需额外逻辑判断——原创帖自动返回你的信息，转帖自动返回原发帖人信息。

模板代码示例：

<!-- 嵌入帖子结构头部，用于展示原作者信息 -->
<div class="post-author">
  <!-- 原作者头像，尺寸可替换为32/48/64/96/128 -->
  <img src="{PortraitURL-64}" alt="{PostAuthorName}" class="author-avatar">
  <!-- 原作者用户名，如需跳转主页可包裹{PostAuthorURL}链接 -->
  <a href="{PostAuthorURL}" class="author-name">{PostAuthorName}</a>
</div>

CSS样式示例：

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.author-name {
  font-weight: 550;
  color: #2d3748;
  text-decoration: none;
}
.author-name:hover {
  text-decoration: underline;
}

二、笔记互动用户信息展示 #

针对点赞/转帖你的帖子的用户，需通过{block:Notes}循环遍历所有笔记，再用专属标签提取互动用户的头像与用户名。

模板代码示例：

<!-- 帖子底部的笔记区域 -->
<div class="post-notes">
  {block:Notes}
    <div class="note-item">
      <!-- 互动用户头像 -->
      <img src="{NoteAuthorPortraitURL-48}" alt="{NoteAuthorName}" class="note-avatar">
      <!-- 互动动作+用户名，支持跳转用户主页 -->
      <span class="note-content">
        <a href="{NoteAuthorURL}" class="note-author">{NoteAuthorName}</a>
        {NoteAction}
      </span>
    </div>
  {/block:Notes}
</div>

CSS样式示例：

.post-notes {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}
.note-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}
.note-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.note-author {
  color: #2d3748;
  text-decoration: none;
}
.note-author:hover {
  text-decoration: underline;
}
.note-content {
  color: #4a5568;
}

关键注意点 #

• 头像尺寸可按需替换：Tumblr支持的头像尺寸参数为32、48、64、96、128，对应标签中的数字即可。
• 标签兼容性：确保你的主题模板未屏蔽{PostAuthor*}、{NoteAuthor*}系列标签，部分默认主题可能隐藏此类信息，需手动添加。

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