꼬반 Blog

2015. 09. 08. 꼬반 스킨 V2 베타 적용

2015. 09. 09. 댓글, 대댓글, 비밀글 적용, 댓글 부분 이미지 노출 스타일 수정.

2015. 09. 10. 메인 화면 수정, breadcrumb 링크 적용 부분 수정. 방명록 적용.

2015. 09. 11. 방명록 프로필 이미지 수정, 스타일 수정, 공지사항 적용 및 수정 예정

2015. 09. 11. 1차 베타 버전 완료 / 이후 개발은 버그 수정, 코드 최적화를 위주로 진행 예정               

지난주, 이번주 작업하여 꼬반 스킨 v2 beta를 적용하였습니다.

이번에는 이것저것 많이 집어넣어봤는데

제 마음에는 드는데 다른 사람들이 보기에는 어떨지 모르겠네요.

다만 한정된 기능을 야매로 구현하다보니 속도나 표준을 지켰냐고 하면 대답할 말이 없습니다..(쿨럭)

거기에 배경화면! 이미지만 2mb! 무려 2mb! 로 크기도 크고 (이것도 유료...)

유료 템플릿을 사서 커스텀하였기에 미사용되는 css/js 코드들이 많이 들어가 있다는 점..

일단 v2 작업 하면서 조금더 여러 지식들을 배울 수 

있었다는 점에 위안을 삼아봅니다. ㅎㅎ

비록 부족한 스킨이지만 그래도 작업의 결과물을 다른사람들에게 내어보고

부족한 부분들을 도움을 받아 채워보고자 올려봅니다.

이번이 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)");
  }
});

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

아래 데모 사이트. 1일차 개발 진행 중

http://ggoban.tistory.com/

주말에 쉬고

다음주 월~화에 마무리 해야지.

티스토리를 다시 시작해서 어느정도 시간이 지나니.. 

처음 손을 댄 이 스킨이 아닌 다른 스킨으로 다시 바꾸고 싶어 진다.

으으으..

이번에 만약 바꾸게 되면 대시보드 스타일의 형태로 해볼까 생각중인데..

한번 해봤으니 두번째는 좀더 깔끔하고 퀄리티 있게 할 수 있을 거 같기도 하다..

에디터도 좋아졌고.

바꿀까 말까..

출처 : http://readiz.tistory.com/229#.VYubh_ntllx

3단계에서 적용을 해 놓은 이후 썩 마음에 들지는 않지만 그래도

어느정도 모양은 나오는 것 같네요.

댓글도 붙여놨고.

방명록하고 몇몇부분들 조금 손보고 1차는 마무리 할 듯 합니다.

다음 수정엔 디테일한 부분과 편의적인 부분을 손봐야 겠습니다.

쉽게 생각하다가

직접 만드는것 만큼이나 삽질과 고생을 했는데

그래도 나름 여러 가지 장점이 있는 작업 이었습니다.

원체 디자인적인 부분에 대한 능력이 꽝이다 보니 직접 레이아웃 잡을 생각은 하지도 않았던 지라..

그나저나 티스토리는 위지윅 에디터가 참 불편하네요..

위키를 쓰다 넘어와서 그런지.. 쩝.

에디터를 변경하거나 수정할 수는 없는지 함 찾아봐야겠습니다.

아직 손댈 부분이 남았지만 일단 적용.

남은 부분은 댓글 / 코멘트 달기 / 방명록 / 태그 ?? 정도면 일차로 끝날 듯 합니다.

테스트 블로그에서는 테스트가 한계가 있어서 

본 블로그 적용하고 고쳐야 겠습니다 ㅎㅎ

지난번 작업 1에 비해 좀 진행 되어 모자이크 제거 후 올립니다.

아무래도 지난번엔 막 작업하다가 이번에는 좀 다른 멋진 블로거님들을 눈팅하며 좀 수정했습니다.

수정이래봐야 구매한 템플릿을 수정하는 거긴 하지만 그래도 이것 저것 손이 많이 가네요 ㅎㅎ

이제 조금만 더 손보면 본 블로그에 적용할 듯 싶습니다.