Discourse에서 LinkedIn 공유 버튼의 URL 인코딩 방법

개발
1

Discourse 호스팅 커뮤니티에서 관리자로서 배지에 LinkedIn 공유 버튼을 추가하려고 합니다.

이를 위해 이 플러그인 아울렛을 사용하려고 합니다. 테마의 head 섹션에 다음 코드를 포함했습니다.

<script type='text/x-handlebars' data-template-name='/connectors/badge-contents-top/linkedin-button'>
  <a href="https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io{{@outletArgs.url}}" class="linkedin-share-button">
    <img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png " alt="LinkedIn Add to Profile button">
  </a>
</script>

href 속성에 주목해 주세요: https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}.

@outletArgs.url 값은 https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>과 같은 형태입니다. 저는 username=<username> 부분에 집중하고 싶습니다.

URL은 인코딩되지 않았고, 등호(=)가 그대로 전달되므로 브라우저가 https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>을 처리할 때 =<username>을 무시합니다.

여기서 URL을 어떻게 인코딩해야 하나요?

2

저는 Discourse Theme CLI를 다음과 같이 사용하여 이 문제를 해결했습니다:

  • 새 테마를 생성하고 이를 컴포넌트로 설정했습니다(discourse_theme new를 실행하고 프롬프트에 따라 진행).

  • javascripts/discourse/connectors/badge-contents-top 디렉터리에서 거의 다음과 같은 내용을 가진 JavaScript 파일을 생성했습니다.

    import Component from "@glimmer/component";
import { inject as service } from "@ember/service";

export default class LinkedinButton extends Component {
  @service siteSettings;

  get encodedUrl() {
    return encodeURIComponent(this.args.outletArgs.url);
  }
}

  • 위와 동일한 디렉터리에서, 질문의 script 태그에 포함된 내부 HTML과 대략적으로 동일한 내용을 가진 Handlebars 파일을 생성했습니다.

    • 참고로, 이 파일과 이전 파일은 확장자를 제외하고는 동일한 이름을 부여했습니다.
3

이것이 어떻게 적용되는지 잘 모르겠습니다. 중복된 코드인가요?

4

네! 그걸 알아봐 주셔서 감사합니다.