(Retired) Link username to external profile

문서 사이트 관리
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, this code is great. I want to make one small tweak and perhaps you know… how can I get the external_id at the end of the URL (i.e. const url = 'http://site.com/${external_id}')? I tried changing the code to pull external_id from the user object but it says that property is undefined.

11

This code is deprecated, can you update it please? I tried to tweak it but it didn’t work.

[Admin Notice] One or more of your plugins or theme components needs to be updated because it is incompatible with Discourse 3.2.
More information can be found in the Communiteq knowledge base.
Details: [THEME 1 ‘Default’] Function prototype extensions have been deprecated, please migrate from function(){}.property(‘bar’) to computed(‘bar’, function() {}).

12

이것은 다른 가이드와 매우 유사해 보입니다. 해당 가이드와 마찬가지로, OP에서 제안된 전략들은 매우 오래되었습니다. 앞으로의 최선의 방법은 기능을 git 관리되는 테마 컴포넌트에 통합하여 사람들이 코드를 복사/붙여넣을 필요가 없도록 하는 것입니다.

두 사용 사례를 모두 포괄하는 공식 #customization:theme-component를 만들 수 있는지 검토 중이며, 준비가 되면 해당 주제들을 업데이트하겠습니다.

1개의 좋아요