티스토리 스킨 댓글창 url주소 입력시 자동 하이퍼링크 걸기

티스토리 댓글창에 참고용으로 url 주소를 기재하는 경우 자동으로 하이퍼링크 걸리게 하는 방법 소개한다. 이 때 클릭해서 이동이 안되고 블로그에 복사방지까지 걸려 있다면 방문자는 긴 주소를 일일이 타이핑해서 주소창에 입력해야 한다. 사용자 편의에 있어서 매우 불편해지는 부분이다.

참고 url 주소가 있을 경우 해당 사이트로 편하게 이동할 수 있도록 댓글창에 url 주소가 입력될 경우 자동으로 하이퍼 링크를 걸어주는 스킨 소스를 소개한다.

티스토리 댓글창 URL 하이퍼링크 걸기

블로그 관리 메뉴에서 스킨편집으로 들어간 뒤, HTML 편집을 눌러준다. 위에 나오는 HTML / CSS / 파일업로드 탭 중에서 파일 업로드로 들어간다. 아래 두개의 스크립트 파일을 다운받아, 본인의 블로그스킨 파일업로드 메뉴에서 올려준다.

스크립트파일.zip 다운로드

1. 위 두개 파일을 컴퓨터에 다운받은 뒤, 파일업로드에서 +추가 를 선택하고 업로드한 후에 저장을 해준다. 그리고 HTML 편집화면으로 가주자.

2. 위 그림과 같이 <HEAD> 부분 아래, <TITLE> 위쪽에 두줄을 추가해준다. 방금 업로드한 스크립트 파일들을 사용할 수 있게 걸어주는 명령어라고 생각하면 된다.

<SCRIPT type=text/javascript src="./images/jquery-1.9.1.js"></SCRIPT>
<SCRIPT type=text/javascript src="./images/autolink.js"></SCRIPT>

3. </BODY>가 끝나는 HTML 창 맨 아랫부분에 다음과 같은 스크립트를 추가해 준다. 이것은 오토링크를 어떤 영역에 걸어줄것인가를 선언해주는 스크립트 명령어이다.

<script type="text/javascript">
    $(document).ready(function() {
        // 티스토리 댓글 영역의 실제 선택자를 사용
        autolink($('.comments'));
        
        // 새로운 댓글이 추가될 때마다 autolink 적용
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    autolink($('.comments'));
                }
            });
        });

        // 댓글 컨테이너 감시 설정
        observer.observe(document.querySelector('.comments'), {
            childList: true,
            subtree: true
        });
    });
</script>

이 때 한가지 유의할 점이 있다. 위 명령어에서 .comments 라는 것은 class=comments 라는 영역을 뜻한다.

본 글의 설명은 티스토리 수익형 블로그용으로 사용하는 SEO 최적화 스킨 라꼬에서 쓰이는 클래스명 기준으로 작성된 소스이며, 혹시 다른 스킨을 쓴다면 본인 스킨에 맞는 클래스명을 찾아서 지정해주어야 한다.

4. 하이퍼링크 스타일은 기존에 본문에 적용해놓았던 파란 글씨에 노란 형광펜 밑줄 스타일이 동일하게 적용되도록 하였다.

.comments li p a {
	color: #1a0dab !important;
    font-weight: bold;
    border-bottom: 3px solid #FCFFA5;
    box-shadow: inset 0 0px 0 white, inset 0 -8px 0 #FCFFA5;
}

.comments li p a:hover,
.comments li p a.touch{
	color: #1a0dab;
  background: #FCFFA5;
  padding-top: 0px;
}