[티스토리] 스킨 커스텀 - 글쓰기, 관리 버튼 추가하기

요새는 티스토리 스킨 제작할 때 각종 바로가기 메뉴를 안 넣는 추세인 것 같다.

내가 쓰는 hELLO 스킨도 마찬가지. 워낙 깔끔하고 가독성 좋은 게 목적인 스킨이다보니 글쓰기 버튼이 없다.

기본 스킨에는 글쓰기, 관리 등등 나오는 토글이 있었던 것 같은데(사실 기억이 가물가물함)

물론 제작자분께서 블로그 메뉴에 글쓰기 링크를 걸어놓는 방법으로 팁을 주신 게 있다.

https://pronist.tistory.com/5#FAQ-1

hELLO 티스토리 스킨을 소개합니다.

그러나 이 방법은 내 블로그를 방문하는 모두에게 보이기 때문에,

블로그 주인이 아니어서 작동하지도 않는 링크가 불필요하게 보이는 것이 싫어 그냥 직접 만들었당

HTML코드 - 글쓰기, 관리 버튼이 들어갈 자리 만들기

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

그냥 넣고 싶은 자리에 아래 코드를 넣어주면 된다.

<div class="manage-menu" style="display:none;">
	<a href="블로그 주소/manage/entry/post" target='_blank'>글쓰기</a> 
	<a href="블로그 주소/manage" target='_blank'>관리</a>
</div>

사이드바 관리할 때 편하기 때문에 사이드바로 요소를 만들어 넣었다. 

스킨 HTML CSS 설정에 자주 쓰는 요소가 클래스로 들어가있어 새로 만들 때 너무 편하다... 일일이 적용 안 해 주고 그냥 클래스 넣어주면 됨.. hELLO 스킨 진짜 최고예요 여러분

눌렀을 때 새 탭이 아니라 현재 페이지에서 바로 넘어가길 바란다면 target='_blank'를 지워주면 된다.

스크립트 코드 - 관리자일 때 보이기

기본 설정이 display:none 이기 때문에 기본적으론 안 보인다. 이걸 내 블로그일 때만 보이게 바꿔주는 작업

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

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

<!--관리자 버튼-->

<script>
    $(window).on('load', function () {
        const nowurl = window.location.origin;
        const manageElement = $('.manage-menu');
        const myBlogurl = window.T.config.USER.homepage;

        if (myBlogurl === nowurl) {
            manageElement.css('display', 'flex');
        } else {
            manageElement.css('display', 'none');
        }
    });
</script>

display는 원하는 형태에 따라 바꿔주고 CSS 적용해주기

작동하지 않는다면 jQuery CDN을 불러왔는지 확인

간단하게 관리자 버튼 추가 완료!