[티스토리] 스킨 커스텀 - 로그인, 로그아웃 버튼 추가하기

이전에 글쓰기 버튼을 추가하고 나니 이번엔 로그인, 로그아웃 버튼이 만들고 싶어졌다.

이 역시 기본 스킨에는 토글로 있었던 것 같은데, 스킨 유목민 시절부터 정착한 지금까지 여러 스킨에서 바로가기 토글이 없는 경우가 많았더라서 그냥 많이들 안 쓰나보다.. 하고 말았었다.

하지만 매번 들어올 때 마다 로그인이 풀려있어서, Q 눌러서 관리자 페이지 진입해서 로그인하다보니 너무 귀찮아져버림

블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집

아래 코드를 원하는 자리에 넣어주면 되는데, 우선은 버튼이 들어갈 자리만 만들어 줬다.

<!--로그인, 로그아웃 버튼-->
<div class="login-logout-button"></div>

나는 사이드바 요소로 만들어서 넣었고, 허전해서 옆자리에 티스토리 홈으로 가는 링크도 넣어줬다.

그리고 아래 코드를 HTML편집기의 </head> 바로 윗부분이나 또는 </body>바로 위에 넣어주면 된다. (ctrl+f 검색 사용하면 편함)

(헤드에 넣었을 때 다른 스크립트와 충돌이 발생할 수 있어 body 가장 아래에 넣는 것을 추천)

<!--로그인, 로그아웃-->

<script>
    $(document).ready(function () {
        const userName = window.T.config.USER.name;
        const loginLogoutButton = $('.login-logout-button');

        if (userName) {
            loginLogoutButton.html('<a href="https://www.tistory.com/auth/logout" class="logout-button">로그아웃</a>');
        } else {
            loginLogoutButton.html('<a href="https://www.tistory.com/auth/login" class="login-button">로그인</a>');
        }
    });
</script>

작동하지 않는다면 jQuery CDN을 불러와야 함

이렇게 하면 로그인했을 때는 로그아웃, 로그인이 안 됐을 때는 로그인 버튼이 나오게 할 수 있당.