头像的大小和形状

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

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

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

谢谢。

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