프로필에서 클릭 가능한 소셜 아이콘 링크

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

틱톡은 @가 필요하고 유튜브는 포럼 URL을 사용해요 :man_shrugging:

84

저는 틱톡을 사용하지 않는데, 실험해 볼 수 있는 예시 사용자 이름이 있을까요?

85

음, 제 닉네임은 jagster64입니다. 저는 게시물을 올리지 않으므로 이 닉네임을 사용하는 데 큰 문제가 없습니다.

86

수정됨 - 풀 리퀘스트에 추가함

2개의 좋아요
87

Strava 지원을 추가하기 위해 풀 리퀘스트를 제출했습니다. @weallwegot 님이 제 다소 엉성한 풀 리퀘스트를 용인해 주셨으면 좋겠네요 :-s

1개의 좋아요
88

음, temporary-twitter-x가 fab-twitter로 되돌려졌네요. 의도적으로 한 건지 실수로 된 건지 궁금합니다. 어쨌든 새로운 X 로고 대신에 예전 트위터 새 로고가 다시 돌아왔습니다.

1개의 좋아요
89

확인해 주셔서 감사합니다. 트위터의 브랜드 변경에 맞춰 업데이트하기 위해 풀 리퀘스트를 생성했습니다.

2개의 좋아요
90

감사합니다! 하지만 불행히도 fa-x-twitter를 temporary-twitter-x로 변경해야 합니다. fa-x-twitter는 FontAwesome 6 아이콘이며, 아직 Discourse에서 작동하지 않기 때문입니다.

2개의 좋아요
91

작동해야 한다고 생각합니다.

3개의 좋아요
92

올바른 X 아이콘으로 업데이트… 브랜딩과 마케팅 전문가들이 이유를 설명하지는 못하지만, 모두 등이 서늘해지는 기분을 느꼈을 것입니다.

3개의 좋아요
93

테스트를 해보았는데, FA6 아이콘이 정상적으로 작동하는 것을 확인했습니다. 풀 리퀘스트를 업데이트했습니다.

2개의 좋아요
94

네, 흥미롭네요. Fontawesome 6가 이제 Discourse와 함께 작동하는 것 같습니다! :slight_smile:

올바른 아이콘을 사용하면 저도 볼 수 있어요. 멋지네요! 정말 감사합니다!

2개의 좋아요
95

안녕하세요, https://meta.discourse.org/t/custom-header-links-icons/86307에서 허용하듯 FontAwesome 대신 사용자 정의 SVG를 추가할 수 있나요?

96

이런 식으로?

image
image214×201 8.06 KB

방금 깨달은 사실이 있는데, "공개 프로필에 표시"를 해제하면 사용자 필드가 공개 프로필에서 제거되는 것은 정상적인 동작입니다(기대했던 대로). 하지만 이 테마 컴포넌트가 제공하는 아이콘의 동작은 좀 더 불안정합니다:

  • 관리자 계정의 경우에도 여전히 아이콘이 보입니다.
  • 테스트 계정(신뢰 수준 1)에서는 아이콘도 함께 사라집니다.

즉, 대부분의 로그인된 사용자와 모든 익명 사용자의 경우, 사용자 정의 필드 아이콘은 해당 라벨과 텍스트 값이 표시될 때에만 보입니다. 하나를 숨기면 다른 하나도 함께 숨겨집니다.

이상한 일이지만 다른 브라우저와 시크릿 모드에서도 시도해 보았으며, 이 문제를 안정적으로 재현할 수 있습니다. 다른 분들도 이 문제를 재현할 수 있나요?

관리자라면 놓치기 쉬운 부분 중 하나입니다. 사용자가 문제를 보고해 주어서야 이 동작을 깨달았습니다.

도움이 된다면, 저는 마스토ドン(Mastodon) 아이콘으로 테스트하고 있습니다.

97

링크가 사용자의 소셜 미디어 프로필로 제대로 이동하지 않는 문제가 있습니다. 현재 상태로는 사용자가 현재 있는 페이지의 URL에 커스텀 사용자 필드가 단순히 추가되는 것 같습니다.

지금까지 Steam과 Discord에서 이 문제를 확인했습니다.

links-settings.js의 GitHub 저장소를 살펴보니, Steam과 Discord 항목에는 base: 또는 baseregex: 줄이 없습니다… 반면 Bluesky와 Twitter(미안하지만, X the everything app)는 정상적으로 작동하며, 이 둘에는 해당 줄이 모두 포함되어 있습니다. 그래서 이것이 문제의 원인일 수 있습니다?

{
        name: "Discord",
        icon: "fab-discord",
        link: {
          value: settings.discord_custom_field_name,
        },
      },
      {
        name: "Steam",
        icon: "fab-steam",
        link: {
          value: settings.steam_custom_field_name,
        },
      },

Bluesky의 경우:

{
        name: "Bluesky",
        icon: "fab-bluesky",
        link: {
          value: settings.bluesky_custom_field_name,
          base: "https://bsky.app/profile/",
          baseregex: "^http(s)?://(www.)?bsky.app/profile/",
        },
      },

Twitter의 경우:

{
        name: "X",
        icon: "fab-twitter",
        link: {
          value: settings.twitter_custom_field_name,
          base: "https://twitter.com/",
          baseregex: "^http(s)?://(www.)?twitter.com/",
        },
      },

나머지 항목들을 훑어보니, 이 항목들에도 base: 또는 baseregex: 줄이 없는 것 같습니다. 하지만 테스트할 수 있는 실제 예시가 없습니다.

  • email
  • mastodon
  • discord
  • steam
  • linkedin
  • bandcamp

(추가 편집) 풀 리퀘스트를 먼저 생성해 두었습니다:
09096b8: email, steam, linkedin의 기본 URL 추가
0ec40a0: discord, bandcamp, mastodon 추가 및 readme 업데이트. bandcamp와 mastodon은 사용자에 따라 기본 URL이 달라지며 일관성이 없으므로, 그리고 Discord의 경우 사용자가 사용자 이름을 대신에 User ID를 입력하므로 readme에 설명이 필요하다고 판단하여 별도로 처리했습니다.

98

Facebook 아이콘을 fab-facebook-f로 업데이트하고, Twitter를 X로 변경하여 이 아이콘(fab-x-twitter)을 사용하며… Snapchat도 이 아이콘(fab-snapchat)으로 추가할 수 있을까요?

Twitter를 x.com으로 변경(URL 및 아이콘)해야 합니다.

이 기능들이 구현되면 좋겠습니다. 실제 컴포넌트를 이렇게 업데이트할 수 있을지 확실하지는 않습니다.

99

사용자 필드가 사용자 카드에 표시되도록 설정했나요?

Screenshot_20260220_093102_Firefox
Screenshot_20260220_093102_Firefox424×376 43.3 KB

1개의 좋아요
100

정말 도움이 되네요, 감사합니다.

101

네, 트위터(X)의 아이콘과 URL을 X로 변경하고 싶으신 분들을 위해 아래 단계를 안내드립니다.

  1. 관리자 > 외관 > 테마 및 구성 요소 > 구성 요소 > 설치 > 새로 만들기를 선택하세요.

  2. CSS 탭에 다음 코드를 추가하세요 (‘XXXXX’를 본인의 @ 사용자 이름으로 대체):

/* 1. 기존 트위터 SVG 아이콘 숨기기 */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
    display: none;
}

/* 2. 의사 요소와 CSS 마스크를 사용하여 X 아이콘 주입 */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
  1. < head > 탭에 다음 코드를 추가하세요 (‘XXXXX’를 본인의 @ 사용자 이름으로 대체):
<script>
// 링크를 찾아서 변경하는 함수 생성
function updateTwitterLinks() {
    const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
    oldLinks.forEach(link => {
        link.href = 'https://x.com/XXXXX';
    });
}

// 1. 즉시 실행을 시도해 보세요 (혹시 모를 상황에 대비하여)
updateTwitterLinks();

// 2. 동적으로 로드되는 콘텐츠(예: Discourse 게시물)를 위한 "워처" 설정
const observer = new MutationObserver(function(mutations) {
    updateTwitterLinks();
});

// 새로 추가된 요소를 감지하기 위해 페이지 본문의 전체를 관찰 시작
observer.observe(document.body, { childList: true, subtree: true });
</script>

완료되었습니다.

102

Discourse를 업데이트한 후 몇 가지 알림을 발견했습니다:

[관리자 알림] 테마 'discourse-social-links-clickable’에는 업데이트가 필요한 코드가 포함되어 있습니다. (ID:discourse.native-array-extensions.filterBy)

그리고 개발자 콘솔에서는:

deprecated.js:54 [THEME 11 'discourse-social-links-clickable'] DEPRECATION NOTICE: The array.filterBy is a deprecated Ember native array extension. Use native array methods or a TrackedArray instead. [deprecated since Discourse 3.6.0.beta1-dev] [deprecation id: discourse.native-array-extensions.filterBy]

2개의 좋아요
Show both OP and last reply on mobile