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à
That’s it, you will now see user Profile link on user profile page:
and user card:
Related: (Retired) Use an ID in a custom user field to link to a user's external profile