Kay on the rails

스킨 차원에서 카테고리 아이콘 넣기

23 Mar 2004

php 상에서의 수정을 하지 않고 java script 만으로 카테고리 아이콘 넣는 방법입니다. 현재 제 블로그에 해당 방법이 적용되어 있습니다.

본 방법의 장점은 index.php 를 수정하실 필요가 없고(이미 최신 버전에는 수정이 되어있나요?), 카테고리가 한글이건 영문이건 상관 없습니다. 카테고리에 파일명을 직접 지정하니까요. 단점은 반수동 반자동이기에 조.금. 귀찮습니다. 카테고리 추가시마다 손을 조.금. 써야하거든요.

1. java script 만들기

category.js 라는 파일을 생성하여 아래의 내용을 넣습니다.

<!--
function category_str2img(strcode)
{
  switch(strcode) {
    case "조용한 몽상가 - 문화 생활":
      imgurl = "./skin/hannal_simple/images/category/think-culture.gif";
      break;
    default:
      imgurl = "./skin/hannal_simple/images/category/dev-etc.gif";
      break;
  }
  document.write("<img src=""+imgurl+"" width="32" height"32" alt=""+strcode+"" />");
}
//-->

여러분이 각자의 환경에 맞게 수정해야 하는 부분은 조용한 몽상가 - 문화 생활 이라는 부분과 imgurl = ""; 안쪽에 있는 이미지 위치입니다. case " 에 있는 조용한 몽상가 - 문화 생활이라는 글자는 카테고리의 이름입니다. 조용한 몽상가 - 문화 생활 라는 카테고리이면 이 부분이 작동된다는 거지요. imgurl 은 출력할 이미지의 위치(url)입니다. 즉 조용한 몽상가 - 문화 생활 라는 카테고리이면 ./skin/hannal_simple/images/category/think-culture.gif 라는 이미지 파일을 출력하겠다는 거지요.

default: 부분은 지정하지 않은 카테고리입니다. 만일 메뉴에 "한날 - 나른한 오후의 단상" 이 있지만 위 javascript 에는 미처 넣지 못했을 경우 바로 이 default: 쪽이 작동되는 겁니다.

카테고리를 추가하려면

    case "카테고리명":
      imgurl = "이미지경로";
      break;

위 코드를 default: 앞에다가 추가해가면 됩니다.

2. 스킨에 적용하기

스킨에 적용하는 부분은 크게 두 부분입니다. 우선 1번 과정에서 생성한 java script 파일을 읽어들이는 부분과 실제 카테고리 이미지를 출력할 부분이지요.

javascript 파일을 읽어들이는 방법은

<script type="text/javascript" src="./category.js"></script>

이렇게 해주면 됩니다. 이때 category.js 파일은 skin.html 과 같은 위치에 있어야하지요. 위 태그는 <body> 전에 넣어주세요. 이제 실제 출력을 해야합니다. 간단합니다.

<script language = "javascript"> category_str2img( "[##_article_rep_category_##]" ); </script>

라고 써주면 됩니다. 태터툴즈 스킨 태그인 <s_article_rep> 과 </s_article_rep> 안이라면 어디에 쓰건 상관 없습니다. 저렇게 써주면 카테고리 이름이 javascript 에서 category_str2img 함수로 전달되고, category_str2img 함수는 이를 받아서 해당하는 이미지 위치를 알아내어 출력하는 것입니다.

제 설명이 좋지 않아 말이 혼란스러우시면 제 블로그의 html 소스를 보시면 이해가 가실 겁니다. <!-- 제목 시작 //--> 부분에 있습니다.

Related Posts