본문으로 바로가기

티스토리 블로그를 하다보면 특정 영역에서 콘텐츠를 포함하거나 제외 해야하는 경우가 발생합니다.

메인 화면이라든지 특정 게시글, 아님 특정 게시판, 특정 카테고리 등등


워드프레스의 경우에는 카테고리 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>

이런식으로 [##_article_rep_category_##] 카테고리명 치환자에서 억지로 값을 갖고와서 사용 하기는 했는데

성공하긴 했지만 완벽 하다고는 말하지 못하겠습니다.


왜냐하면 사용하기 위해선 사전 조건이 필요합니다.


우선 각 스킨들마다 해당 치환자를 사용하지 않으면 적용이 되지않으며

만약 a태그로 찾게 되면  기본 카테고리와 중복되므로 모든 카테고리에서 나오게 되기 때문에

따로 치환자를 사용해서 특정 카테고리에 속해있다는 것을 확인 해줘야합니다.


ccz-cross스킨은 따로 네비게이션바에서 카테고리경로가 나오기때문이 이부분을 이용했습니다.

만약 다른스킨이면 따로 [##_article_rep_category_##]를 글관련 태그로 설정을 해줘야합니다.


또 다른 문제점은.. 만약 해당카테고리의 게시글이 아니라도 span태그에 travel이 포함되어버리면

보여지게되는 문제가 있습니다.


그래서 일딴 만들어는 놓았는데.. 아직도 테스트중입니다.

css카테고리에서만나오는 추천박스game카테고리에서만나오는 추천박스


더 쉽고 완벽하게 적용 할 수 있는 방법을 찾게된다면

다시 포스팅으로 소개를 하겠습니다.


혹시나 응용을 해주실분도 ㅠ_ㅠ 댓글로 알려주신다면 정말 고맙겠습니다.

해당 코드는 오즈의개발자(http://ooz.co.kr/) 사랑베베님께서 도움을 주셨습니다. 감사합니다.

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.19 13:46 신고

    너무 멋진 기능인데요. ㅎㅎ
    저라면 진즉에 포기했을텐데 대단하시다는..

    • BlogIcon COCOSOFT COCO Media 2016.03.19 17:08 신고

      소니러브님의 아이콘폰트 만드는 글을 보고 이미지를 아이콘폰트로 넣었는데 훨씬 용량도 줄고 깔끔하게 나왔어요+_+ㅎㅎ 그사이트에서 svg파일을 바로 넣을수 있더라구요. 부족하지만 좌우 아이콘이 필요하시면 svg파일을 바로 보내드릴게요! 아이콘폰트로 만들어 사용하시면 기존이랑 용량차이도 안나더라구요ㅎㅎ

    • BlogIcon SONYLOVE 2016.03.19 17:38 신고

      아이콘 폰트도 이제 잘 활용하시는군요.
      한번 해보면 완전 누워서 떡먹기라는;;;
      좌우 아이콘은 완전 이쁘고 쌈빡한데 나중에 필요하면 부탁드릴게요. ^_^;

  2. BlogIcon 베짱이 2016.03.23 01:40 신고

    대단하세요.

  3. BlogIcon MOOW 2017.07.25 18:43 신고

    참고해서 공지사항 밑에 페이징 안 나오게 바꿨어요! 정말 감사합니다. 덕분에 어떤 단어로 검색해야 하는지 알아서 관련 자료 더 찾아보고 있는 중이에요. ㅠㅁㅠ
    공지사항 하나뿐인데 밑에 페이지 목록 나오는 게 너무 싫었거든요... ㅠㅠ 이제 깔끔해졌어요. 정말 너무너무너무 감사합니다^^

티스토리 툴바