头像大小和形状

[Discourse]

	简介	头像大小和形状 允许您轻松更改网站上头像的大小和形状。
	预览	在 Discourse 主题创建器上预览
	仓库链接	https://github.com/discourse/discourse-avatar-component
	初次使用 Discourse 主题？	Discourse 主题使用入门指南

安装此主题组件

由于这是由 Discourse 团队维护的 official 主题组件，Support（支持）、Contribute > Bug（错误报告）、Contribute > UX（用户体验）和 Contribute > Feature（功能建议）请求可以在 Meta 上的相应类别中提出，并标记相应的主题组件标签。点击下方链接发起请求。

 支持  错误报告  用户体验  功能建议

功能

头像大小和形状 允许您在网站的不同位置轻松自定义头像的大小和形状。

设置

名称	描述
latest 头像大小	选择 latest 页面的头像大小。默认值为 small（25px）。要使更改生效，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
topic 头像大小	选择 topic 页面的头像大小。默认值为 45px。要使更改生效，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
header 头像大小	选择 header 的头像大小。默认值为 32px。要使更改生效，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
header 高度	选择 header 的高度。该值应基于 header_avatars_size + 10px 进行选择。例如，如果 header_avatars_size 设置为 90px，则 header 高度应为 100px。默认值为 60px。
margin top	选择距离 header 的间距（像素）。默认值为 0px。
avatars border radius	选择网站上头像的圆角半径。此设置将应用于所有头像，包括 header 上的头像和用户卡片（user-card）上的头像。0% 对应方形，50% 对应圆形。默认值为 50%
mobile 头像大小	选择移动端 topic 页面的头像大小。最小值为 45px（默认），最大值为 80px。要使更改生效，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。

额外说明：

• latest avatar size 更改 /latest 页面的头像大小。所有头像在 medium 尺寸之前均可见。从 large 开始，仅显示最后在该主题发帖的用户的头像。
• header avatar size 在 60px 尺寸以内效果良好。对于更大尺寸的头像，必须增加 header 的高度（header height），并且随之增加 header 与页面其他元素之间的间距（margin top）。

通知气泡（主题和私信）的垂直位置保持不变。这些气泡仅会随头像大小水平移动。

开发历史

此主题组件的编写灵感来源于以下指南：

• How to increase avatars size on posts without making them blurred
• https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606
• How to increase Header avatar size?

由我们托管？ 主题组件可在我们的 Standard、Business 和 Enterprise 计划中使用。

[davidkingham]

How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.

[ariznaf (fernando)]

很棒的组件，我们一直在寻找它。

但如果您在网站上使用头像标识（像我们一样），最好也能调整其大小。

谢谢。

[orchardstreet]

太酷了
不过我希望能把主题头像大小设置为 53

另外，这是否适用于某些首页分类布局中主题发帖人 div 里的头像？看起来并不适用，但如果能适用那就太好了。

[zuker (Matías)]

@ariznaf

很棒的组件，我们一直在寻找它。

不过，如果您在网站上使用了头像徽章（我们也是这样做的），如果能调整头像徽章的大小就更好了。

谢谢。

你找到解决方法了吗？

[jrgong]

@dax 我发现了一个小问题，它与 Quick Messages 插件发生了冲突。
以下 CSS 代码也针对了 Quick Messages 插件的徽章通知：

.d-header-icons .unread-private-messages {
    right: auto;
    left: -10%; /* <--- 这就是罪魁祸首 */
}

或许可以在 CSS 选择器中添加一些 #… 元素。

[Joshua_Kogan]

你找到移动版的解决方案了吗？

[davidkingham]

不，遗憾的是，我从未找到方法来实现它。

[dax (Daniela)]

@davidkingham

我该如何通过此方法在移动设备上更改主题头像的大小？

如果本周有时间，我会查看一下。

[dax (Daniela)]

@davidkingham

我该如何用这个在移动设备上更改主题头像的大小？

@zuker

你找到解决办法了吗？

现已新增一项设置，可将移动设备上的头像尺寸从 45px（默认值）配置为 80px。

请更新组件以查看新设置。

[davidkingham]

谢谢你，Daniela，我还有一个建议。如果能提供一个选项，让回复头像在 large 或 extra_large 尺寸下保持开启，以便我通过 CSS 调整大小，那就太好了。或者，在插件中提供一个直接调整回复头像大小的选项。我正在尝试实现这一点，但显然，放大中等尺寸的头像会导致大头像变得模糊。

[Denis_Heraud]

插件很棒！谢谢！

@Dax 目前我发现的唯一问题是标题栏颜色较深。悬停效果设置为白色，在搜索按钮和汉堡菜单上表现正常，但当头像设置为稍大尺寸时，悬停区域的大小比头像小。我该如何解决这个问题？

[dax (Daniela)]

此组件不会以任何方式更改网站颜色，一定是您使用的其他主题覆盖了背景颜色。

[ariznaf (fernando)]

这是一个很棒的组件。
它让你可以轻松控制头像的大小和宽高比，而无需修改主题的 CSS（这可能会在主题升级时引发问题）。

不，颜色没有变化。

我们一直在使用它，并且对它很满意。

[Denis_Heraud]

@dax 也许我表达得不够清楚。问题不在于颜色，而在于容器的大小。如果你将鼠标悬停在此处 meta 页面右上角你自己的头像图标上，会出现一个带有 :hover 属性的彩色方块，而且该方块比头像更大。

然而，如果我通过这个插件放大头像，:hover 方块的大小现在反而比头像小，看起来有点奇怪。

[dax (Daniela)]

通过更改该 div 的高度，另外两个图标也必须重新定位。因此，我之前倾向于不这样做。目前，我只将 div 在悬停时的颜色设为透明。

Remove background on header avatar

[Denis_Heraud]

难道不能直接用 CSS 针对

.header-dropdown-toggle #current-user

进行设置吗？

[dax (Daniela)]

不，没那么简单。

我会在接下来的几个小时内查看。

[Denis_Heraud]

我想在 CSS 中实现这个效果，但由于所有标题图标都使用相同的类：

<li class="header-dropdown-toggle">

它们似乎要么全部激活，要么全部不激活。您是如何让头像图标在 :hover 时不触发的呢？

[Denis_Heraud]

顺便一提，我已经在 CSS 中实现了一个不错的效果：当鼠标悬停在头像上时显示白色边框（:hover 状态）。现在，如果能让 li 元素的背景不随其余部分一起高亮就好了…