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

**URL:** <https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136>\
**Category:** Theme component\
**Created:** [2020年七月18日 17:03 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136 "2020-07-18T17:03:21Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2020年十二月12日 19:20 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/22 "2020-12-12T19:20:14Z")

</div>

> [@anon82467725](#):
>
> 能否也添加对 Discord 的支持？

好的——刚刚已将 Discord 作为图标提供给用户。请更新！

> [@anon82467725](#):
>
> 如果可以的话，我希望用户只能设置特定的社交媒体账号（在我的情况下是 Discord）。

是的，目前就是这样工作的。你只需要创建一个名为 `Discord` 的自定义用户字段即可。

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2020年十二月12日 22:00 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/23 "2020-12-12T22:00:36Z")

</div>

> [@renato](#):
>
> 但如果已登出（我正在用匿名标签页测试），它会向控制台输出错误。

是的，我从未见过在任何允许匿名用户访问 `/u` 页面的社区类型中使用此功能，因此我甚至无法确定这是否是预期行为。

欢迎提交任何有助于让此功能也适用于此类社区的 PR。抱歉无法提供更多帮助！

---

<div class="post-metadata">

**Author:** ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)\
**Post date:** [2020年十二月12日 22:04 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/24 "2020-12-12T22:04:55Z")

</div>

> [@weallwegot](#):
>
> 是的——刚刚为 Discord 添加了用户图标。请更新！

太棒了！接下来要不要加上 Steam（这对视频游戏论坛来说会非常棒）？😄

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2020年十二月13日 02:42 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/25 "2020-12-13T02:42:39Z")

</div>

没问题，这个也很简单：欢迎随时更新

> <https://github.com/weallwegot/discourse-social-links-clickable/pull/4/commits/8ad8299ebba441da7e7f8c05b038e32afc27d1b4>

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2020年十二月13日 04:02 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/26 "2020-12-13T04:02:35Z")

</div>

另附一个已知问题：

如果在目录中使用任一筛选器：

 ![Screen Shot 2020-12-12 at 10.50.53 PM](https://global.discourse-cdn.com/meta/original/3X/a/1/a16eb915a8923fac1cd7cb77b7edb18b74666bc7.png)

那么在筛选后加载用户时，社交图标会出现错乱。通常表现为每个卡片上的社交图标链接都变成了完全相同的链接。我不确定为什么会发生这种情况，但特此告知正在使用此功能的朋友们。如果有任何人知道原因或解决方法，将不胜感激！

希望将此内容添加到主帖中。

---

<div class="post-metadata">

**Author:** ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)\
**Post date:** [2020年十二月14日 00:18 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/27 "2020-12-14T00:18:16Z")

</div>

太好了！谢谢！Twitch 可以吗？

---

<div class="post-metadata">

**Author:** ![Óscar\_David\_Sánchez](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/%C3%B3scar_david_s%C3%A1nchez/32/181941_2.png) [@Óscar\_David\_Sánchez](https://meta.discourse.org/u/%C3%93scar_David_S%C3%A1nchez)\
**Post date:** [2021年一月2日 12:11 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/28 "2021-01-02T12:11:20Z")

</div>

我在我的 Discourse 安装中也发现了同样的问题。当启用主题组件时，匿名访客会发现用户个人资料页面损坏。

我没有安装 Follow 插件，所以我认为这似乎是主题组件（TC）与 Discourse 核心之间的不兼容问题？

也许这也与 @renato 最近评论的问题有关。

---

<div class="post-metadata">

**Author:** ![cookieman768](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cookieman768/32/118511_2.png) [@cookieman768](https://meta.discourse.org/u/cookieman768)\
**Post date:** [2021年二月12日 19:27 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/29 "2021-02-12T19:27:49Z")

</div>

用户通过指定的社交提供商登录时，是否可以设置这些信息？我想确保人们无法冒充他人。另外，对于 Discord，将其设为链接并不合理，因为 Discord 没有用户个人资料页面。我该如何让它显示图标和名称？此外，是否可以为每个社交提供商设置不同的样式，而不是全部使用相同的颜色？我希望 Discord 使用其标志性的“Blurple”（蓝紫色），这样在深色和浅色主题下都能很好地显示。不过这个插件真的很棒！

---

<div class="post-metadata">

**Author:** ![m4ur1c3](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/m4ur1c3/32/267597_2.png) [@m4ur1c3](https://meta.discourse.org/u/m4ur1c3)\
**Post date:** [2021年四月14日 18:56 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/30 "2021-04-14T18:56:42Z")

</div>

这个主题组件有问题吗？在当前的 Discourse 2.7.0 版本中，用户卡片目录功能对我来说运行正常，但安装后我会收到“此主题包含错误的 CSS、HTML 或 YAML”的提示。

此外，组件设置虽然出现在管理区域，但在用户个人资料中无法进行任何设置。

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2021年四月26日 12:44 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/31 "2021-04-26T12:44:26Z")

</div>

> [@anon82467725](#):
>
> 太好了！谢谢！Twitch 可以作为选项吗？

你好，刚刚已经添加了 Twitch。我应该想办法让添加新图标的方法更具通用性，这样就不需要修改代码了——我目前时间比较紧，无法进行这项通用化改进，但欢迎提交 PR！  
[关于通用化添加新社交平台的 GitHub 问题](https://github.com/weallwegot/discourse-social-links-clickable/issues/5)

* * *

> [@m4ur1c3](#):
>
> 这个主题组件是不是出问题了？用户卡片目录在我当前的 Discourse 2.7.0 上运行正常，但安装后我会收到“此主题包含错误的 CSS、HTML 或 YAML"的提示。

我也遇到了这个问题，但暂时无法快速 pinpoint 具体哪里出错了。我是在 2.7 版本上使用的，虽然安装时看到了那个警告，但并未发现任何功能受到影响，这很奇怪。如果你发现任何可疑之处，请随时发帖。

* * *

> [@m4ur1c3](#):
>
> 另外，组件设置出现在管理区域，但在用户个人资料中似乎无法进行任何设置。

你仍然需要创建与管理员区域设置中名称相匹配的自定义用户字段。我建议在创建这些字段后将其隐藏，这样就不会同时显示社交登录 URL 的文本和可点击的社交登录图标。

[这里是关于设置自定义用户字段的 Meta 教程](https://meta.discourse.org/t/how-to-create-and-configure-custom-user-fields/113192)

* * *

> [@cookieman768](#):
>
> 是否可以在用户使用指定的社交提供商登录时设置这些内容？

目前这稍微超出了最初的设计范围，因为我认为这需要大量工作——而且我不确定所有这些功能是否仅通过主题组件就能实现。不过也许可以。这需要更深入地查看。如果这非常关键，我建议去 #Marketplace 看看，也许有人愿意接手这项工作——目前我 unfortunately 无法投入太多时间。

> [@cookieman768](#):
>
> 另外，是否可以为每个图标设置不同的样式，而不是全部使用相同的颜色？

这也是个很棒的想法，但建议同上……如果你或有人有兴趣尝试通用化这项工作，这也可以作为其中的一部分来实现——另一个可以按社交平台单独设置的特性就是颜色。  
[关于通用化添加新社交平台的 GitHub 问题](https://github.com/weallwegot/discourse-social-links-clickable/issues/5)

很抱歉在这些方面无法提供更多帮助，但感谢你的反馈！

---

<div class="post-metadata">

**Author:** ![thegurjyot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thegurjyot/32/120516_2.png) [@thegurjyot](https://meta.discourse.org/u/thegurjyot)\
**Post date:** [2021年五月28日 08:09 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/32 "2021-05-28T08:09:54Z")

</div>

安装此组件时，我收到了这条消息。

 ![Screenshot_20210528-133639](https://global.discourse-cdn.com/meta/original/3X/e/8/e831d29757c06fe77582ca12d21d96a14092a1ca.jpeg)

此外，启用此插件后，我无法看到任何可编辑字段。我已将其添加到正确的主题中，但用户个人资料中仍然没有任何显示内容。

---

<div class="post-metadata">

**Author:** ![ivanovitch](https://avatars.discourse-cdn.com/v4/letter/i/4af34b/32.png) [@ivanovitch](https://meta.discourse.org/u/ivanovitch)\
**Post date:** [2021年六月20日 23:44 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/33 "2021-06-20T23:44:40Z")

</div>

嘿！很想用这个，但遇到了和 @thegurjyot 上面一样的错误问题。不知道有没有快速解决的办法，特别是在完全托管的安装环境中？🙂

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2021年七月31日 00:12 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/35 "2021-07-31T00:12:43Z")

</div>

嗨 @thegurjyot @ivanovitch  
抱歉迟了，刚刚 [提交了一个更改](https://github.com/weallwegot/discourse-social-links-clickable/commit/d22fe17294f373866002bbc9ede181dfd209a1c9)，移除了那些 Ember 选择器。希望这不会让界面看起来太奇怪！如果有任何问题，欢迎随时提交 PR 🙂

---

<div class="post-metadata">

**Author:** ![anpan](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@anpan](https://meta.discourse.org/u/anpan)\
**Post date:** [2021年八月26日 16:39 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/36 "2021-08-26T16:39:34Z")

</div>

感谢提供如此出色的主题组件！界面美观，使用也非常简便。

是否有可能添加一个电子邮件/信封图标？我的社区使用单点登录（SSO），用户邮箱由该方式设定，但如果用户能自行指定一个不同的联系邮箱（例如他们的科研邮箱），将会非常贴心。

---

<div class="post-metadata">

**Author:** ![mognet](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@mognet](https://meta.discourse.org/u/mognet)\
**Post date:** [2021年十月23日 15:21 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/37 "2021-10-23T15:21:47Z")

</div>

这个组件在用户卡片上看起来很棒！  
找到 Discord 的用户链接有点棘手，我最好将其禁用，因为有些用户可能会在查找时遇到困难。如果用户只需添加用户名而不是完整 URL，那会方便得多。

另外，是否有可能添加 Telegram 和 TikTok 的用户字段？

感谢这个组件！

---

<div class="post-metadata">

**Author:** ![weallwegot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/weallwegot/32/124753_2.png) [@weallwegot](https://meta.discourse.org/u/weallwegot)\
**Post date:** [2022年一月1日 03:20 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/38 "2022-01-01T03:20:06Z")

</div>

> [@mognet](#):
>
> 添加 Telegram

已在上次推送中添加了 Telegram

> [@mognet](#):
>
> TikTok 用户字段

我添加了这个，但 TikTok 图标没有显示，我不太确定为什么，如果有人知道什么，请告诉我……我看到其他人也有这个问题：[Tiktok 字体图标未呈现。](https://meta.discourse.org/t/easy-responsive-footer/95818/132)

> [@anpan](#):
>
> 添加电子邮件/信封图标

已在最新版本中完成！

> [@mognet](#):
>
> 查找 Discord 的用户链接有点棘手

未能找到一个好方法。您知道包含用户名的 Discourse 个人资料 URL 的格式吗？

---

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [2022年八月30日 22:27 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/39 "2022-08-30T22:27:28Z")

</div>

您能否添加 Vero？不幸的是，还没有 Font Awesome 图标，但有这个 [https://www.flaticon.com/free-icons/vero](https://www.flaticon.com/free-icons/vero)

Flickr 也会是一个不错的补充！Flickr 确实有一个 FA 图标 `f16e`

谢谢！

---

<div class="post-metadata">

**Author:** ![cogdog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cogdog/32/116536_2.png) [@cogdog](https://meta.discourse.org/u/cogdog)\
**Post date:** [2022年九月30日 21:10 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/40 "2022-09-30T21:10:14Z")

</div>

很高兴看到这个，我曾使用/放弃过 Namati，这个好多了。

一些请求/注意事项：

- 没有 Facebook 字段选项？它的图标列出来了，但没有匹配用户字段的（我讨厌 FB，但我的用户使用它）
- 有没有办法添加一个通用的？我的用户喜欢使用 [Namedrop.io](http://Namedrop.io) 来提供名字发音。我尝试使用 Spotify 图标，但 Spotify 出现在标题文本中。这很小众，而且没有图标，但我可以接受一个不同的图标。
  - 我还有一个关联 URL，使用全局图标也可以。

 ![profile](https://global.discourse-cdn.com/meta/original/4X/1/2/b/12b711b6cc3b7640950c80eb6e71dc3a54c3673a.jpeg)

> - Instagram 和 Twitter 自定义用户字段只期望用户名（不包含“@”），用户名会附加到基本 URL

感谢您捕获了他们输入用户名的案例！（要求提供 Twitter URL，但他们忽略了，输入用户名也可以。）（看起来在 Twitter 中使用 @ 也可以，最终也会显示在卡片中，这对我来说没问题）

---

<div class="post-metadata">

**Author:** ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)\
**Post date:** [2022年十一月2日 10:22 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/41 "2022-11-02T10:22:25Z")

</div>

您能否为新的 YouTube 用户名添加支持？我的社区在 YouTube 频道 URL 的当前限制方面也遇到了一些问题：

> **[Support for new Youtube handles in profile preferences?](https://blenderartists.org/t/support-for-new-youtube-handles-in-profile-preferences/1414427/3?u=bartv)**
>
> I don’t have a Twitter or Instagram account, only a Youtube one and that can’t be added because Discourse within the profile preferences expects the URL to be youtube.com/c/channelname and Google disabled setting that a few days before I hit 100...

---

<div class="post-metadata">

**Author:** ![cogdog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cogdog/32/116536_2.png) [@cogdog](https://meta.discourse.org/u/cogdog)\
**Post date:** [2022年十一月3日 18:14 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/42 "2022-11-03T18:14:03Z")

</div>

是时候为 Mastodon 添加一个图标了吗？我收到了一些添加为用户字段的请求。它有一个图标 [Mastodon Icon | Font Awesome](https://fontawesome.com/icons/mastodon?s=solid&f=brands)

[上一頁](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136.md?page=1)

[下一頁](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136.md?page=3)
