WhiteGround 2 스킨 설정 및 수정

새로 스킨을 알아보던 중, 꽤 맘에 드는 스킨을 찾아서 곧장 테스트 페이지도 탐색해보고 가져오게 됐다. 저자가 꾸준히 유지 보수도 해주는거 같았고, 무료인데다가, 내맘대로 수정이 된다고 하니 사용하기로 했다.

스킨 다운로드( Link )

스킨을 다운로드해서 티스토리에 어떻게 적용시키는지 저자가 매우 잘 설명해두었다. 내가 저거보다 더 잘 설명할 자신이 없기도 하고 다른 일도 많으니 설치 및 세부 설정에 관심있는 사람들은 저자 블로그로 가서 확인하면 좋겠다.

내맘대로 수정할 수 있다는 가장 큰 장점이 있었다고 생각한 찰나, 내 성격상 그게 가장 큰 단점일지도 모른다는 생각도 들더라. 아니나 다를까 2천줄 가까이 되는 코드들을 찬찬히 읽으면서 공부하고 있는 나를 발견하게 됐다. 저자가 주석을 굉장히 잘 달아놓은 탓에 긴 코드들임에 불구하고 그렇게 어렵지 않았다. 100줄 채 안되는 학생들 숙제 코드 이해하는 것보다 훨씬 쉬웠던 것 같다 ㅋㅋ

그리고는 수정할걸 찾아서 수정은 하게 됐는데 사실 왜 아직도 그런 문제가 발생했는지는 모르겠다. 수정한 것은 skin.html을 보면서 각 글들의 Comments와 Trackbacks 표시하는 부분이다. 애초에 저자도 충분히 심사숙고해서 댓글이나 트랙백이 1개인 경우 s를 없애는 코드를 넣었더라.

문제는 0개인 경우인데, 그대로 s가 출력되더라.

저 문자들을 출력하는 코드를 보아하니 처음부터 서로 다른 변수를 정의해두던데 (아마 class의 text인듯) 'Comment' + 's' 랑 'Trackback' + 's' 로 지정해두고 각자 1개인 경우 's'를 저장해둔 변수를 공백 문자로 덮어씌우면서 's'를 없애더라. 근데 0개일 때는 원하는대로 잘 동작하지 않더라.

<script>
// Comments, Trackbacks 단수일때 -s 삭제
var counters = document.querySelectorAll('.oneCount span:first-child');
for (var i = 0; i < counters.length; i++) {
    if (counters[i].innerText < 2 ) {
        document.querySelectorAll('.oneCount span:nth-child(2)')[i].innerText = "s";
    }
}
</script>

위 코드 557줄의 counters[i].innterText == 1 가 원래 내용이었다. 위에 것처럼 < 2로 바꿔도 잘 안되더라. 웹알못(웹코딩 알지 못한다)이라 type이 문제인지도 모른단 생각도 들고, 세고 싶은 숫자가 0이면 카운트 자체가 안되는거 같기도 하다. 무튼 꼼수를 부려보다가 해결책을 찾았는데 저자의 알고리즘을 뒤집어서 실행시켜보기로 했다.

처음에 's'를 저장해둔 변수에다가 공백을 넣어두고 2개 이상인 경우만 다시 's'를 넣어줘서 바꾸는거다. 558줄의 저 명령어가 얼마나 오래 걸리는 것인지는 모르겠다만 상당히 많은 글의 꽤 많은 댓글과 트랙백을 보유한 웹페이지의 경우는 원래 코드보다 더 느리게 로딩될 것임이 분명하다. 근데 어쩌랴. 정확하지 않던걸;

무튼 아래 코드들과 같이 두 군데를 바꾸면 된다. skin.html을 수정한 경험이 있다면 줄번호가 달라서 찾기 힘들 수도 있다. 그냥 oneCount로 검색하면 딱 그 두 군데 밖에 안나오니까 곧장 찾기 쉬울거다.

<span class="oneCount"><a onclick="">&nbsp;&nbsp;Comment<span class="oneCounts"> </span></a></span>,&nbsp;&nbsp;&nbsp;<span class="oneCount"><a onclick="">&nbsp;&nbsp;Trackback<span class="oneCounts"> </span></a></span>

옆으로 스크롤해서 읽다보면 <span class="oneCounts"> </span> 가 나온다. 여기에 원래 중간에 빈칸에는 s가 들어가 있었는데 없앴다.

<script>
// Comments, Trackbacks 단수일때 -s 삭제
var counters = document.querySelectorAll('.oneCount span:first-child');
for (var i = 0; i < counters.length; i++) {
    if (counters[i].innerText > 1 ) {
        document.querySelectorAll('.oneCount span:nth-child(2)')[i].innerText = "s";
    }
}
</script>

557줄 조건을 > 1 으로 바꿨다. 이러니까 정상적으로 0, 1개인 댓글과 트랙백에 한해 s가 사라지고 로딩되더라. 저자한테도 알렸으니 알아서 수정하시겠지...

또 다른 문제로는 페이지의 글자들이 다들 좀 큰거 같아서 조금씩 작게 해보려고도 했는데 그건 차차 글을 써가면서 피드백을 받아볼 생각이다.

추가>> Google Chrome에서는 제대로 동작하던게, firefox에서는 제대로 동작하지 않는다. 하..... 내일 IE에서 확인해봐야겠다.

 

추가2>> firefox 문제를 해결해봤다. firefox의 경우 새로고침을 눌러도 페이지를 완벽히 재로딩하지 않는 것 같다. 댓글을 실시간으로 달아서 s가 붙고 떼어지고 하는 것을 확인할 수가 없다. 탭 자체를 껐다가 켜야된다.

 

추가3>> IE에서는 정상 동작하는 대신에 글 수정시 두번씩 개행하는 것 같다. 이유가 뭘까..

그리고 트랙백이 안걸린다.

http://lawlite.tistory.com/338