티스토리 스킨에 로그인 버튼 추가하기(비로그인 시에만 보임)

수성컴|프로그래밍/웹개발(HTML, CSS, JS 등)|2022. 7. 16. 19:04

수성비전자방입니다. 오늘은 HTML DOM을 이용하여 티스토리 스킨에 로그인 버튼을 추가해 보겠습니다. 로그아웃 버튼은 추가하지 않았으며, 로그인 하지 않은 경우에만 보입니다. 여러분이 원하시는 형태와 이 글에서 설명하는 것이 다를 가능성이 커서 적용 결과부터 보여드리겠습니다.

목차

1. 적용 결과 및 구현 계획
2. 티스토리 스킨에 로그인 버튼을 추가하는 방법

1. 적용 결과

비로그인댓글
1.1. 티스토리에 로그인 하지 않은 채로 댓글 입력하는 곳에 가면 '티스토리 계정으로 댓글을 다시려면 여기를 클릭하세요.'라는 문구가 나옵니다. 이것을 클릭하면

카카오계정으로 로그인
1.2. 티스토리 로그인 창이 나옵니다.

로그인댓글
1.3. 로그인을 완료하면 로그인 전에 보던 페이지로 돌아옵니다. 사실 스크롤은 맨 위로 이동하게 되므로 다시 스크롤을 내려야 하긴 합니다. 로그인이 된 상태에서는 로그인/로그아웃 버튼이 보이지 않습니다.(로그인 할 때는 마음대로였지만 로그아웃 할 때는 아니란다?)

여러분이 원하시는 형태가 이것 맞다면 아래 2장을 진행하시면 됩니다.

2. 티스토리 스킨에 로그인 버튼을 추가하는 방법

2.1. 티스토리 스킨 파일에서 index.html을 편집합니다.(티스토리 스킨 편집 페이지를 이용하는 경우 HTML 편집)
2.2. Ctrl+F를 이용하여 그룹 치환자를 찾겠습니다. 방명록을 편집하는 경우 <s_guest_form>을, 댓글을 편집하는 경우 <s_rp_member>를 찾습니다. 그리고 아래의 코드를 추가하되 방명록의 경우 <s_guest_form></s_guest_form> 사이에, 댓글의 경우 <s_rp_member></s_rp_member> 사이에 넣습니다.
2.3. 추가할 코드는 아래와 같습니다.

<!-- 티스토리 로그인 s -->
    <div class="tab_login"></div>
    <script>
        var loginButton = document.createElement("a");
        loginButton.textContent = "티스토리 계정으로 댓글을 다시려면 여기를 클릭하세요.";
        loginButton.className = "tab_login_link";
        loginButton.href = "https://www.tistory.com/auth/login?redirectUrl=" +  encodeURIComponent(window.location.href);

        var notlogin = document.createElement("div");
        notlogin.textContent = "로그인 하지 않아도 댓글을 다실 수 있습니다.(↓↓↓)";
        notlogin.className = "notlogin";

        document.querySelector(".tab_login").append(loginButton);
        document.querySelector(".tab_login").append(notlogin);
    </script>
    <!-- 티스토리 로그인 e -->

필명을 입력하는 칸(type이 text이고, id가 _인 input 태그)보다 위에 넣어야 보기 예쁩니다.(제 주관적인 생각입니다.)
위의 코드는 댓글 부분에 추가하는 코드입니다. 방명록의 경우 '댓글'이라는 단어를 '방명록'으로 바꾸어 사용하세요.

코드를 간단히 설명해 드리겠습니다.
2행은 div class "tab_login"을 만든 것입니다.
3~15행은 Javascript를 이용한 것입니다.
4~7행은 a 태그를 만듭니다. 이것이 바로 로그인 버튼이 됩니다. 7행이 아마 가장 궁금하실텐데 이 부분은 로그인 후 원래의 페이지로 돌아올 수 있는 링크입니다. encodeURIComponent(window.location.href) 부분이 현재 페이지의 링크를 의미합니다.
9~11행은 div 태그를 만들며, 로그인 하지 않아도 댓글을 달 수 있다는 안내를 합니다.
13행은 로그인 버튼(a 태그)을 tab_login class에 추가합니다.
14행은 비로그인 댓글이 가능하다는 안내(div 태그)를 tab_login class에 추가합니다.

3. 글 마무리

제 글을 읽어 주셔서 감사합니다. 혹시 이 글이 여러분이 원하시는 내용이 아니라면 참고 자료를 읽어 보셔도 좋습니다.(방식이 다르거든요..ㅎㅎ)
다음에 만나요!

4. 참고 자료

1) GigaWatt. 2018. "로그인, 로그아웃 버튼 만들기 [티스토리]", 기가왓. (2022. 07. 12. 방문). https://gigawatt.tistory.com/131
2) 카카오. n. d. "리스트", 티스토리 스킨 가이드. (2022. 07. 22. 방문). https://tistory.github.io/document-tistory-skin/list/list.html

댓글()