티스토리 블로그를 운영하면서 스킨을 손보다가 로그인 체크 방식에 대하여 고민끝에 새로운 방법을 시도해 보았습니다.
제가 생각한 새로운 방법에 대하여 살펴 보겠습니다.
주의
이미지상에서 보이는 변수 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 + '/914"><span>로그아웃</span></a>';
$("#header li.login").html(logout);
}
});
</script>
이제 적용 후 테스트 해 보시기 바랍니다.
마치며
이 방법으로 로그인 로그아웃을 바꾸는 방법에는 약간의 맹점이 있습니다.
1. 댓글펼치기를 사용하지 않는 경우 포스트 페이지에서는 관리자만 체크 됩니다.
2. 댓글과 관리자 메뉴가 존재하지 않는 페이지에서는 체크가 되지 않습니다.
다른 더 좋은 방법들을 알고 계신다면 함께 공유해 주세요.
감사합니다.
'WebProgram > Tistory' 카테고리의 다른 글
[ Tistory ] 페이지네이션 만들기 (0) | 2016.03.28 |
---|---|
[ Tistory ] Bootstrap 및 CSS를 이용한 댓글 설정 및 사용자 아이콘 처리 (1) | 2016.03.27 |
[ Tistory ] 댓글 관련 스크립트를 사용할 때 (0) | 2016.03.26 |
[Tistory] 티스토리 상황에 맞는 로그인 링크 바꾸기 (4) | 2016.03.05 |
jQuery 를 이용하여 티스토리의 온/오프 상태를 확인하는 방법 (0) | 2015.10.07 |
티스토리 본문 날짜 분리해서 사용하기 (0) | 2015.09.21 |
[수정] Jquery를 이용한 티스토리 이미지 리사이징 (0) | 2015.09.12 |
[티스토리] 카테고리트리 펼치기. (0) | 2015.03.03 |