티스토리 블로그를 하다보면 특정 영역에서 콘텐츠를 포함하거나 제외 해야하는 경우가 발생합니다.
메인 화면이라든지 특정 게시글, 아님 특정 게시판, 특정 카테고리 등등
워드프레스의 경우에는 카테고리 ID와 슬러그를 이용해서 분류하고 php수정으로 쉽게 설정이 가능하지만
티스토리 블로그는 php지원을 하지 않고 skin.html 하나로만 만들기 때문에 설정하기는 쉽지 않습니다.
1. 특정 페이지, 카테고리, 주소 에서만 나오는 콘텐츠와
2. 특정 카테고리안에 있는 글에서만 나오게 하는 방법★★을 알아보겠습니다.
1. 특정 페이지, 주소에서만 나오게 하기
사실 이 방법은 꽤 많이 강좌나 포스팅으로 알려져 있습니다.
티스토리 블로그를 메인화면을 티에디션이 아닌 다른 형태로 구현하기 위해서 사용할 때도 많이 사용하고
방명록이나 특정 카테고리 영역의 폼을 바꾸기 위해서도 많이 사용 됩니다.
1)location개체를 사용하는 방법
location은 문서의 URL 정보를 알려줍니다.
location.href - 주소(URL)의 전체 갖고옴
예) http://cocosoft.kr/category/IT%20Review
[Return] http://cocosoft.kr/category/IT%20Review
location.pathname - 주소(URL) 경로 갖고옴
예1) http://cocosoft.kr/category/IT%20Review
[Return] /category/IT%20Review
예2) http://cocosoft.kr/category/IT%20Review/News
[Return] /category/IT%20Review/News
location.search - 매개변수를 반환
예) http://cocosoft.kr/category/IT%20Review/News?page=2
[Return] ?page=2
이 정도만 알아도 티스토리내에서는 충분히 사용가능 할 것 같네요. 자세한 속성은 구글링 ㄱㄱ
사용법
저는 홈화면에서는 이전글 다음글 버튼을 사라지게 만들고 싶었습니다.
<script>
if ( window.location.pathname == '/' ) {
document.write( '<style>#outer_btn_left,#outer_btn_right{display:none !important;}</style>' );
}
</script>
</body>
만약 방명록에서도 함께 사라지기를 원한다면
<script>
if (( window.location.pathname == '/' )||( window.location.pathname == '/guestbook' )) {
document.write( '<style>#outer_btn_left,#outer_btn_right{display:none !important;}</style>' );
}
</script>
</body>
이런 식으로 넣으면 되겠죠?? 여러 카테고리에 적용할 때도요 ;if((조건)||(조건)||...)
html 자체에 class를 집어 넣는 방법도 있습니다.
그건 참고문헌을 통해서 보면 됩니다.
특정 페이지 주소에서만 나오는 콘텐츠를 추가하거나 혹은 숨기고 싶을 때는 간단하게 사용 할 수 있습니다.
이런식으로 갖고 오는 방법도 있네요.
<script>
if(url[url.length-1] == '카테고리명'){
//statement 이벤트
}
</script>
</body>
스크립트 파일은 <head> 또는 <body> 부분에 붙혀 넣기 하면 되고 보통 외부 스크립트 파일은 <head>안에 위치하라고 하는데
스크립트 위치는 크게 상관이 없는 것 같습니다. 다만 코드를 한 곳에 모아두는 습관을 가지는 것이 좋고 페이지에 영향을 주는
외부 스타일 이나 스크립트 파일을 우선 배치시키는 것이 페이지의 내용을 정확하게 표시되고 동작한다는 이론이 있습니다.
참고문헌 및 관련링크.
특정 URL에서 나타나거나 사라지게 하는 방법은 매우 쉽습니다.
특히 티스토리 메인화면을 사용하지 않는 분들 중에 홈화면을 카테고리나 공지사항으로 리디렉션하는 분들이 많은데
이럴 경우 <style>#paging{display:none !important;}</style> 기타 등등으로 갈끔하게 정리하는 것도 가능하죠
다양하게 응용이 가능합니다.
2. 특정 카테고리에 속한 글들만 나오게 하기
특정 카테고리에 속한 글들에게만 적용하는 방법은 많이 까다롭습니다...
특정카테고리에 속한 게시글의 퍼머링크에는 특정카테고리에 속해있는 URL이 나오지 않으니까요
http://id.tistory.com/1
http://id.tistory.com/entry/제목
http://id.tistory.com/m/1
http://id.tistory.com/m/entry/제목
그렇기 때문에 특정 클래스의 포함여부나 카테고리 포함여부를 찾는게 가장 중요했습니다.
기본 원리는 jQurey의 filter() 함수를 사용해서 값을 축출하는 방식을 사용했습니다.
특정 클래스 포함 여부를 확인하기 위해서 진짜 오만 함수는 다사용한 것 같네요. hasclass, hasdata, is, indexof 기타 등등
span태그의 내용중 'travel'이 포함되는 값이 있는지 찾는 것입니다.
그럼 travel 카테고리 일때만 .class가 보여지겠죠?
<script>
if($('span').filter(":contains('Travel')").length > 0) {
$('.class').show();
}
</script>
</body>
이런식으로 Tistory Blog/Html,Css 편집 카테고리명 치환자에서 억지로 값을 갖고와서 사용 하기는 했는데
성공하긴 했지만 완벽 하다고는 말하지 못하겠습니다.
왜냐하면 사용하기 위해선 사전 조건이 필요합니다.
우선 각 스킨들마다 해당 치환자를 사용하지 않으면 적용이 되지않으며
만약 a태그로 찾게 되면 기본 카테고리와 중복되므로 모든 카테고리에서 나오게 되기 때문에
따로 치환자를 사용해서 특정 카테고리에 속해있다는 것을 확인 해줘야합니다.
ccz-cross스킨은 따로 네비게이션바에서 카테고리경로가 나오기때문이 이부분을 이용했습니다.
만약 다른스킨이면 따로 Tistory Blog/Html,Css 편집를 글관련 태그로 설정을 해줘야합니다.
또 다른 문제점은.. 만약 해당카테고리의 게시글이 아니라도 span태그에 travel이 포함되어버리면
보여지게되는 문제가 있습니다.
그래서 일딴 만들어는 놓았는데.. 아직도 테스트중입니다.
 css카테고리에서만나오는 추천박스 |  game카테고리에서만나오는 추천박스 |
더 쉽고 완벽하게 적용 할 수 있는 방법을 찾게된다면
다시 포스팅으로 소개를 하겠습니다.
혹시나 응용을 해주실분도 ㅠ_ㅠ 댓글로 알려주신다면 정말 고맙겠습니다.
해당 코드는 오즈의개발자(http://ooz.co.kr/) 사랑베베님께서 도움을 주셨습니다. 감사합니다.
