（已退役）将用户名链接到外部资料

文档 网站管理
1

Let’s say you want to add a link of User’s main profile page on Discourse user profile page and user card, clicking on that link will take user to main (external) website.

The link of main website user profile page will be like:

http://site.com/username

Where username is the Discourse username of that user. (It should be same on both main site and Discourse forum)

Let’s get started!

Add custom CSS

Paste this CSS code in Admin > Customize > CSS/HTML > CSS section:

#user-card .metadata h3 {
  float: left;
}

h3.user-card-public-field {
 clear: both;   
}

Add custom JS

Paste this JS code in Admin > Customize > CSS/HTML > </head> section:

<script type="text/discourse-plugin" version="0.8.7">
    api.registerConnectorClass('user-profile-primary', 'site-link', {
      setupComponent(args, component) {
        component.set('siteLink', args.model.get('siteLink'));
      }
    });

    api.registerConnectorClass('user-card-metadata', 'site-link', {
      setupComponent(args, component) {
        component.set('siteLink', args.user.get('siteLink'));
      }
    });

    api.modifyClass('model:user', {
      siteLink: function() {
          const username = this.get('username');

          if (username) {
              const url = `http://site.com/${username}`;
              const link = `<a href=${url} target='_blank'>${url}</a>`;

              return Ember.Object.create({ link, name: "User Profile" });
          } else {
              return null;
          }
      }.property('username')
    });
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/site-link'>
  {{#if siteLink}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">{{siteLink.name}}</span>:
        <span class="user-field-value">{{{siteLink.link}}}</span>
      </div>
    </div>
  {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-card-metadata/site-link'>
  {{#if siteLink}}
    <h3 class="user-card-public-field">
      <span class="user-field-name">{{siteLink.name}}</span>:
      <span class="user-field-value">{{{siteLink.link}}}</span>
    </h3>
  {{/if}}
</script>

Update:

const url = `http://site.com/${username}`;

with your website user profile link.

Voilà :tada:

That’s it, you will now see user Profile link on user profile page:

Screen Shot 2017-01-09 at 17.06.05.png784×259 68.3 KB

and user card:

Screen Shot 2017-01-09 at 17.05.50.png608×329 88.8 KB

Related: (Retired) Use an ID in a custom user field to link to a user's external profile

13 个赞
2

Works like a charm. Thanks for adding this guide @techAPJ

3 个赞
3

@pblog, (or someone) could you please add an screenshot for final result?

1 个赞
4

Okay, added images in OP.

3 个赞
5

Dear Arpit, does this approach really update userfield siteLink?
We used it “as is” and siteLink in empty under user/preferences siteLink although it is visible over user card
thx

6

You mean user “Web Site”, right?

No, the code in first post does not update user Website field. It just adds a link of main/external user profile on user page and user card.

7

Sorry for the newbie question, but could someone post example code for if external_id was used as opposed to username?

I have single sign on enabled, and it shows the proper External ID at the bottom of the admin interface of the user account.

8

Any chance this example could get an update? Apparently it will not work, since api.container.lookupFactory is a private API and will break stuff :stuck_out_tongue_winking_eye:

I asked the same a long time ago. You’d have to write a plugin that exposes external_id - I asked recently if it had become enabled, since they changed a lot of stuff, but haven’t received an answer, so I guess it still requires a plugin…

9

Okay, I updated the code in first post to use api.modifyClass instead of api.container.lookupFactory.

5 个赞
10

@techAPJ，这段代码非常棒。我想做一个小小的调整，也许您知道……如何在 URL 末尾获取 external_id（即 const url = 'http://site.com/${external_id}'）？我尝试修改代码以从用户对象中提取 external_id，但系统提示该属性未定义。

11

此代码已弃用，您能更新一下吗？我尝试调整过但无效。

[管理员通知] 您的一个或多个插件或主题组件需要更新，因为它与 Discourse 3.2 不兼容。
更多信息可在 Communiteq 知识库 中找到。
详情：[THEME 1 ‘Default’] 函数原型扩展已弃用，请从 function(){}.property(‘bar’) 迁移到 computed(‘bar’, function() {}).

12

这看起来与另一篇指南非常相似。和那篇一样，原帖中建议的策略已经严重过时。未来的最佳做法是将该功能构建为一个由 Git 管理的主题组件，这样用户就无需再复制粘贴代码。

我们正在评估是否可以创建一个官方的 Customization > Theme component 来涵盖这两种用例，并将在准备就绪后更新相关主题。

1 个赞