Hooks

Les hooks vous permettent de modifier par programmation le comportement de l'embed de commentaires.

Utiliser les hooks

Commencez par configurer l'embed pour qu'il se charge manuellement avec loading="manual".

<hyvor-talk-comments website-id="1234" loading="manual"></hyvor-talk-comments>

Ensuite, ajoutez un script pour enregistrer les hooks et charger l'embed en l'encapsulant dans la méthode customElements.whenDefined.

<script>
	customElements.whenDefined('hyvor-talk-comments').then(() => {
		const comments = document.querySelector('hyvor-talk-comments');

		// register hooks
		comments.api.hooks.register('time:format', (props) => {
			props.text = props.datetime.toLocaleString();
			return props;
		});

		// load the embed
		comments.load();
	});
</script>

La fonction hooks.register prend le nom du hook et un callback. Le callback reçoit un objet (props) et doit renvoyer le même objet. Dans le callback, vous pouvez mettre à jour les propriétés de l'objet pour modifier le comportement de l'embed. Vous trouverez ci-dessous la liste des hooks disponibles et les propriétés de l'objet props.

Hooks disponibles

time:format

Formate l'affichage de l'heure dans les commentaires, etc.

Afficher la date complète :

comments.api.hooks.register('time:format', (props) => {
	props.text = props.datetime.toLocaleString();
	return props;
});

icon

Définir des icônes personnalisées

Définir une icône de réponse personnalisée :

comments.api.hooks.register('icon', (props) => {
	if (props.name === 'reply') {
		props.html = '<svg...></svg>';
	}
	return props;
});

Noms disponibles : featured, heart, caret, thumbsUp, thumbsDown, thumbsUpActive, thumbsDownActive, link, bold, italic, quote, emoji, image, gif, bell, search, flag, mod, reply

render:comment:before

Ajoute du HTML personnalisé à afficher avant le commentaire

Afficher une bannière avant le premier commentaire de la page :

comments.api.hooks.register('render:comment:before', (props) => {
	if (
		// a parent comment (not a reply)
		props.comment.parent_id === null &&
		// main list
		props.listType === 'main' &&
		// first comment in the list
		props.index === 0
	) {
		props.html = '<banner>My custom banner</banner>';
	}
	return props;
});

render:comment:after

Ajoute du HTML personnalisé à afficher après le commentaire

Prend les mêmes propriétés que render:comment:before.

render:comment:before-content

Ajoute du HTML personnalisé à afficher à l'intérieur du commentaire, mais avant le contenu

Prend les mêmes propriétés que render:comment:before.

render:comment:after-content

Ajoute du HTML personnalisé à afficher à l'intérieur du commentaire, mais après le contenu

Prend les mêmes propriétés que render:comment:before.

comment:content:link

Personnalise les attributs des liens dans les commentaires générés par les utilisateurs

Par défaut, les liens dans les commentaires ont les attributs href, target="_blank" et rel="ugc". Vous pouvez utiliser ce hook pour ajouter ou supprimer des attributs.

Supprimer l'attribut rel pour les liens qui commencent par example.org :

comments.api.hooks.register('comment:content:link', (props) => {
	if (props.attrs.href.startsWith('https://example.org')) {
		props.attrs.rel = null;
	}
	return props;
});

t

Personnalise dynamiquement une traduction à l'aide d'un contexte supplémentaire

Ce hook est appelé chaque fois qu'un texte est traduit. Il vous permet de personnaliser une traduction dynamiquement à l'aide d'un contexte supplémentaire qui n'est pas disponible pour les attributs t-, tel que les données du commentaire ou de l'utilisateur.

Exemple d'ajout de la localisation de l'utilisateur aux libellés :

comments.api.hooks.register('t', (props) => {
	if (props.key === 'parent_comment_by' || props.key === 'in_reply_to') {
		const user = props.context.user;
		if (user?.location) {
			props.text += ` from ${user.location}`;
		}
	}
	return props;
});

misc:branding

Personnalise la marque Hyvor Talk affichée à la fin de la section des commentaires

Conseils courants

• Veillez à toujours renvoyer l'objet data depuis le callback, même si vous n'y apportez aucune modification.
• Plusieurs hooks prennent en charge du HTML personnalisé. Pour prévenir les attaques XSS, ne définissez ces propriétés que directement ou à partir d'entrées de confiance.