Emoji mention theme component

主题组件
1

This is a simple component that will automatically add an emoji (or other text, if you’d like) to a @mention in a post

40%20AM

Github repo: https://github.com/awesomerobot/discourse-emoji-mention

How do I install a Theme or Theme Component?

How to

To configure it, add items to the list in the format of @username, emoji (You can copy and paste emoji from https://getemoji.com/ or https://emojipedia.org/)

41%20AM

There’s also an option to show the emoji after the mention, instead of before.

That’s all it does!

29 个赞
2

Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff

1 个赞
3

Not using the current structure because the setting uses unicode for emojis.

1 个赞
4

Mmm, and maybe it could be changed? :sweat_smile:

5

This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.

What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).

<script type="text/discourse-plugin" version="0.8.18">
    $.expr[":"].contains = $.expr.createPseudo(function(arg) { // make case insensitive
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    }); 
    
    let emoji = {};
    
    settings.username_emoji.split('|').forEach(pair => {
        let split = pair.split(",");
        emoji[split[0].toLowerCase()] = split[1];
    });
    
    $.each(emoji, function (key, value){
        api.decorateCooked($elem => $elem.find("a.mention:contains(" + key + ")").append("<img src='" + value + "'>").addClass("with-image"));
    });
    
</script>

Using a setting like this

20%20PM
Screen Shot 2018-07-26 at 11.06.20 PM.png1294×146 16.5 KB

11 个赞
6

我真的很喜欢这个概念！

我想到了两件事，不确定目前是否可行，但我希望能够实现：

  1. 能够将其用于群组提及？我刚为我的管理员群组试了一下，但似乎不起作用。

  2. 允许用户在他们的偏好设置中选择自己的表情符号，然后每次提及他们时都会显示。甚至可以将其作为一项福利，授予更高信任级别的更活跃用户。

编辑：

能够将其用于群组提及？我刚为我的管理员群组试了一下，但似乎不起作用。

我找到了如何做到这一点，但不知道如何提交 PR 请求，所以暂时我只会在这里发布代码：

common.scss 添加了 .mention-group:after 和 .mention-group:before

@if $show-after-mention == "true" {
  .mention:after,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
} @else {
  .mention:before,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
}

header.html 在末尾添加了以下内容：

$.each(emoji, function(key, value) {
  api.decorateCooked($elem =>
    $elem
      .find("a.mention-group:contains(" + key + ")")
      .attr("data-emoji", value)
      .addClass("with-emoji")
  );
});
1 个赞
7

我想要能够使用自定义 SVG 作为提及旁边的图标，这我在 Guilded 上看到过，并且也想在我的平台上实现，但之前做不到——这也是我如此喜欢 Discourse 的另一个原因，因为我可以自己动手实现一些功能，而不是寄希望于开发者添加它。

因此，我动手实现了一个解决方案。它并非万无一失，可能需要你上传的 SVG 以 svg 开头的 SCSS 变量，但目前对我来说已经足够了 :slight_smile:

如果有人想在此基础上进行改进，让它更完善，我将不胜感激！

可能的改进之处：

  1. 使其适用于所有 SVG 图标，包括 Discourse 自带的和用户上传的，而不仅仅是那些以 svg 开头的。
  2. 清理代码。
  3. 改进样式，因为我目前的 CSS 是临时拼凑的，可能在所有情况下都不适用。

无论如何，这是我使用自定义图标（我为“情感自卫”设置的员工提及图标）的提及示例：

image

这是我添加的代码：

header.html

  // 添加 SVG 图标作为选项，只要它们包含在 assets 中并已上传
  // 创建一个包含所有 assets 的对象并迭代查找哪些链接具有等于 asset 变量名的 data-emoji
  // 属性，然后添加它的 URL

  // 将对象转换为键的数组
  const keys = Object.keys(settings.theme_uploads);

  // 打印所有键
  console.log(keys);

  // 迭代对象
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

这还需要你：

  1. 创建一个 /assets 文件夹
  2. 在 /assets 文件夹中添加 svg 文件，例如 /assets/esd-heart.svg
  3. 更新 about.json 文件，链接到这些 assets，例如：
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 个赞
8

有没有办法让表情符号仅对选定的用户显示？如果您有一个名为 Taylor 和 TaylorLife 的用户，表情符号会同时显示给两者。