怎样自定义ChatMessageInfo / chat作者的CSS（没有小组件吗？）

开发
1

今天早些时候，我做了一个小插件，可以让我根据一些特殊的网站逻辑来自定义每个论坛帖子的作者行。例如：

function initColorize(api)
{
	api.includePostAttributes('colorized_groups');

	// 劫持帖子图标以偷偷为论坛帖子添加 CSS
	api.addPosterIcons((cfs, attrs) => {
		// （可以通过填写 icon 字段来指定一个真实的图标。
		// 我删除了图标，因为它有点太杂乱了。
		// 目前，没有指定图标，它只是用于名称的 CSS 突出显示。）	
		if (attrs.colorized_groups.indexOf("developer") > -1)
			return { icon: '', className: 'developer', title: 'Developer' };
		else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
			return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
		else if (attrs.colorized_groups.indexOf("researcher") > -1)
			return { icon: '', className: 'researcher', title: 'Researcher' };
	});
}

接下来，我想对实时聊天做一些类似的自定义——但是没有等同于 api.addPosterIcons 的实时聊天消息的函数。也许我可以使用 api.decorateWidget，但聊天对应的组件是 ChatMessageInfo，它是一个组件，而不是一个小部件。

抱歉，如果这很明显，但从插件自定义 ChatMessageInfo 的一个好策略是什么？

（我故意不依赖用户的首要群组，因为有一些特殊的逻辑来决定哪个应该优先，而且我不想手动依赖用户/管理员正确设置它。）

谢谢！

2

嘿，

我认为这不会很容易。该区域没有可用的 PluginOutlet（请随时申请！）。

如果你只想添加类名，应该可以这样做：

api.modifyClass(
  "component:chat/message/info",
  (Superclass) =>
    class extends Superclass {
      get usernameClasses() {
        let classes = super.usernameClasses;

        // 添加额外的类名
        classes += " developer";

        return classes;
      }
    }
);

这会覆盖这段代码：

1 个赞
3

感谢您的回复！我实际上已经用另一种解决方案解决了这个问题，但我很感谢您提供的方法，因为它看起来更简洁（我的方法需要访问类名，而且感觉有点取巧）。这是我使用的策略：

// 同时为实时聊天中的名称着色
api.decorateChatMessage(function (messageContainer, chatChannel) 
{
	let colorized_groups = this.args?.message?.user?.colorized_groups;

	if (colorized_groups == null)
		return; // 没有分组，无需操作

	const nameClass = "chat-message-info__username__name";						
	
	let elements = messageContainer.getElementsByClassName(nameClass);
	if (elements.length == 0) // 正常情况：这可能是第二条消息，没有用户名标题
		return; 
	
	let nameDiv = elements[0];

	if (colorized_groups.indexOf("developer") > -1)
		nameDiv.classList.add("developer");
	else if (colorized_groups.indexOf("wip_researcher") > -1)
		nameDiv.classList.add("wip_researcher");
	else if (colorized_groups.indexOf("researcher") > -1)
		nameDiv.classList.add("researcher");
});

我猜您的方法是否仍然传递了 this.args.message.user？

1 个赞
4

干得好，找到了一个方法！这不算太“hacky”。 :smile:
不过，是的，覆盖 getter 的方法更直接、更简洁。

没错。 :slight_smile:

1 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.