fastboot 스킨 수정-메뉴버튼 비활성 로그인아웃 표기 오류
fastboot 스킨 수정-메뉴버튼 비활성 로그인아웃 표기 오류
얼마전 티스토리 개편 후 FastBoot 스킨의 '좌측 메뉴버튼' 
메뉴버튼은 메뉴바 및 사이드바에 기능이 포함돼있으면 기능상 없어도 될 것 같은데 모바일에서는 필요하다고 생각합니다. 이 부분에 대해서 여러 분들이 해결 방안을 제시해 놓고 있습니다. 여러 포스팅 글을 참고하고 시행착오를 거쳐 얻은 결과의 개략을 말해 보겠습니다.
위 이미지와 같이 좌측 메뉴버튼이 활성화 된 상태(모바일에서도 겨의 같은 모습입니다.)와 로그인한 경우 FastBoot 스킨의 의도는 우측 상단의 'Login' 표시를 'Logout'으로 변경하는 것입니다. 이 부분은 취향에 맞춰서 수정해서 사용하고 있는 분이 많더라고요.
★메뉴버튼 활성화와 로그인아웃 표시에 영향을 주는 부분은 스킨 HTML 하단 부분 script 부분입니다.
<script>
$(document).ready(function(){
var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
tmpLogin.className = "";
tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
});
</script>
제가 참고한 글은 모두 이부분에 관한 문제입니다.
제시된 방법을 참조해보면
1. 스크립트 내용을 모두 교체한다.(현재로서는 이 방법이 기능상으로 우위인 걸로 사료됨)
2. 티스토리 관리자 모드에서 꾸미기=>설정에서 블로그 메뉴바를 '표시합니다'로 설정하고 '기본 꾸미기를 사용합니다'는 그대로 두고 '변경사항 저장'을 선택한다.(여러 포스팅에서 제시하고 있습니다.)
3. 스크립트의 일부분을 수정한다.
위의 내용을 번호순으로 살펴보겠습니다.
※1. 스크립트 내용을 모두 교체한다.
여떤 분이 올린 글을 참조했습니다. GitHub에서 나온 글이라고 합니다.
●스크립트를 교체힌다.
if(window.T.config.USER.name)
document.getElementById("loginout_append").innerHTML =
'<a href="https://www.tistory.com/auth/logout"><i class="fa fa-unlock fa-fw" title="로그아웃"></i>Logout</a>';
else
document.getElementById("loginout_append").innerHTML =
'<a href="https://www.tistory.com/auth/login"><i class="fa fa-lock fa-fw" title="로그인">Login</i>Login</a>';
</script>
기존의 스크립트를 위의 스크립트로 교체합니다.
'window.T.config.USER.name'이 개발자 도구에서 보면 나옵니다.
이미지에서 잘보이지 않아 텍스트로 보여드립니다. 본 스킨 HTML에서 <!--F상단 네비게이션 바 끝 --> 하단에 나옵니다.
<script type="text/javascript">
(function() {
if (!window.T) {
window.T = {}
}
window.T.config = {"TOP_SSL_URL":"https:\/\/www.tistory.com","PREVIEW":false,"ROLE":"owner","PREV_PAGE":"\/23","NEXT_PAGE":"\/21","BLOG":{"isDormancy":false,"title":"\--"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https:\/\/www.tistory.com\/---","DEFAULT_URL":"http:\/\/---","USER":{"name":"\◆◆◆◆◆\◆◆◆◆◆\◆◆◆◆◆","homepage":"http:\/\/---"}};
})();
</script>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_---/script/owner.js_-"></script>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_---/script/blog/common.js_-"></script>
여기서 보면 window.T.config는 'user'를 비롯한 여러 속성을 가진 객체변수라 할 수있습니다.
본 script의 위치는 스킨 HTML상에 <s_t3>태그 부분입니다. 티스토리 이용 가이드에서는 자바스크립트를 지정해줄 영역을 선언하기 위해서 <body>안에 <s_t3></s_t3>를 넣어줘야 한다고 말합니다. 위의 이미지에서는 user.name이 'null'로 나오고 텍스트에서는 user.name이 있습니다. 로그인 아웃에 따른 것입니다. 따라서 상단의 스크립트로 대체하면 메뉴버튼 문제, 로그인아웃 표시 문제는 해결됩니다.
※2. 티스토리 관리자 모드에서 꾸미기=>설정에서 블로그 메뉴바 표시 설정
수정하려는 스크립트는 블로그 메뉴바 사용이 설정 되지 않으면 메뉴바 요소는 블로그 글이 브라우저에 표시될 때 포함되지 않습니다.
var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
스크립트상 이스크립트 명령어의 클래스 'tt_menubar_logout'은 표시된 블로그 요소(엘리먼트)에 없습니다.
이 부분은 블로그 포스팅이 브라우저에 표시될때 위와같이 '정의 되지 않음.....' 에러가 납니다. 따라서 본 명령어가 포함된 스크립트는 기능할 수 없습니다.
●블로그 메뉴 사용을 설정하면 블로그 글이 표시될 때 블로그 메뉴가 포함됩니다.
로그인 전에
var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0]; 명령어는 기능합니다.
▶로그인 후 약간의 문제가 생깁니다.
var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0]; 명령문은 첫번째 'tt_menubar_logout' 클래스를 요구하는데 반해 브라우저에 포함된 메뉴바에서는 같은 클래스의 요소(엘리먼트)가 2개 있습니다.
<a href="https://www.tistory.com/member" class="">계정관리</a>
</div>
<div class="tt_menubar_item tt_menubar_bg_bar"></div>
<div class="tt_menubar_item tt_menubar_logout">
<a href="https://www.----" class="tt_menubar_link_tit">로그아웃</a>
</div>
첫번째 요소의 값은 '계정관리'입니다. ("tt_menubar_logout")[0] 인덱스가 0이므로 쳣변째 요소를 지칭합니다. 이 경우에 로그인 후 표시는 'Logout'대신 '계정관리'가 됩니다.
스크립트의 의도대로 된 것은 아니지만 그런데로 기능을 합니다.
'계정관리'를 'Logout'으로 변경하고 링크도 로그아웃으로 스크립트를 변경할 수도 있겠지요.
※3. 스크립트의 일부분을 수정한다.
이 내용은 '블로그 메뉴 표시'를 설정한 상태에서 로그인후
var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
'tt_menubar_logout' 클래스의 두번째 요소의 값이 'Logout'인 것을 감안하여 인덱스 [0]를 [1]로 변경해본 것인데 로그인 전에는 'tt_menubar_logout' 클래스가 하나이므로 기능할 수없으므로 대안이 되지 못하겠습니다.
메뉴버튼 문제, 로그인아웃 표기 문제는 var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0]; 본 스크립트문에서 기인했습니다. window.T.config문을 사용하는 스크립트로 사용할 것을 권합니다.