weallwegot
7월 18, 2020, 5:03오후
1
사용자 프로필 및 사용자 카드에서 소셜 아이콘을 클릭할 수 있도록 포함하는 테마 컴포넌트입니다. 사용자 카드 디렉터리 테마 컴포넌트 를 사용하는 경우 적용됩니다.
이 코드는 @LeoMcA 님이 Meta 의 이 대화와 Namati 사용자 카드 프로필 테마 에서 제공한 토론 및 코드 샘플에서 99% 복사한 것입니다. 다만, 해당 스레드에서 내용을 발췌하여 좀 더 범용적으로 수정해 공유하면 도움이 될 것 같아 올립니다.
참고 사항
항목 값이 없는 사용자의 경우, 해당 사용자 카드/프로필에 대응하는 아이콘이 표시되지 않습니다.
Instagram 및 Twitter 커스텀 사용자 필드는 사용자 이름만 입력하도록 되어 있으며(“@” 기호 제외), 이름은 기본 URL에 추가됩니다.
아이콘이 표시될 커스텀 사용자 필드는 사용자 카드에 표시되지 않도록 설정하는 것을 권장합니다. 텍스트와 클릭 가능한 아이콘이 동시에 나타나면 다소 중복되는 느낌을 줄 수 있기 때문입니다. 물론 이는 제 의견일 뿐이며, 테마가 자동으로 숨겨주지는 않습니다.
사이트 설정
각 커스텀 필드 이름 항목은 Discourse 인스턴스에서 해당 사용자 필드를 지칭하는 이름과 일치해야 합니다. 기본적으로 테마 컴포넌트는 아래에 표시된 이름들을 기대하지만, 물론 변경할 수 있습니다. 문자열은 대소문자를 구분합니다.
instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'
즐거우게 사용하세요!
39개의 좋아요
좋은 결과네요! 제가 발견한 유일한 문제는 이 때문에 아바타 플레어가 아래로 이동한다는 점입니다. 트리 아이콘은 제 아바타 위에 겹쳐져 있어야 합니다.
7개의 좋아요
weallwegot
7월 20, 2020, 12:11오전
3
아, 테스트해 주시고 이 문제를 찾아주셔서 감사합니다.
5개의 좋아요
메시지 버튼과 배경도 함께 이동한다는 점에 유의하세요. 이 방법으로 모든 것을 수정할 수 있었지만, 조건부로 적용해야 합니다.
#user-card.no-bg .card-content {
margin-top: 0px;
}
.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
bottom: 19px;
}
#user-card .usercard-controls {
margin-top: 0px !important;
}`
3개의 좋아요
bartv
7월 28, 2020, 10:00오전
5
follow 플러그인 과의 호환성 문제가 있습니다. 로그인한 상태에서는 이 TC가 정상적으로 작동하지만, 익명 사용자로 사이트에 접근하면 사용자 카드와 사용자 프로필 페이지가 깨집니다.
업데이트: 이는 소셜 아이콘 링크 TC와 관련이 없습니다. Follow 플러그인 주제에서 보고하겠습니다.
/logs에서 다음 내용을 확인했습니다:
NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’
@angus에게 공유합니다.
좋아요! 다만 아이콘 외에 카드와 프로필에 필드 이름과 URL도 함께 표시되는 점이 유일한 문제입니다. 필드/URL 텍스트 부분을 숨길 수 있는 방법이 있을까요?
감사합니다,
1개의 좋아요
weallwegot
7월 29, 2020, 4:54오전
7
안녕, 테스트해줘서 고마워
커스텀 필드에서 “사용자 카드에 표시?” 옵션의 체크만 해제하면 돼
1개의 좋아요
weallwegot
7월 29, 2020, 4:56오전
8
네, 감사합니다. 저도 같은 결론에 도달했지만, 조건부 스타일 적용은 아직 완전히 파악하지 못했습니다. 죄송합니다. 이 부분에 대해 더 경험이 많은 사람을 찾아보겠습니다.
1개의 좋아요
아, 그게 효과적이었네요. 꽤 마음에 드네요, 코딩해 주셔서 감사합니다!
레이
weallwegot
8월 4, 2020, 5:42오후
11
네, 이제 업데이트되었을 겁니다. 이름만 추가했습니다. 여기 확인하실 수 있어요:
committed 05:31PM - 04 Aug 20 UTC
4개의 좋아요
bartv
8월 8, 2020, 6:59오전
12
매끄럽게 작동하지만, YouTube 채널을 하드코딩으로 처리하고 있는 걸 확인했습니다. 일부 사용자는 사용자명을 입력하고 싶어 할 수 있습니다 (채널이 없는 사용자가 있거든요). 채널/사용자명 대신 YouTube 링크 를 직접 입력할 수 있도록 하면 더 좋겠다는 생각이 듭니다.
Instagram/Twitter 필드에 대해 또 다른 생각이 있습니다. 프로필 필드에는 사용자명만 입력하라는 안내를 추가했지만, 여전히 많은 사용자가 전체 URL을 입력합니다 — 많은 사이트에서는 이것이 더 일반적인 방식이기 때문일 겁니다. 이걸 보고 이런 생각이 들었습니다: 값 안에 'https://'가 있는지 감지하고, 있으면 URL 기본값을 더 이상 붙이지 않는 것은 어떨까요? 그러면 입력에 대해 좀 더 관대하고 견고해질 것입니다.
2개의 좋아요
weallwegot
8월 8, 2020, 8:37오전
13
훌륭합니다. 이제 그 제안을 추가했고, 두 가지 유형의 입력 모두에서 작동해야 합니다.
불행히도 유튜브에서 채널과 사용자 프로필의 차이를 정확히 알지 못합니다. 유튜브의 기본 URL은 어떻게 설정하는 게 좋을까요? 그냥 https://youtube.com/으로 하면 될까요?
2개의 좋아요
bartv
8월 12, 2020, 12:42오후
14
채널과 사용자에 각각 /c/와 /u/ 링크가 있다고 생각합니다. 솔직히 여기서는 그냥 URL을 입력하도록 하고, 너무 예쁘게 만들려고 하지 않는 것이 가장 좋은 방법이라고 생각합니다.
4개의 좋아요
weallwegot
8월 22, 2020, 3:27오후
15
아 맞네, 유튜브 링크의 기본 URL 기능을 제거하고, 링크드인처럼 사용자가 전체 URL을 직접 입력할 수 있도록 할게요. 제안해 주셔서 감사합니다. 방금 업데이트했어요.
3개의 좋아요
초보자입니다. 다크 테마를 사용 중이라 아이콘의 글꼴 색상을 변경하기 위해 CSS를 커스터마이징해 보았는데, 어떻게 해도 작동이 안 됩니다.
클래스가 iconic-user-fields인 것 같은데, 해당 클래스의 색상을 변경해 보고 !important를 붙여 보기도 했는데 효과가 없었습니다.
어떤 방법이 있을까요?
감사합니다!
1개의 좋아요
weallwegot
11월 22, 2020, 9:26오후
18
대단히 늦은 답변을 드려 죄송합니다. 그동안 해결 방법을 찾으셨기를 바랍니다.
테마 설정 패널에서 아이콘 색상을 선택할 수 있는 새 설정을 추가했습니다.
2개의 좋아요
renato
11월 25, 2020, 2:18오후
19
먼저 이 테마 컴포넌트를 공유해 주셔서 감사합니다
다른 분들도 같은 문제를 겪고 계신지 모르겠지만, 테마 컴포넌트를 활성화하면 모바일에서 사용자 카드에 겹침 현상이 발생합니다:
모바일에서는 소셜 링크가 제공되지 않을 때 카드가 이전과 동일한 모양으로 보이도록 아래 CSS를 임시 조치로 사용했습니다:
.iconic-user-fields {
padding-bottom: 0 !important;
}
#user-card {
.usercard-controls {
margin-top: 1em !important;
}
}
일반적인 해결책은 아닐 수 있지만, 해당 시나리오에서 저희 커뮤니티에서는 잘 작동했습니다.
1개의 좋아요
renato
11월 28, 2020, 9:37오후
21
최근 코어 변경 사항과 관련이 있는지 확실하지 않습니다: 내 계정으로 로그인한 상태에서는 사용자 카드에 링크가 표시되지만, 로그아웃 상태(익명 탭으로 테스트 중)에서는 이 라인 에서 userFields가 정의되지 않아 콘솔에 오류가 출력됩니다. 이 경우 사용자 카드에는 아바타와 사용자명만 표시되고, 다른 내용은 표시되지 않습니다.
여기서 테스트했듯이 userFields의 존재 여부를 첫 사용 전에 확인하면 카드가 전체적으로 표시되지만, 소셜 아이콘 링크는 표시되지 않습니다.
이 문제를 겪고 있는 다른 분이 계신가요?
1개의 좋아요
커뮤니티에 활성화했는데 깔끔하게 보입니다.