로그인

검색

Extra Form
추천지수 7

게시글 주소를 클립보드에 복사하는 기능을 추가하는 팁을 작성해 드렸는데요. 해당 기능을 위해서 클립보드 라이브러리를 이용할 수 있게 되어 다른 것들도 클립보드에 추가로 복사를 할 수가 있습니다.

 

그래서 이번에는 댓글주소를 복사하는 기능을 추가해 보겠습니다.

 

누군가에게 특정 댓글의 정보를 제공해 주고 싶을때 글 주소만 알려주면 해당 댓글을 찾아가기가 어렵습니다. 그래서 댓글 주소를 정확히 알려주면 주소를 입력하면 해당 댓글 위치까지 찾아가게 되어 바로 댓글을 열람할 수 있습니다.

 

#commnet_댓글번호 라는 형식의 주소는 앵커의 역할을 하여 해당 댓글을 찾아갑니다. 보통 스킨에서 댓글마다 comment_댓글번호로 id를 가지게 했기에 가능한 것 입니다.

 

 

댓글주소복사.png

 

스케치북5 스킨에 댓글을 출력하는 곳 마우스를 올리면 나타나는 곳에 댓글주소복사라고 직관적인 명칭으로 댓글 주소를 복사할 수 있느 버튼을 만들었습니다.

 

 

게시글 주소복사 기능을 먼저 만들고 이 기능을 만드셔야 하니 이전 게시글을 먼저 확인해 주세요.

 

https://rxtip.kr/rx_tip/4862

 

위 게시글의 팁을 적용하셨다면 이미 <load target="js/clipboard.min.js" /> 라는 코드를 게시판 열람하는 파일의 상단에 입력하셔서 위 js 파일이 잘 로딩되고 있을 겁니다.(게시글 주소 복사 기능을 이미 구현하셨다면 위 코드는 따로 넣지 않아도 된다는 말입니다.)

 

이제 댓글부분에 기능을 추가할 것이니 스케치북5 스킨기준 _comment.html 파일을 열어 기능을 추가합니다.

 

 

이번에도 스크립트를 넣어줘야 하는데 _comment.html 파일의 맨 하단에 아래 스크립트를 넣어주세요.

 

<script>
var clipboard = new Clipboard('.copy_cmt_addr1');
 clipboard.on('success', function(e) {
alert('댓글 주소가 클립보드에 복사되었습니다.');
});
 
clipboard.on('error', function(e) {
prompt("이 댓글의 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", e.text);
});
</script>

 

 

여기서 중요한 것은 이미 게시글복사 기능을 구현하셨다면 그때 사용한 class와 다른 class를 사용해야 한다는 점 입니다. .copy_cmt_addr1 로 1을 붙여서 다른 것으로 바꾼 것입니다.

 

 

 

그리고 "댓글복사하기" 링크를 추가해 줍니다.

 

스케치북 기준 

<!--// 편집 등 -->
<div class="fdb_nav img_tx">

 

위와 같은 부분이 있는데 저 바로 아래에 넣었습니다.

 

<a class="copy_cmt_addr1" href="#" data-clipboard-text="{getFullUrl('','mid',$mid,'document_srl',$oDocument->get('document_srl'))}#comment_{$comment->comment_srl}" onclick="return false;"><i class="fa fa-link" aria-hidden="true"></i>댓글주소복사</a>

 

여기서도 중요한 것은 class가 스크립트에서 약속한 것과 동일하게 하는 것 입니다.

 

요렇게 댓글주소복사 링크를 추가해 주면 클릭하면 자동으로 댓글주소가 복사가 됩니다.

 

 

댓글주소카피.png

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'
  • 벨로위키 2021.04.25 13:21 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.04.25 13:23
    To.벨로위키

    이상한게 아니고 컴파일방식인 방식이라서요.
    정 안되면 게시판 css에 넣어보세요.

  • 벨로위키 2021.04.25 13:49
    To.꿀팁관리소장
    둘 다 안되는듯해요. 여기 해보기전에 한번 넣어봤었어요.
  • profile
    꿀팁관리소장 2021.04.25 13:50
    To.벨로위키
    안된다면 이유가 있을텐데요.. 뭐 지금 상태를 만족하신다면 더 힘들게 하실 필요는 없죠.
  • 벨로위키 2021.04.25 14:50
    To.꿀팁관리소장

    음 레이아웃과 어느 부분이 겹친다는지 아직 잘 이해하지를 못했습니다. 

  • profile
    꿀팁관리소장 2021.04.25 14:51
    To.벨로위키

    https://feedzone.club/Appraisal/7699#comment_7752

    이 주소를 클릭해서 화면을 보세요. 레이아웃의 헤더가 댓글의 내용을 가려요. 위치가 찾는 엘리먼트의 상단에 위치하는게 맞기 때문에 정상적으로 찾은건데 레이아웃 헤더가 고정위치로 사용하는 곳들은 별도 조치가 필요합니다.

  • 벨로위키 2021.04.25 15:09
    To.꿀팁관리소장
    그러네요. 똑같은 게시판인데 왜 다를까요.
    https://feedzone.club/board_VeUk26/7785
    알려주신 코드를 더 적용해봐야겠군요
  • profile
    꿀팁관리소장 2021.04.25 15:11
    To.벨로위키

    무슨 말씀이시죠? 앵커에 의해 이동하는건 댓글 주소로 이동할때 정확하게 해당 주소의 id 값을 찾아가는 것이에요.
    일반 게시글 주소는 그냥 그 페이지를 보여주면 그만이구요.

     

    앵커 이동시 댓글의 위치를 화면의 최 상단에 보여주는데 최 상단에 레이아웃 헤더가 고정이라서 생기는 문제입니다. 

     

    다른 페이지가 오픈 될때는 그런 문제는 없습니다.

     

    저희가 댓글 주소를 제시하는 것은 이 댓글을 정확하게 찾아가기 위한 거니 무슨 이야기인지 이해가 되실거라...

  • 벨로위키 2021.04.25 15:14
    To.벨로위키
    아 저는 여태 댓글창 댓글주소복사 위치를 이야기 하신줄 알았는데 링크 클릭후 이동하는 위치를 이야기 하신거군요. 이제야 이해했습니다.
  • profile
    꿀팁관리소장 2021.04.25 15:33
    To.벨로위키
    CSS 적용해 놓은 상태에서 왜 안되는지 한번 보고싶네요.
  • 흔한 2023.11.02 02:49
    이 팁 엄청 찾아다녔는데 여기서 보네요ㅠ 너무 감사합니다.

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기 2

    Date2021.05.11 Category기능 Views295 Votes3
    Read More
  22. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views399 Votes3
    Read More
  23. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views802 Votes3
    Read More
  24. Read More
  25. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views233 Votes3
    Read More
  26. Read More
  27. Read More
  28. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views214 Votes3
    Read More
  29. 여태 몰랐던 라이믹스의 $document, $oDocument 게시글 정보

    Date2021.04.29 Category기타 Views390 Votes3
    Read More
  30. Read More
  31. 댓글 주소 클립보드에 복사하는 기능 추가하기 11

    Date2021.04.25 Category기능 Views252 Votes3
    Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4