hi098123 Tistory Tip

티스토리 댓글에 링크달기

이전에 작성한 글이 있어서 링크를 겁니다.

hi098123.tistory.com/215

 

티스토리) 댓글에 링크 달기

댓글에 링크를 달 수 없을까? 아래와 같이 간단한 소스로 만들수있다. newTab (새탭으로 열기 true,false) comm 값 (CSS selector와 같은 방식으로) whitelist 값 (자바스크립트 배열 [] 로) 변형해줘야됩니다. 3

hi098123.tistory.com

 

페이지 하단에 아래의 script를 넣으면 댓글에 링크가 걸립니다.

아래의 whitelist설정에 따라 자신의 블로그 링크만 링크가 걸립니다.

(function() {
  var newTab=true; // 새 탭으로열기 true, false
  var comm=document.querySelectorAll(".comm-con p");//이곳에 " " 는 댓글 내용이 담기는 태그를 CSS selector로 지정
  var whitelist=[TistoryBlog.url.split("/")[2],TistoryBlog.tistoryUrl.split("/")[2]];//이곳에 주소 리스트를 쓸수있습니다.
  var wRegex=new RegExp("(https?:\\\/\\\/"+whitelist.join("\\\/?[^\\\s<\\\"']+)|(https?:\\\/\\\/")+"\\\/?[^\\\s<\\\"']+)","g");
  var nl=new RegExp("\n",'g');
  function urlfy(t){return t.replace(wRegex, function(t){return '<a href="'+t+'" target="'+(newTab?"_blank":"_self")+'">'+t+"</a>"})}
  for (var i = 0; i < comm.length; i++) {
    var before=comm[i].innerText;
    var after=urlfy(before);
    if(before!=after){
    	comm[i].innerHTML=after.replace(nl, "<br>");
    }
  }
})();

 

var comm=document.querySelectorAll(".comm-con p");

여기에 들어가는 ".comm-con p" 는 css 스타일의 선택자로

comm-con 클래스의 자손 p 태그를 의미합니다.

 

자신의 스킨에 맞는 선택자는 티스토리 스킨에서 s_rp_rep 태그 안에 표시됩니다.

[##_rp_rep_desc_##] 가 있는곳을 지시하도록 CSS선택자를 작성해야됩니다.

 

 

화이트 리스트 수정 방법

var whitelist=[TistoryBlog.url.split("/")[2],TistoryBlog.tistoryUrl.split("/")[2]];

위와 같이 whitelist가 설정되었다면 "내 블로그"만 링크가 걸립니다.

 

var whitelist=["naver.com",'google.com','hi098123-skin.tistory.com','*.daum.net'];

큰따옴표(") 또는 작은따옴표(')와 콤마(,)로 구분하여 도메인을 넣어주세요.

http 부분은 제거하고 넣어주시면 됩니다.

*.example.com 처럼 * 별표로 마스킹도 가능합니다.

 

var whitelist=[];

모든 주소를 허용하려면 whitelist를 비우세요

주의 : 모든리스트 허용시 악성링크가 걸린다면 애드센스 또는 검색엔진 등에 문제가 발생할 수 있습니다.

 

 

 

주의사항

  1. whitelist에 포함되지 않은 도메인은 링크가 걸리지 않습니다.http부분 제거한 도메인만 입력했나 확인해주세요
  2. 링크 뒤에는 공백(엔터 포함), 따옴표(" ') 이외에 문자가 나오면 링크 주소로 오해할 수 있으므로 링크끝은 공백을 넣어주시는걸 추천드립니다.

 

업데이트 내역

  • 2021-09-07 : 크게 상관은 없지만 성능향상, 불필요한 코드제거

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요

댓글 3개


  • / 🏌🏻‍♂️ 2020.08.30 19:21 신고

    댓글에서 있었으면 좋겠다 했던 기능이었는데.. 적용해 보니 잘 작동하네요. 감사합니다.

    답글 쓰기
    • / hi098123 2020.08.30 20:13 신고

      안녕하세요. 잘 적용되셨나 방문해봤는데 방명록에서는 적용이 안되네요.
      구조상 CSS selector부분에 .comment-link p가 아닌 .comment-list p로 적혀야 글,방명록 댓글 모두에서 작동할 것 같습니다.

    • / 🏌🏻‍♂️ 2020.08.30 20:15 신고

      방문까지 감사합니다. 방명록도 적용해 볼께요.