티스토리 블로그의 북클럽 스킨의 코드 오류를 수정하는 방법입니다.
모바일 접속할 때 팝업 창으로 뜨는 사이드바의 '로그인'과 '로그아웃'이 오류 수정 대상입니다. 텍스트로 링크되어 있는 이 버튼은 눌러도 반응이 없습니다.
블로그 관리자가 로그인한 상태이면 '로그아웃' 버튼이 보이고, 관리자가 로그인하지 않았으면 '로그인' 버튼이 보입니다.
오류가 발생하는 이유
아래 코드는 북클럽 스킨의 자바스크립트를 담고 있는 파일에서 복사한 오류 발생 부분입니다. 북클럽 스킨의 자바스크립트 코드는 'script.js' 파일에 담겨 있습니다.
$profile.on("click", ".login", function(){
document.location.href = 'https://www.tistory.com/auth/login?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
$profile.on("click", ".logout", function(){
document.location.href = 'https://www.tistory.com/auth/logout?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
이 코드는 북클럽 스킨 상단에 있는 관리자 아이콘을 누르면 나타나는 팝업 명령어 리스트 중에서 '로그인'과 '로그아웃'을 처리하는 구문입니다. 사이드바의 명령어 링크는 이 구문을 그대로 복사하여 사용하고 있습니다.
※ PC 접속 화면에서는 관리자 아이콘을 클릭하면 메뉴가 나타나고, 모바일 접속 화면에서는 팝업 창 하단에 메뉴 리스트가 있습니다.
페이지를 웹 브라우저가 로딩할 때 메모리에 생성된 해당 DOM 객체를, 자바스크립트가 사이드바 명령어 세트로 복사 및 붙여 넣기 합니다. 전혀 내용 변경이 없기 때문에 명령어가 여전히 '$profile'을 인수(?)로 사용하는 오류가 발생합니다.
팝업 사이드바에서 명령을 실행하기 위한 링크 'login'과 'logout'의 부모 객체는 '$profile'이 아니라 '$("#aside")'입니다.
오류 수정 방법
올바르게 명령을 실행하려면 '$profile'을 '$("#aside")'로 변경한 명령어 함수 코드를 추가해 주어야 합니다. 아래와 같이 2개의 코드 블록을 추가하여 4개의 함수 블록을 구성합니다.
$profile.on("click", ".login", function(){
document.location.href = 'https://www.tistory.com/auth/login?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
$profile.on("click", ".logout", function(){
document.location.href = 'https://www.tistory.com/auth/logout?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
$("#aside").on("click", ".login", function(){
document.location.href = 'https://www.tistory.com/auth/login?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
$("#aside").on("click", ".logout", function(){
document.location.href = 'https://www.tistory.com/auth/logout?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
1. 'script.js' 파일을 텍스트 편집기로 열고
2. 오류 발생한 코드 6행을 복사하여,
3. 다음 라인에 붙여 넣고,
4. 붙여 넣은 코드 부분의 '$profile'을 '$("#aside")'로 수정하고
5. 파일 저장하고,
6. 블로그에 업로드 합니다.
2021년 10월 1일 수정
함수 블록을 4개로 늘리지 않고 북클럽 스킨 원본처럼 2개로 축약하는 방법입니다.
.add('#aside')북클럽 스킨 원본에 이 코드를 추가하면 다음과 같이 간단하게 오류 수정이 가능합니다.
$profile.add('#aside').on("click", ".login", function(){
document.location.href = 'https://www.tistory.com/auth/login?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
$profile.add('#aside').on("click", ".logout", function(){
document.location.href = 'https://www.tistory.com/auth/logout?redirectUrl=' + encodeURIComponent(window.TistoryBlog.url);
});
댓글