# Emojiメンションテーマコンポーネント

**URL:** <https://meta.discourse.org/t/emoji-mention-theme-component/90125>\
**Category:** Theme component\
**Created:** [2018 年 6 月 18 日午後 2:48 UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125 "2018-06-18T14:48:29Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2018 年 7 月 27 日午前 3:09 UTC](https://meta.discourse.org/t/emoji-mention-theme-component/90125/5 "2018-07-27T03:09:50Z")

</div>

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).

```JS
<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](https://global.discourse-cdn.com/meta/original/3X/d/a/da4cdf1ce17bbf7fa0aff5fa7fce221d8a7c8d8b.png)

---

_[View the full topic](https://meta.discourse.org/t/emoji-mention-theme-component/90125)._