티스토리 반응형 스킨 만들기(Section 28) - 자바스크립트 활용하기(2)

이번 섹션은 자바스크립트 활용하기 2탄입니다.

지난 섹션에서는 블로그 타이틀을 노출하냐 프로필 이미지를 노출하냐를 자바스크립트로 컨트롤하는 방법을 알려드렸습니다.
궂이 자바스크립트로 컨트롤하지 않고 css에서 수정을 하여도 충분히 가능하지만 자바스크립트로 컨트롤하는 방법을 설명하였습니다.
하지만 이번 섹션에서는 자바스크립트가 없다면 불가능한 활용법을 알려드립니다.

가끔 티스토리 블로그를 방문하면 "관리자"라는 버튼이나 링크가 보일때가 있습니다.
이건 관리자 화면으로 이동하는 링크이지만 소유자가 아닌 손님의 입장에서는 불필요한 링크이기 때문에 "관리자가 로그인"하였을 경우에만 노출이 되도록 하는 스크립트를 만들도록 하겠습니다.

현재 누구야 티스토리 하단부에 보시면 아래와 같이 "관리자" 링크가 보입니다.

관리자 버튼 노출

손님 입장에서는 아무 쓰잘때기 없는 링크죠~
그럼 스크립트 작성에 필요한 조건들을 생각해보죠

1. "소유자가 로그인 시" 관리자 링크 노출
2. "소유자가 비로그인 시" 관리자 링크 노출 안함
3. "손님이 방문 시" 관리자 링크 노출 안함

즉 "블로그 소유자가 로그인 시" 관리자 링크를 노출하면 되는 것입니다.

하지만 로그인했는지 안했는지 어떻게 체크하는 것일까?
정답은 블로그 소유자가 로그인 했는지 안했는지는 티스토리 블로그의 고유 스크립트 값을 확인하면 나옵니다.

티스토리 블로그에 접속하였을 경우 아래와 같은 설정값들을 담고 있습니다.

window.T.config;

위의 값을 호출해보면 아래와 같은 값을 가지고 있습니다.

BLOG:{isDormancy: false, title: "누구야 티스토리"}
COMMENT_LOGIN_CONFIRM_MESSAGE:""
DEFAULT_URL:"http://tistory.noo9ya.com"
LOGIN_URL:"https://www.tistory.com/auth/login/?redirectUrl=http%3A%2F%2Ftistory.noo9ya.com%2F"
NEED_COMMENT_LOGIN:false
NEXT_PAGE:"?page=2"
PREVIEW:false
PREV_PAGE:""
ROLE:"owner"
TOP_SSL_URL:"https://www.tistory.com"

보시면 ROLE 항목에 "owner"라는 값이 있습니다. 이게 바로 블로그 소유자가 로그인 했을경우 owner라는 값을 가지게 되는 것입니다.

ROLE의 규칙을 살펴보면 아래와 같습니다.

• owner : 블로그 소유자가 로그인하여 소유한 블로그에 접근했을 경우
• user : 티스토리 회원이 로그인하였지만 다른 사람의 블로그에 접근했을 경우
• guest : 티스토리 블로그에 접근했지만 로그인을 하지 않았거나 회원가입이 안된 일반 손님

그렇다면 우리는 owner만 체크하여 "관리자" 링크를 노출 시켜주면 되는 것입니다.

바로 스크립트 작성 들어갑니다~

 

STEP 1. script.js 동작 코드 추가하기

    var role = window.T.config.ROLE;
    $.config = {
        logo : function(logo, title, img) {
            logo = logo !== undefined ? logo : false;
            title = title !== undefined ? title : ".blog-logo .title";
            img = img !== undefined ? img : ".blog-logo .img-profile";

            if (logo === true) {
                $(img).show();
                $(title).hide();
            } else {
                $(img).hide();
                $(title).show();
            }
        },

        adminLink : function(target, check) {
            target = target !== undefined ? target : "#footerAdmin";
            check = check !== undefined ? check : true;

            if (check === true) {
                role == "owner" ? $(target).show() : $(target).hide();
            }
        }
    };

$.config 배열 변수위에 var role = window.T.config.ROLE; 을 꼭 추가해야합니다!!

1. 기존 $.config.logo 함수 아래에 adminLink라는 함수를 추가합니다.
2. logo 함수 끝부분에 괄호( } )뒤에 꼭 콤마( , )를 추가해야지 이어서 추가할 수 있습니다.
3. adminLink라는 함수를 추가합니다.
4. adminLink 첫번째 인자값인 target은 "관리자" 링크를 나타내는 html 요소의 클래스나 아이디값을 입력합니다. 없으면 자동적으로 #footerAdmin이라는 값을 찾아 적용시킵니다.
5. adminLink의 두번째 인자값인 check에 true를 넣으시면 소유자가 로그인했을경우 "관리자"링크를 노출시킵니다.
   false를 넣으면 관리자, 유저, 손님 모두에게 노출시킵니다.

 

 

 

STEP 2. config.js 설정 코드 추가하기

;(function($) {
    /**
     * logo 이미지 노출 여부
     *
     * $.config.logo( true/false , "블로그제목 ID(#) 또는 클래스(.)", "프로필 이미지 ID(#) 또는 클래스(.)" );
     * 예 : $.config.logo(true, "#blogTitle", "#profileImg");
     *
     * 첫번째 인자인 true/false를 넣지 않으면 false가 자동으로 입력됩니다.
     * 뒤의 블로그제목과 프로필 이미지의 대상을 지정안하면 기본값이 들어갑니다.
     */
    $.config.logo(true);

    /**
     * 블로그 소유자로 로그인한 경우에만 "관리자"라는 하단 링크가 노출됩니다.
     * 모두에게 노출하길 원한다면 $.config.adminLink()를 주석처리 하시면 됩니다.
     * 기본 대상은 #footerAdmin 입니다.
     * 주석 처리 예 : //$.config.adminLink();
     *
     * 관리자 링크가 여러개면 아래예시와 같이 추가로 넣으시면 됩니다.
     * 상단, 사이드바, 하단 관리자 링크가 있다면 소유자를 제외한 손님은 안보이게 하기 예 :
     * $.config.adminLink("#footerAdmin, #headerAdmin, #sidebarAdmin", true);
     * 두번째 인자인 true는 안넣으시면 기본적으로 작동하며, 모두에게 공개하고 싶으시면 false 값을 넣으시면 됩니다.
     */
    $.config.adminLink("#footerAdmin", true);

})(jQuery);

 

 

 

기존 $.config.logo(true); 아래 부분에 $.config.adminLink("#footerAdmin", true); 라는 설정값을 넣습니다.

#footerAdmin 은 skin.html 에서 "관리자" 링크 부분에 아이디값을 추가하시면 됩니다.

자세한 설명은 주석을 확인하시면 됩니다.

하단 "관리자" 링크에 #footerAdmin 아이디값을 넣고, 사잉드바에 #sidebarAdmin 이라는 아이디를 가진 "관리자" 링크가 있다면 아래와 같이 설정하면 두개다 설정이 적용됩니다.

$.config.adminLink("#footerAdmin, #sidebarAdmin", true);

위 처럼 하셔도 되고 아래와 같이 따로따로 관리하셔도 됩니다.

$.config.adminLink("#footerAdmin", true);
$.config.adminLink("#sidebarAdmin", true);

반대로 모두에게 노출시키고 싶으시면 아래와 같이 넣으시면 됩니다.

$.config.adminLink("#footerAdmin, #sidebarAdmin", false);

 

 

 

STEP 3. 결과 확인

$.config.adminLink("#footerAdmin", true);

블로그 소유자가 아니면 "관리자" 링크 비노출

관리자 버튼 비노출

 

관리자가 로그인 하였을 경우 "관리자" 링크 노출

관리자 버튼 노출

 

완성이 되었습니다.

티스토리에서 제공하는 기본 환경값이나 RSS 값들을 이용하여 자바스크립트로 컨트롤하면 다양한 기능들을 만들 수 있습니다.
제가 설명드린 두가지 활용법을 활용하여 동적인 기능들을 구축하시길 바랍니다.

최종 완성되거나 수정된 tistory-one 파일은 github에서 확인하시거나 다운로드 받으시면 됩니다.
"티스토리 반응형 스킨 만들기 : tistory-one 스킨" 다운로드 받으러 가기

 

 

Section 28까지 따라서 잘 진행하셨다면 나만의 티스토리 블로그 스킨을 만드시는데 도움이 되실겁니다.
그 동안 "티스토리 반응형 스킨 만들기" tistory-one 강좌를 보시느라 수고하셨습니다.

궁금한 사항이나 버그, 추가 기능들에 대해서 피드백을 남겨주시면 적극 반영하도록하겠습니다.

댓글이나, 방명록 또는 github에 남겨주시면 됩니다.

감사합니다~~