정보/블로그 운영팁

티스토리 댓글에 URL 자동 링크 적용하는 방법

아미넴 2020. 11. 15.
반응형

티스토리는 댓글에 URL을 입력하면 자동 링크를 생성해 주지 않아서

직접 그 기능을 구현해 보았습니다.

 

북 클럽 스킨 기준입니다.

다른 스킨에 적용하고 싶으신 분은 댓글 남겨 주시면 확인해 드릴게요.

 

깃허브에 올라 온 자동링크 만들어 주는 소스를 참고하여 작성하였습니다.

github.com/bryanwoods/autolink-js

 

bryanwoods/autolink-js

Tiny little tool to find URLs in a string of text and hyperlink them - bryanwoods/autolink-js

github.com

 

소스가 길지 않아서 직접 복사하여 가져 온 다음 필요한 로직을 덧붙여 구현해 보겠습니다.

 

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

 

html 편집을 클릭 합니다.

 

그럼 다음과 같은 HTML 에디터가 뜨는데,

여기에 실제 동작에 필요한 소스 코드를 작성을 해 보겠습니다.

 

body 태그 안쪽 제일 하단 script 태그에 다음과 같이 작성을 합니다.

/* 댓글 자동 링크 */
function commentAutoLink() {
    (function() {
        var autoLink,
            slice = [].slice;
        autoLink = function() {
            var callback, k, linkAttributes, option, options, pattern, v;
            options = 1 <= arguments.length ? slice.call(arguments, 0) : [];
            pattern = /(^|[\s\n]|<[A-Za-z]*\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
            if (!(options.length > 0)) {
                return this.replace(pattern, "$1<a href='$2'>$2</a>");
            }
            option = options[0];
            callback = option["callback"];
            linkAttributes = ((function() {
                var results;
                results = [];
                for (k in option) {
                    v = option[k];
                    if (k !== 'callback') {
                        results.push(" " + k + "='" + v + "'");
                    }
                }
                return results;
            })()).join('');
            return this.replace(pattern, function(match, space, url) {
                var link;
                link = (typeof callback === "function" ? callback(url) : void 0) || ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
                return "" + space + link;
            });
        };
        String.prototype['autoLink'] = autoLink;
    }).call(this);
    var commentList = $('div.comment-list>ul>li>p');
    var replyList = $('div.comment-list>ul>li>ul>li>p');
    for(var i=0; i < commentList.length; i++) {
        commentList[i].innerHTML = commentList[i].innerHTML.autoLink({ target: "_blank" });
    }
    for(var j=0; j < replyList.length; j++) {
        replyList[j].innerHTML = replyList[j].innerHTML.autoLink({ target: "_blank" });
    }
}

$(document).ready(function() {
    commentAutoLink();
});

화면이 다 로딩이 되면 jQuery를 이용하여 댓글이 입력된 부분의 태그를 찾아

하이퍼 링크를 입혀 주는 기능을 먹였습니다.

 

참고하세요 :)

반응형
그리드형(광고전용)

댓글8

  • 김민수 팀장 2020.11.15 20:38 신고

    (♥ω♥*) 행복한 하루되세요
    공감은 언제나 행복!
    답글

  • 곰빛세상 2020.11.15 20:58 신고

    포스팅 잘 보고 갑니다^^
    답글

  • DRY. 2021.05.10 22:09 신고

    안녕하세요, 현재 Whatever라는 티스토리 스킨을 사용하고 있는데,
    이 스킨에도 위 코드가 적용이 가능할까요?

    만약 적용이 가능하다면,
    <script src="./images/script.js">
    (이쪽에 위의 코드를 복사해서 붙여넣으면 되는 것인지 궁금합니다!!)
    </script>
    </body>
    답글

    • 아미넴 2021.05.10 22:25 신고

      안녕하세요. 일단 다른 스킨에서 이용하시려면
      var commentList = $('div.comment-list>ul>li>p');
      var replyList = $('div.comment-list>ul>li>ul>li>p');
      이 부분을 스킨에 맞게 수정해야 할 수도 있구요.
      => 확인 결과 whatever 스킨에서는 그대로 이용이 가능해 보이네요.

      <script></script> 태그는 새로 만드셔서 그 안에 적용하셔야 합니다.

    • DRY. 2021.05.10 22:34 신고

      아, 그러면

      serligjlerglker
      dslngejrbneklt
      <script>
      (이렇게 바디테그가 끝나는 곳 위에 스크립트 태그를 새로 만들고 위의 코드를 넣으면 된다는 말씀이신지 한 번 더 여쭤봐도 될까요?)
      </script>
      </body>

      답변해주셔서 감사합니다:)

    • 아미넴 2021.05.10 22:55 신고

      네 맞습니다. 그 위치에 작성하시고 테스트 해보세요~

    • DRY. 2021.05.11 00:41 신고

      잘 적용이 됐습니다.
      답변해주셔서 감사합니다😄

  • DRY. 2021.05.11 00:14 신고

    넵 감사합니다:)
    답글

💲 추천 글