사이트 커스터마이징에서 “외부 링크를 새 탭에서 열기” 설정 활용법

개발
1

자주 방문하는 사이트에는 사용자 카드에 사용자별 외부 사이트(기본적으로 사용자 프로필)로 연결되는 링크가 포함된 커스터마이징 기능이 있습니다. 하지만 이 링크를 클릭하면 “모든 외부 링크를 새 탭에서 열기” 설정을 활성화해 두었음에도 불구하고 현재 탭에서 페이지가 열립니다. 관리자가 사용자의 “모든 외부 링크를 새 탭에서 열기” 설정을 참조하여 이 설정이 존중되도록 하는 방법이 있을까요?

2

어떤 테마/컴포넌트인지 아시나요? 거기에 언급하시는 게 좋을 것 같아요. 사이트 설정을 반영하도록 업데이트할 수 있을지도 모르니까요. :slight_smile:

3

그냥 커스텀으로 만든 줄 알았는데, 관리자한테 확인해볼게요.

4

관리자가 사용자의 외부 프로필 링크를 위한 사용자 정의 사용자 필드를 설정하고, 사용자 정의 테마를 구축한 것으로 보입니다. https://meta.discourse.org/t/use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218의 지침을 따랐습니다. 새 탭에서 열기 관련 사용자 설정을 어떻게 활용하는지 그곳에서 질문하는 것이 좋을까요?

5

설정값을 사용하려는지에 따라 달라질 것 같습니다. 커스터마이징은 해당 설정을 고려하지 않지만, target을 적절히 추가하는 것처럼 보입니다:

target='_blank'를 포함하면 사이트 설정과 무관하게 새 탭/창에서 열립니다. 두 설정이 상호작용하지 않기 때문입니다.

링크가 새 탭에서 열리지 않는 사이트에서 소스를 확인했을 때, 해당 링크에 target 값이 포함되어 있나요?

6

사이트 설정을 확인하고 싶다면, 기존 커스터마이징 내에서 다음과 같은 작업을 수행할 수 있습니다.

// siteSettings와 target 변수 설정:
const siteSettings = api.container.lookup('site-settings:main');
const target = siteSettings.default_other_external_links_in_new_tab ? "_blank" : ""


// 링크가 생성되는 if 문에서 target 변수를 사용하도록 수정:
if (userFields && userFields[userFieldId]) {
  const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
  const link = `<a href="${url}" target="${target}">${url}</a>`;
  return Ember.Object.create({ link, name: externalUserIdField.get('name') });
} else {
  return null;
}
7

그렇다면 사용자 설정은 어떻게 확인하나요? 제 이해로는 사이트 설정은 신규 사용자를 위한 기본값일 뿐이며, 이상적으로는 이 링크가 사용자가 자신의 설정에서 변경한 내용을 존중해야 합니다. 어떤 사용자는 같은 탭에서 열기를 원할 수도 있고, 다른 사용자는 새 탭에서 열기를 원할 수 있기 때문입니다.

8

아 맞다, “user” 부분을 놓치고 있었네요 :sweat_smile: 죄송합니다

user 설정을 사용하는 것은 큰 차이가 없으며, 단지 첫 번째 상수 두 개를 user를 참조하도록 변경하면 됩니다:

// user와 target 변수 설정:
const user = api.getCurrentUser()
const target = user?.user_option?.external_links_in_new_tab ? "_blank" : ""

그리고 나머지는 모두 동일합니다.

이것이 core와 더 유사하게 작동하려면, user가 존재하는지 확인하고, 존재하지 않으면 site 설정으로 폴백(fallback)하도록 해야 합니다:

// user, siteSettings, target 변수 설정:
const user = api.getCurrentUser()
const siteSettings = api.container.lookup('site-settings:main');
let target = siteSettings.default_other_external_links_in_new_tab ? "_blank" : ""; 

if (user) { // user가 존재하면 user 옵션에 따라 target 설정
 target = user.user_option?.external_links_in_new_tab ? "_blank" : ""
} 

// 링크가 생성되는 if 문에서 target 변수를 사용하도록 수정: 
if (userFields && userFields[userFieldId]) {
  const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
  const link = `<a href="${url}" target="${target}">${url}</a>`;
  return Ember.Object.create({ link, name: externalUserIdField.get('name') });
} else {
  return null;
}
9

완벽하게 작동했어요, 감사합니다!