꼬반 Blog

티스토리 스킨 카테고리 수정기

이번이 2번째 제작하고 있는 스킨이지만.. 기본베이스가 부족하기도 하고 티스토리 시스템이 불편하기도 하고. 많이 불편하기는 하다. 스킨에디터의 문제가 아니라 치환자나 렌더링 부분들이 그렇다. 그래서 많은 스킨들이 카테고리 부분을 별도의 스타일을 주어 변경을 하지만 나의 경우는 먼저 괜찮은 디자인을 구매하고 -> 그 디자인에 커스텀 작업을 하기때문에 100% 구매한 디자인에 다 적용하기 어려운 부분들이 있다. 그래도 카테고리는 얼추 적용을 완료했는데 아래와 같다. 일반적인 치환자를 사용하면 ([ -> (, ] -> ) 으로 바꿈.) (##_category_list_##) 출처 : 골라조님 티스토리 http://dev.golrazo.com/gnu/bbs/board.php?bo_table=lecture&wr_..

Read More

티스토리 스킨 카테고리 수정기

이번이 2번째 제작하고 있는 스킨이지만..


기본베이스가 부족하기도 하고 티스토리 시스템이 불편하기도 하고. 많이 불편하기는 하다.


스킨에디터의 문제가 아니라 치환자나 렌더링 부분들이 그렇다.


그래서 많은 스킨들이 카테고리 부분을 별도의 스타일을 주어 변경을 하지만


나의 경우는 먼저 괜찮은 디자인을 구매하고 -> 그 디자인에 커스텀 작업을 하기때문에 100% 구매한 디자인에 다 적용하기 어려운 부분들이 있다.


그래도 카테고리는 얼추 적용을 완료했는데 아래와 같다.


일반적인 치환자를 사용하면 ([ -> (, ] -> ) 으로 바꿈.)


(##_category_list_##)

출처 : 골라조님 티스토리 http://dev.golrazo.com/gnu/bbs/board.php?bo_table=lecture&wr_id=9

위 처럼 나온다. 이걸 아래처럼 변경하였다.


거의 재조립을 했다..표준 몰라요. 속도 최적화 몰라요. 일단 스타일로 고!(이..이래도 되는거냐! ㅠ) 작업 코드는 아래와 같다.

< ( | > ) 이다.

//테스트 (카테고리 스타일 변경을 위한 추출 및 요소 삽입)
$("ul.t-category li").each(function(i) {
  var str = $(this).children("a").children("span").text();
  var res = str.substring(1, str.length-1);
  $(this).children("a").children("span").html("");
  var str2 = $(this).children("a").text();
  $(this).children("a").text("");
  $(this).children("a").append("(span)"+str2+"(/span)");
  $(this).children("a").append("(b class="badge bg-info pull-right")"+res+"(/b)");
});
//테스트 (카테고리에 화살표 추가)
$("ul.t-category li").each(function(i) {
  var flag = $(this).children("ul").attr("class");
  if(flag=='nav nav-sub') {
    $(this).children("a").addClass("auto");
    $(this).children("a").prepend("(span class="pull-right text-muted")(i class="fa fa-fw fa-angle-right text")(/i)(i class="fa fa-fw fa-angle-down text-active")(/i)(/span)");
  }
});

원하는 모양대로 동작하게 변경하긴 했지만 거지같은 코드를 그대로 작성하니 민망민마하다. 고..고수분들이 보고 고쳐줬으면 좋겠다!(수줍수줍)

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post