头像的大小和形状

[Discourse]

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

安装此主题组件

由于这是由 Discourse 团队维护的 #官方 主题组件，您可以在 Meta 上的相应类别中提出 #支持、#Bug、ux 和 #功能 请求，并打上相应的主题组件标签。点击下方的链接即可开始。

 支持  Bug  UX  功能

功能

头像大小和形状 允许您轻松自定义网站上各种位置头像的大小和形状。

设置

名称	描述
最新头像大小	选择“最新”页面上的头像大小。默认值为小（25px）。要查看应用的变化，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
主题头像大小	选择主题页面上的头像大小。默认值为 45px。要查看应用的变化，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
头部头像大小	选择头部区域的头像大小。默认值为 32px。要查看应用的变化，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。
头部高度	选择头部的高度。选择必须基于 header_avatars_size + 10px。例如，如果 header_avatars_size 设置为 90px，则头部应为 100px。默认值为 60px。
顶部边距	选择距离头部的像素距离。默认值为 0px。
头像圆角	选择网站上头像的圆角。此设置将应用于所有头像，包括头部和用户卡片上的头像。0% 对应方形，50% 对应圆角。默认值为 50%。
移动头像大小	选择移动设备上主题页面的头像大小。最小值为 45px（默认），最大值为 80px。要查看应用的变化，请使用 ctrl+F5 或 cmd+shift+R 刷新页面。

额外详情：

• 最新头像大小 更改 /latest 页面上的头像大小。所有头像将显示至 medium 大小。从 large 开始，仅显示该主题最后发言用户的头像。
• 头部头像大小 在 60px 及以下尺寸效果良好。对于更大的头像尺寸，必须增加头部高度（头部高度），因此，使头部与页面其他元素保持距离的顶部边距（顶部边距）也必须相应增加。

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

开发历史

本主题组件的编写参考了以下指南：

• 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?

由我们托管？ 主题组件可在我们的标准版、商业版和企业版计划中使用。

[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)]

Great component, we were looking for it.

But it would be great to change the avatar flair size too, if you are using them in your site (as we do).

Thank you.

[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 元素的背景不随其余部分一起高亮就好了…