[Tistory] Jquery를 이용한 티스토리 로그인 체크
티스토리 블로그를 운영하면서 스킨을 손보다가 로그인 체크 방식에 대하여 고민끝에 새로운 방법을 시도해 보았습니다.
제가 생각한 새로운 방법에 대하여 살펴 보겠습니다.
주의
이미지상에서 보이는 변수 login-ck를 login_ck로 변경하여야 합니다.
login-ck의 경우 연산 처리를 하여 정상 작동하지 않습니다.
1. 변수 지정
스킨 편집의 HTML 수정란에서 </head> 상단에 당음과 같이 입력하여 변수를 지정합니다.
<!-- 로그인 관련 변수 선언 (웹사이트 자바스크립트에서 유일한 변수) -->
<script type="text/javascript">var login_ck=null;</script>
2. 로그인 메뉴 Class 속성 부여
로그인을 감싸고 있는 태그에 Class 이름을 지정 합니다.
3. 방명록과 댓글에서 로그인 체크
방명록에서 입력란의 변화를 보면 로그인시 일부 폼이 사라지는 것을 확인 할 수 있습니다.
즉 <s_guest_form></s_guest_form> 태그 안에 위치한 태그들은 로그인을 하게 되면 보이지 않습니다.
따라서 <s_guest_form></s_guest_form> 태그의 내부 상태가 보인다면 이는 "로그아웃" 상태 입니다.
</s_guest_form> 바로 위에 다음 태그를 입력하여 login_ck 변수에 "logout"을 입력 합니다.
<!-- 로그인 관련 변수 변수에 현재 상태가 로그 아웃 중이라 입력한다. -->
<script type="text/javascript">login_ck="logout";</script>
같은 이유로 댓글에도 <s_rp_guest></s_rp_guest> 태그 사이에 위의 스크립트를 입력하여 로그아웃 임을 체크 합니다.
5. "로그인"을 "로그아웃"으로 변경하는 스크립트
이제 기본으로 적용되어 있는 "로그인" 링크를 "로그아웃"으로 변경하는 스크립트를 </body>위에 (페이지 가장하단)에 입력합니다.
현재 상태가 로그인 상태라면 "로그아웃"링크가 활성화 되도록 스크립트를 작성합니다.
$("#header li.login").html(logout);의 내용은 2번의 로그인 메뉴의 class가 "id=header"의 내부에 존재하는 "li" 태그 중 "class=login"의 속성을 가진 곳 내부를 "logout" 내용으로 변경한다는 것 입니다.
아래의 스크립트를 </body>위에 입력합니다.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//로그인 스크립트 (로그인시 로그아웃으로 로그인을 바꾼다.)
if (login_ck == "login") {
var logout = '<a href="https://www.tistory.com/logout/?requestURI=http://' + location.host + '/m/914"><span>로그아웃</span></a>';
$("#header li.login").html(logout);
}
});
</script>
이제 적용 후 테스트 해 보시기 바랍니다.
마치며
이 방법으로 로그인 로그아웃을 바꾸는 방법에는 약간의 맹점이 있습니다.
1. 댓글펼치기를 사용하지 않는 경우 포스트 페이지에서는 관리자만 체크 됩니다.
2. 댓글과 관리자 메뉴가 존재하지 않는 페이지에서는 체크가 되지 않습니다.
다른 더 좋은 방법들을 알고 계신다면 함께 공유해 주세요.
감사합니다.