(In Rente) Link-Benutzername zum externen Profil

Dokumentation Website-Verwaltung
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 „Gefällt mir“
2

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

3 „Gefällt mir“
3

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

1 „Gefällt mir“
4

Okay, added images in OP.

3 „Gefällt mir“
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 „Gefällt mir“
10

@techAPJ, dieser Code ist großartig. Ich möchte eine kleine Anpassung vornehmen und vielleicht weißt du… wie kann ich die external_id am Ende der URL erhalten (d. h. const url = 'http://site.com/${external_id}')? Ich habe versucht, den Code so zu ändern, dass die external_id aus dem Benutzerobjekt gezogen wird, aber es wird gemeldet, dass diese Eigenschaft undefiniert ist.

11

Dieser Code ist veraltet, können Sie ihn bitte aktualisieren? Ich habe versucht, ihn anzupassen, aber es hat nicht funktioniert.

[Admin-Hinweis] Eines oder mehrere Ihrer Plugins oder Theme-Komponenten müssen aktualisiert werden, da sie mit Discourse 3.2 inkompatibel sind.
Weitere Informationen finden Sie in der Communiteq Wissensdatenbank.
Details: [THEME 1 ‘Default’] Funktionsprototyperweiterungen sind veraltet, bitte migrieren Sie von function(){}.property(‘bar’) zu computed(‘bar’, function() {}).

12

Es sieht so aus, als wäre dies sehr ähnlich zu einer anderen Anleitung. Wie bei dieser auch, sind die im OP vorgeschlagenen Strategien extrem veraltet. Der beste Weg nach vorne besteht darin, die Funktionalität in eine git-verwaltete Theme-Komponente zu integrieren, damit die Nutzer keinen Code mehr kopieren/einfügen müssen.

Wir prüfen derzeit, ob wir eine offizielle Customization > Theme component erstellen können, die beide Anwendungsfälle abdeckt, und werden beide Themen aktualisieren, sobald dies verfügbar ist.

1 „Gefällt mir“