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://myawesomewebsite.com/user/USER_PROFILE_ID
Let’s get started!
Create a custom user field
Let’s create a user field with name User Profile.
Make sure “Show on public profile?” option is enabled.
The above field will store external user profile IDs.
Add custom CSS
Paste this CSS code in Admin > Customize > CSS/HTML > CSS
section:
.public-user-field.user-profile {
display: none;
}
#user-card .metadata h3 {
float: left;
}
h3.user-card-public-field {
clear: both;
}
Feel free to further customize above CSS as per your requirement.
If your field name is different than User Profile make sure you replace .public-user-field.user-profile
with the dasherized version of your field name.
Add custom JS
Paste this JS code in Admin > Customize > CSS/HTML > </head>
section:
<script type="text/discourse-plugin" version="0.8.7">
const Site = require("discourse/models/site");
api.registerConnectorClass('user-profile-primary', 'external-site-link', {
setupComponent(args, component) {
component.set('externalSiteLink', args.model.get('externalSiteLink'));
}
});
api.registerConnectorClass('user-card-metadata', 'external-site-link', {
setupComponent(args, component) {
component.set('externalSiteLink', args.user.get('externalSiteLink'));
}
});
api.modifyClass('model:user', {
externalSiteLink: function() {
const siteUserFields = Site.currentProp('user_fields');
if (!Ember.isEmpty(siteUserFields)) {
const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]
if (!externalUserIdField) {
return null;
}
const userFieldId = externalUserIdField.get('id');
const userFields = this.get('user_fields');
if (userFields && userFields[userFieldId]) {
const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
const link = "<a href='"+url+"' target='_blank'>"+url+"</a>";
return Ember.Object.create({ link, name: externalUserIdField.get('name') });
} else {
return null;
}
}
}.property('user_fields.@each.value')
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/external-site-link'>
{{#if externalSiteLink}}
<div class="public-user-fields">
<div class="public-user-field">
<span class="user-field-name">{{externalSiteLink.name}}</span>:
<span class="user-field-value">{{{externalSiteLink.link}}}</span>
</div>
</div>
{{/if}}
</script>
<script type='text/x-handlebars' data-template-name='/connectors/user-card-metadata/external-site-link'>
{{#if externalSiteLink}}
<h3 class="user-card-public-field">
<span class="user-field-name">{{externalSiteLink.name}}</span>:
<span class="user-field-value">{{{externalSiteLink.link}}}</span>
</h3>
{{/if}}
</script>
Update:
const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
with your website user profile link.
If your field name is different than User Profile make sure you update:
const externalUserIdField = siteUserFields.filterBy('name', 'User Profile')[0]
with your field name.
Voilà
That’s it, you will now see User Profile link on user profile page:
and user card: