샤르의 일상 공간 __ [팁] 텍스트큐브 / 티스토리 계열 특정 카테고리 목록 펼치기

Posted in " 컴퓨터 " , 2009/10/13 22:29

이전에 포스팅 하였던 '[Tc] 텍스트큐브 카테고리 목록 펼치기'를 보충할 겸 하여 이전 글을 업데이트 하였습니다.

이전 포스팅 보기

텍스트큐브계열의 블로그에서 카테고리 목록을 펼치는 두가지 방법에 대해 다뤄보도록 하겠습니다만, 개인적으로는 아래쪽의 방법 #2를 추천합니다.

방법 #1

먼저 소개드릴 것은 치환자를 변경하는 방법으로, 기본 치환자인 [##_category_##] 를 전체 목록을 출력하는 치환자인 [##_category_list_##] 으로 변경하는 것입니다.

                <!-- (...전략...) -->

                <!-- 카테고리 -->

                <div class="category"> 

                    <h3>Category</h3>

                    <div class="data">[##_category_list_##]</div>

                </div>

                <!-- (...후략...) -->

이런 식으로 말이죠.

하지만 이 경우에는 스타일 시트를 재설정해줘야 모양이 좀 다듬어진다는 치명적인 단점이 있습니다.

스타일 시트를 전혀 손대지 않은 모습으로, 다른 위젯들과 따로노는 듯한 느낌을 지울 수 없습니다.

방법 #2

위의 방법으로 만든 카테고리목록은 썩 보기 좋지 않은 관계로... 좀 더 방법을 찾아보던 중, 키묘

님 블로그에서 아주 간단하면서도 멋진 해결 방법을 찾았습니다.

관리 페이지에서 skin.html 의 <body> 부분에 onload="expandTree();" 을 추가하는 겁니다.

<!-- (...전략...) -->

</head>

<body onload="expandTree();">

<!-- (...후략...) -->

만약 사랑의 출처 표시기를 동시에 사용하고 계시는 분의 경우는 다음과 같이 수정해 주시면 됩니다.

<!-- (...전략...) -->

</head>

<body onload="expandTree();[##_NP_LovelyAutoSourcing_BodyOnLoad_##]">

<!-- (...후략...) -->

처음에 저는 방법 #1을 이용해 목록을 표시하고 스타일 시트를 수정해보려 하였지만,

...처참히 실패하고 결국 검색엔진을 활용하여 방법 #2를 발견, 곧바로 적용시켰습니다.

그런데 공식 홈에서 쩔쩔메는 것 보다 검색엔진에서 검색하는 것이 좀 더 나은 답변을 얻을 수 있다니...

텍스트큐브 공식 홈의 존재 의의에 대해 다시 한 번 생각하게 만드네요.

위에 접어둔 이전 포스팅의 내용을 한 줄로 요약하자면,

<body onload="expandTree();">

이었습니다.
하지만 이 방법은 페이지 로딩이 완료된 이후에 카테고리 목록을 펼치게 되므로 문제가 있을 수 있는데요,

추가적으로 이를 페이지를 로딩하면서 펼치게 만드려면 skin.html에서 카테고리 위젯이 있는 부분에 다음의 소스를 붙여 넣어주시면 됩니다.

                <script language="JavaScript">
                  try {
                    expandTree();
                    } catch(e) {
                  }
                </script>

제 블로그의 경우를 예시로 들면 다음과 같습니다.

                <s_sidebar_element>
                <!-- 카테고리 -->
                <div class="category">
                    <h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
                    <div id="category" style="display:block">
                    <div class="data">[##_category_##]</div>
                    </div>
                </div>
                <script language="JavaScript">
                  try {
                    expandTree();
                    } catch(e) {
                  }
                </script>
                </s_sidebar_element>

분홍색 배경이 추가된 부분입니다.

expandTree()는 텍스트큐브 계열의 설치형 블로그의 카테고리 모듈에 포함되어 있는 함수로,
try {} catch() {} 구문은 카테고리 목록의 로딩이 정상적으로 이루어 지지 않았을 경우에 발생하는 에러를 위한 부분입니다.

특정 카테고리를 펼쳐주려면 위의 코드 중 푸른색 배경 부분을 다음 코드로 대체해 주면 됩니다.

                <script language="javascript">
                    toggleFolder('카테고리의 고유 ID');
                </script>

카테고리의 고유 ID는 페이지에서 소스보기를 통해 toggleFolder로 검색하셔서 카테고리의 순서를 따져가며 찾아보시면 크게 어렵지 않게 찾으실 수 있습니다.
(예를 들자면, a class="click" onclick="toggleFolder('5')" 이런 식으로 적혀 있거든요.)

파이어폭스처럼 선택한 부분의 소스만을 볼 수 있는 기능이 있는 브라우저라면 좀 더 쉽게 찾으실 수 있습니다.

펼치기를 원하는 카테고리만을 드래그하여 선택한 이후에 선택 부분의 소스를 보면 바로 나오니까요.

위에서 언급한 두 요소를 종합적으로 적용하여 이용하면 이런 식으로도 이용이 가능합니다.

                <s_sidebar_element>
                <!-- 카테고리 -->
                <div class="category">
                    <h3><a onclick="toggleLayer('category')" onfocus="this.blur()">Category</a></h3>
                    <div id="category" style="display:block">
                    <div class="data">[##_category_##]</div>
                    </div>
                </div>
                <script language="JavaScript">
                  try {
                    expandTree();
                    } catch(e) {
                  }
                    toggleFolder('카테고리의 고유 ID');
                </script>
                </s_sidebar_element>