Emoji mention theme component

커스터마이징 테마 컴포넌트
7

멘션 옆 아이콘으로 사용자 정의 SVG도 사용할 수 있는 기능을 원했습니다. 길디드(Guilded)에서 스태프에게 적용되는 것을 본 적이 있는데, 제가 원했지만 아직 사용할 수 없었던 기능이었죠. 디스코urses를 좋아하게 된 또 다른 이유는, 개발자가 추가하기를 바라면서 기다리는 대신, 실제로 작동할 수 있는 것을 직접 조립해 볼 수 있다는 점입니다.

그래서 다음과 같은 해결책을 직접 만들어 보았습니다. 이 방식은 완벽하지 않으며, 업로드하는 SVG에 svg로 시작하는 SCSS 변수가 필요할 가능성이 높지만, 지금은 저에게 충분히 잘 작동하는 것 같습니다 :slight_smile:

누군가 이 코드를 가져가서 더 발전시키거나, 더 화려하게 개선한다면 감사하겠습니다!

개선할 수 있는 부분

  1. 모든 SVG 아이콘에서 작동하도록 만들기: 즉, svg로 시작하지 않는 디스코urses의 모든 아이콘과 업로드된 아이콘 모두에서 작동하도록 하는 것.
  2. 코드 정리.
  3. 스타일링 개선: CSS를 작동하도록 직접 조립한 것이므로 모든 상황에서 작동하지 않을 수 있습니다.

어쨌든, 감정적 자기방어(Emotional Self-Defense)를 위한 사용자 정의 아이콘을 스태프 멘션 아이콘으로 사용한 멘션의 예시는 다음과 같습니다:

image

제가 추가한 코드는 다음과 같습니다:

header.html

  // SVG 아이콘을 옵션으로 추가 (assets에 포함되어 있고 업로드된 경우에만)
  // 모든 assets의 객체를 생성하고, data-emoji 속성이 asset 변수 이름과 일치하는 링크를 찾아 해당 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 파일을 업데이트하여 해당 asset에 연결 (예시):
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1개의 좋아요