如何将 avatar_template 移动到主题正文内

开发
1

您好，我目前正在为我的社区制作一个自定义主题。我正试图将用户头像移到主题正文中（我会发布截图来展示它目前的样子以及我想要的样子）。我正在使用该插件来查看 Discourse 的 outlets，但我没有看到可以实现此目的的 outlet。一些支持将非常有帮助！

当前：

A test reply to a message, suggesting it looks good. (Captioned by AI)
A test reply to a message, suggesting it looks good. (Captioned by AI)849×215 11.8 KB

想要：

image
image1099×540 97.6 KB

1 个赞
2

您的第二个 SS 想要。这是在另一个讨论站点上吗？

如果是这样，您或许可以使用浏览器的“检查元素”功能查看他们是如何做到的。

3

是的，是这样，https://forums.unrealengine.com/ 我尝试这样做，但没弄明白。

4

你好 :wave:
这是一个我刚做的例子，可能不完美，但你可以自定义……

桌面 / CSS

.topic-post {
  margin-bottom: 1em;
  > article > .row {
    background-color: var(--secondary);
    box-shadow: 0 0 0 1px var(--primary-low);
    border-radius: 1em;
    padding: 1em;

    .topic-avatar {
      border: none;
    }
    .topic-body {
      background: none;
      border: none;
      box-sizing: border-box;
      width: 100%;
      padding: 1em;
    }
  }

  .post-menu-area {
    margin: 1em 0 0;
  }
}

// 私信
.archetype-private_message {
  .regular.contents {
    border: none;
  }

  .topic-map {
    padding-left: 1em;
    padding-bottom: 0.25em;
  }

  .topic-post {
    margin-bottom: 1em;
  }

  // 使用当前用户帖子高亮显示整行
  .topic-post {
    &.current-user-post {
      > article > .row {
        background: var(--tertiary-very-low);
        box-shadow: 0 0 0 1px var(--tertiary-very-low);
      }
    }
    .regular.contents {
      background: none;
      border-color: none;
    }
  }
}

// 时间线
.topic-navigation.with-timeline {
  width: 150px;
}
.container.posts {
  // 确保帖子保持全宽度
  grid-template-columns: 1fr auto;

  .topic-navigation {
    margin-right: -2em;
    padding-left: 2em;
  }
}

// 主题图
.topic-map {
  &.--op,
  &.--bottom {
    padding: 1em 1em 0;
    max-width: 100%;
    border-top: none;
    border-bottom: none;
  }
}

// 小动作
.small-action {
  .topic-avatar,
  .small-action-desc {
    border-top: none;
    padding-top: 0;
  }
  .topic-avatar:empty {
    display: none;
  }
  .small-action-desc {
    width: calc(100% - 1em);
  }
}

// 帖子底部
.topic-area {
  > .loading-container {
    width: 100%;
  }
}
.topic-status-info,
.topic-timer-info {
  max-width: 100%;
}
6 个赞
5

你好，Don！非常感谢你的示例。它将非常有帮助，我会将其添加到我的主题中。

1 个赞