个人资料中的可点击社交图标链接

weallwegot · 2020 年7 月 18 日 17:03

一个主题组件，包含可点击的社交媒体图标，适用于用户个人资料和用户卡片（如果您正在使用用户卡片目录主题组件）。

该组件 99% 的内容复制自 @LeoMcA 在本 Meta 讨论链接自定义用户字段到外部网站中提供的讨论和代码示例，以及 Namati 用户卡片个人资料主题。不过，我认为将其从帖子中提取出来并使其更具通用性会更有用。

注意事项

任何未为某项条目提供值的用户，其用户卡片/个人资料上将不会显示对应的图标。
Instagram 和 Twitter 的自定义用户字段仅期望填写用户名（不包含"@"），名称会自动附加到基础 URL 上。
我建议将带有图标的自定义用户字段设置为不在用户卡片上显示，因为同时显示文本和可点击的图标会显得有些冗余。这只是个人建议，主题组件不会自动隐藏它们。

站点设置

每个自定义字段名称条目应与您在 Discourse 实例中设置的自定义用户字段名称保持一致。默认情况下，该主题组件期望字段名称如下所示，但您当然可以更改它们。字符串区分大小写。

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'

祝您使用愉快！


	GitHub 仓库	Discourse-Social-Links-Clickable
	安装指南	如何安装主题或主题组件

davidkingham · 2020 年7 月 18 日 21:11

干得漂亮！我看到的唯一问题是头像徽章因此下移了。树形图标应该与我的头像重叠。

weallwegot · 2020 年7 月 20 日 00:11

啊，谢谢你的测试和发现这个问题。
我想我的社区里没有任何徽章，
我看了你的，我觉得是图标的大小让卡片变大了。我不是 CSS 专家，但我想我可能需要为有图标的用户条件性地应用一个头像边距。

davidkingham · 2020 年7 月 21 日 03:35

请注意，消息按钮和背景也会随之移动。我通过此方法修正了所有问题，但确实需要条件性地应用这些样式。

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}

bartv · 2020 年7 月 28 日 10:00

与 Follow 插件存在不兼容问题：此主题分类（TC）在我登录时工作正常，但当我以匿名用户身份访问网站时，用户卡片和用户个人资料页面出现异常。

更新：这与社交图标链接的主题分类无关。我将在 Follow 插件的话题中报告此问题。

在 /logs 中我看到：

NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’

cc @angus

Solari · 2020 年7 月 29 日 04:46

我很喜欢这个！我唯一的问题是字段名称和 URL 除了图标外，还会显示在卡片和个人资料中。如何隐藏字段/URL 的文本部分？

谢谢，
Ray

weallwegot · 2020 年7 月 29 日 04:54

嘿，好的，谢谢你试用

我刚刚在自定义字段下取消勾选了“在用户卡片上显示？”选项

weallwegot · 2020 年7 月 29 日 04:56

谢谢，是的，我也得出了同样的结论。不过我还没完全搞明白条件样式的应用，抱歉。我会试着找一位在这方面更有经验的人。

Solari · 2020 年7 月 29 日 04:56

啊哈，果然管用。这真不错，谢谢你编写了这个代码！

Ray

bartv · 2020 年8 月 2 日 09:07

请问也能支持 YouTube 吗？

weallwegot · 2020 年8 月 4 日 17:42

是的，现在应该已经更新了。我直接添加了名称。你可以在这里看到：

bartv · 2020 年8 月 8 日 06:59

运行效果非常好，但我注意到您硬编码了 YouTube 频道的使用方式。有些人可能更倾向于输入用户名（因为有些用户并没有频道）。我认为，如果允许用户直接输入 YouTube 链接，而不是频道名或用户名，体验会更好。

关于 Instagram 和 Twitter 字段的另一个想法：尽管已经添加了说明，提示用户只需在这些个人资料字段中输入用户名，但仍有不少人直接输入完整的 URL——我想在很多网站上，这种做法更为常见。这让我想到：您是否可以检测值中是否包含 ‘https://’，如果是，就不再为其添加 URL 基础路径？这样会让处理过程更加宽容和稳健。

weallwegot · 2020 年8 月 8 日 08:37

太好了，我已经采纳了这个建议，现在应该能同时处理这两种类型的输入了。

不幸的是，我不太清楚 YouTube 上“频道”和“用户资料”之间的区别。你建议 YouTube 的基础 URL 应该是什么？只是 https://youtube.com/ 吗？

bartv · 2020 年8 月 12 日 12:42

我认为有分别指向频道和用户的 /c/ 和 /u/ 链接。老实说，我觉得最好的办法就是让用户直接输入 URL，没必要做得太花哨？

weallwegot · 2020 年8 月 22 日 15:27

啊，确实，我会移除 YouTube 链接的“基础 URL”功能，这样用户就可以像 LinkedIn 那样输入完整的链接。感谢建议，已更新。

bartv · 2020 年8 月 23 日 15:37

太棒了，谢谢！

Solari · 2020 年8 月 23 日 17:25

这里是新手 – 我尝试自定义 CSS 来更改图标的字体颜色，因为我使用的是深色主题，但无法生效。

我看到类名是 iconic-user-fields，我猜是这样。我尝试更改该类的颜色，甚至加了 !important，但都没有效果。

有什么建议吗？

谢谢！
Ray

weallwegot · 2020 年11 月 22 日 21:26

非常抱歉回复得如此迟，希望您在此期间已经找到了解决方法。

我添加了一个新设置，允许您在主题配置面板中选择图标颜色。因此，您现在可以将其更改为白色或其他与深色主题更兼容的颜色。该功能现已可用！

renato · 2020 年11 月 25 日 14:18

首先，感谢这个主题组件我已在社区中启用，效果很不错。

不知是否还有其他人遇到这个问题，但在启用该主题组件后，移动端的用户卡片出现了部分重叠：

我使用了以下 CSS 作为移动端的临时解决方案，使卡片在没有提供社交链接时能保持与之前相同的样式：

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

这可能不是通用的解决方案，但在我们社区的相关场景下已经生效了。

renato · 2020 年11 月 28 日 21:37

我不确定这是否与最近的某些核心更改有关：如果登录我的账户，用户卡片上会显示链接；但如果未登录（我正在使用匿名标签页测试），控制台会输出错误，因为在这一行 userFields 未定义。在这种情况下，用户卡片仅显示头像和用户名，没有其他内容。

如果我在首次使用 userFields 之前检查其是否存在，就像我在这里测试的那样，卡片会完整显示，但社交图标链接不会出现。

其他人也遇到这个问题吗？

话题		回复	浏览量
Custom Header Links (icons) Theme component official , custom-header-icons	119	31653	2025 年8 月 4 日
Show Social Login Profiles on User Card Support	2	889	2021 年2 月 12 日
Daemonite Material Theme Theme	94	29748	2024 年2 月 1 日
Normalized Profile Links Theme component	5	239	2025 年1 月 4 日
Social Share Theme component official , social-share	25	15897	2026 年1 月 4 日

个人资料中的可点击社交图标链接

相关话题