블로그팁: 특정 카테고리의 글에만 원하는 내용을 추가하기

QAOS.com 시삽님의 배려로 블로그 본문 맨 위쪽에 QAOS의 최신 정보를 올려두었습니다.
정말 좋은 정보이지만, 컴퓨터와 관련이 없는 글을 볼 때도 올라와있는 것이 다소 어색해보였습니다.

QAOS의 최신 팁들 (4줄 위에 있는 제목 바로 위에 있는 것입니다)

그래서 컴퓨터 관련 카테고리에서만 이 정보를 띄우는 방법을 찾았습니다.
특정 카테고리에서만 원하는 내용을 출력하려면 태터툴스 치환자와 javascript를 함께 사용해야 합니다.

일단, 위의 정보를 출력하기 위한 코드는 아래와 같습니다.

※ 이 코드는 공식적으로 배포된 코드가 아니기 때문에 주소는 지웠습니다.

태터툴즈(및 태터 기반의 티스토리)에서는 치환자를 이용해서 각종 제어가 가능합니다.
이 중 카테고리의 치환자는 [##_article_rep_category_##]입니다.

제 블로그의 카테고리중 컴퓨터 관련 사항은 모두 컴퓨터야그 카테고리 아래에 들어있습니다.
즉, 치환자를 통해 카테고리를 읽어내어 컴퓨터로 시작하는 경우에만 위의 코드를 출력하도록 하면 되는 것입니다.

그렇게 수정된 코드는 아래와 같습니다.

여기서 주의할 점은 아래와 같습니다.

1. [##_article_rep_category_##] 치환자는 s_article_rep/entry 내부에서만 동작함
   동작 여부는 alert("[##_article_rep_category_##]"); 코드로 미리 확인해야 합니다.
   
   
2. document.write로 코드 출력시 태그 문자(" ' /)는  모두 역슬래쉬(\)를 붙일 것
   스크립트 코드를 출력하는 경우(</script>가 있음)는 브라우저 별로 해석하는 방법이 다릅니다.
   
   
3. 작업이 종료될 때 까지 원래의 코드는 주석처리하고 지우지 말 것

이렇게 하면 모든 작업이 끝나는 줄 알았습니다만…
IE7에서는 문제가 발생합니다. 아래와 같이 비정상적으로 출력됩니다.

허걱! 빌 형 왜이러오…

내부의 스크립트 실행 결과는 일정 내용을 출력해서 HTML에 끼워넣는 것인데, 여러모로 검토해본 결과 IE가 이 끼워넣는 작업을 javascript 실행 종료 이후에 하는 것이 문제의 원인임을 확인했습니다.

즉, <fieldset>~</fieldset> 태그 사이에 집어넣도록 만들었는데, </fieldset> 뒤에다 붙이도록 동작하는 것입니다.

(이건 명백히 IE7의 버그입니다)

이 문제를 해결하려면 위의 코드를 둘로 쪼개서 해결해야 합니다.
이 문제가 해결된 코드는 아래와 같습니다.

아래와 같이 IE에서도 FF와 같이 정상적으로 출력되는 것을 확인할 수 있습니다.