Emoji 提及主题组件

自定义 主题组件
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 个赞