치환자 설정(카테고리 구성) [티스토리 스킨 수정]

안녕하세요... 명월입니다.
벌써 블로그 재 개시한 지 4일차 입니다....아직까지는 흔들림없이 잘 하고 있네요... ㅎㅎ
그럼 저번 포스팅에 이어서 블로그 디자인 바꾸는 작업을 계속하겠습니다...

어제는 로컬상태에서 디자인을 만들었는데 오늘은 이 디자인을 일단 테스트 블로그를 생성해서 업데이트를 한 후 그 후에 필요에 맞는 치환자를 만들거나 자바스크립트를 만들어 보도록 하겠습니다.

tistory bootstrap



먼저 테스트 블로그를 왜 만든 이유는 뭐 당연하겠지만 본 블로그는 현재 운영중이니 완성되지 않는 스킨을 막 돌리기 싫어서 입니다...
테스트 중일때 누가 블로그를 보고 있다고 하면 재 갱신(Request)할 때마다 사이트가 변경된다고 생각하면 이상하잖아요..
그래서 본 블로그랑 최대한 비슷한 블로그를 생성해서 스킨을 만들어서 적용하면서 버그를 잡아내는 형식으로 수정을 하겠습니다...
위 화면은 일단 메뉴와 기본 골력을 확인하기 위해서 카테고리를 본 블로그랑 최대한 비슷하게 작성해서 등록하였습니다.
그럼 지금부터 작성한 스킨을 등록해서 어떻게 작동 되는지 한번 보겠습니다.

tistory bootstrap



위에 이미지를 보면 카테고리 부분이 생각처럼 만들어 지지 않았네요... Html 를 확인 해 보니 부트스트랩과 티스토리에서 나오는 메뉴 구조랑 다르네요..

tistory bootstrap


tistory bootstrap



위 화면을 보면 당연하겠지만 먼저 ul태그의 id 이름부터 다르게 나갑니다. 그리고 최 아래 메뉴에는 새로운 개시글이 있다라는 표시로 (n)마크가 있어도 되나 가장 위의 n마크가 생기는 건 조금 이상하게 보이겠네요. 기타등등의 형식을 Jquery로 수정을 해 보겠습니다.

Html 소스 보기
자바 스크립트 소스 보기

디자인 개편 후에 포스팅 정리 수순에서 소스와 소스와 관계된 이미지는 모두 삭제하고 gitHub로 연동할 생각입니다. 그게 더 보기 편하고 깔끔한다는 판단입니다. 이 이야기는 후에 다시 자세히 정하고 일단은 지금까지 수정한 것은 위 gitHub에서 확인하시기 바랍니다.
그럼 소스 설명을 조금 설명을 하면 자바스크립트 단에서의 소스를 보면 주로 태그의 Class 이름을 바꾸거나 속성치환을 합니다.
즉, prop 함수를 이용해서 class 이름을 바꾸고 필요한 속성은 attr과 prop 함수를 이용해서 추가,수정을 하였습니다.그리고 최종적으로 마지막으론 메뉴 태그인 <ul class=nav navbar-nav>의 하위 태그로 복제하는 넣는 걸로 하면 메뉴가 나옵니다.
메뉴는 일단 된 것 같으니 확인은 나중에 한 꺼번에 하고 이제는 티스토리의 치환자를 확인하고 입력하는 순서로 소스를 수정하겠습니다.

티스토리 가이드 라인

tistory bootstrap



위 티스토리의 치환자는 내용은 엄청 많은데 그렇게 필요한 치환자는 많지가 않네요.... 그럼 위 사양서를 이용해서 skin.html을 치환자 추가,수정을 하겠습니다.

소스 보기

마찬가지로 수정된 소스 내용은 위 Github에서 확인하시기 바랍니다. 지금은 개발 중이니 주석의 내용이 적지만 최종 프로젝트가 완료되는 시점에 주석도 깔끔하게 넣을 예정이니 후에 한꺼번에 확인하시기 바랍니다.

그럼 여기까지 수정한 내용을 테스트 블로그에 적용하고 확인하겠습니다.

tistory bootstrap



일단 스킨을 적용한 화면이네요... 무언가 글씨등의 style은 엉망이지만 그래도 적용된 화면 같이 보이네요.............. 머리 아픈 작업을 해야겠네요..... 그래도 포기 않고 끝까지 해보겠습니다..


댓글 0개가 달렸습니다.
댓글쓰기