티스토리 목차 링크 클립보드 복사하기

목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다.

 

목차

 

작업 위치

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

 

html 편집을 클릭합니다.

 

그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

 

body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다.

 

링크 복사 아이콘 생성

제목 오른쪽에 링크 복사 아이콘을 삽입하는 함수입니다.

function makeClipboardLink() {
    var tocLink = $('#toc a');
    tocLink.each(function(i, aLink) {
        var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
        var titleId = decodeURIComponent(aLink.href.substr(aLink.href.indexOf('#')+1)).replace(regExp,"\\$&");
        var titleElem = $('#'+titleId);
        titleElem.append('<button style="margin-left:10px;font-size:0.8em;font-family:Font_Awesome_5_Free;color:#5a8634;" onclick="copyTitleToClipboard('+i+')">\uf0c1</button>');
    });
}

먼저 목차 주소 값을 확인하고 일치하는 id 값을 찾아내었습니다. 그리고 button 태그를 동적으로 생성하여 append 하는 방법을 이용하였습니다. 특수문자가 포함되어 있을 경우에 id 값을 인식하지 못해서 정규식을 이용하여 역슬래쉬를 추가해 주었습니다.

 

클립보드 복사 기능 작성

dummy textarea를 생성하여 클립보드 복사하는 방법을 사용하였습니다.

function copyTitleToClipboard(titleIndex) {
    var tocLink = $('#toc a');
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = tocLink.eq(titleIndex).prop('href');
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
    showToast("클립보드 복사 완료!");
}

제목링크 주소 값을 가져와 textarea의 value 속성에 대입한 다음 클립보드 복사하는 자바스크립트 기능을 이용하여 구현하였습니다. 그리고 클립보드 복사 완료 알림 팝업을 토스트 형태로 띄워주었습니다.

 

토스트 기능을 그대로 사용하고 싶으신 분은 다음 포스팅을 참고 바랍니다.

 

티스토리 토스트 알림 팝업 기능 만들기

티스토리 토스트 알림 팝업 기능 만들기

 

결과 확인

제목 옆에 링크 복사 아이콘이 정상적으로 생성된 것을 볼 수 있습니다.

 

클릭하면 클립보드에 복사 완료 메시지가 뜹니다.

 

정상적으로 복사가 된 것을 확인하였습니다.

 

 

 

영상으로도 확인해 보겠습니다.

 

감사합니다 :)