본문 바로가기
유용한_팁/블로그_팁

티스토리 카테고리에 하이라이트 주기

by 씨디맨 2011. 8. 28.
320x100
티스토리는 원래 기반에서는 모든게 개방되어있는 소스이긴 하지만, 티스토리라는 큰 틀에 묶여 있기에 제약이 좀 있습니다. 사소한것이긴 하지만, BODY ID 에 선택된 하이라이트를 줄 수가 없는데요. 무슨 방법이 없을까 하다가 꽁수로 처리를 해봤습니다. 물론 그냥 이런것도 있다는 정도로만 알고 계시는게 좋을듯 합니다.

티스토리 블로그 상단에 제 경우 메뉴를 몇개 카테고리 메뉴를 빼 놓았습니다. 블로그의 홈, 공지, 방명록, 태그 등은 선택된 상태를 유지 할 수 있지만 카테고리 메뉴는 선택된 내용을 유지할 수 없습니다. 복잡한 설명은 빼고 자신의 블로그에 메뉴로 빼둔 부분이 있다면 선택해서 CSS 의 hover 를 건드려 두셨다면 적용 안되는걸 볼 수 있을겁니다.

제 생각에 처음에는 BODY ID 를 알아올 수 없을까 했는데 제한을 해둬서 그게 안되더군요. 그래서 사이트의 주소 끝부분을 읽어와서 특정 내용과 일치하면 CSS 속성을 변경해보기로 했습니다.


<head>
<script src="./images/jquery.min.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function()
    {
        var pathname = window.location.pathname;
        if(pathname == "/category/하드웨어/뉴스" || pathname == "/category/%ED%95%98%EB%93%9C%EC%9B%A8%EC%96%B4/%EB%89%B4%EC%8A%A4"){
        $("#navNews a").css('border-bottom','2px solid #FF9933');
        $("#navNews a").css('color','#ffffff');
        }
    });
    //]]>
</script>

물론 코드는 엉망이긴 하지만, location.pathname 을 가져와서 특정 문구와 맞을 경우 해당 li 의 class 에 속성을 변경하도록 했습니다. 문제는 티스토리의 포스트 주소가 변경 될 때 해당 내용이 없고 그냥 숫자 URL 로 되어 있을 경우 어디에 있는 문서인지 확인할 수 가 없네요. 물론 이것도 좀 더 꽁수를 써서 category 이름을 본문에서 치환자를 가져와서 비교하면 되긴 하지만.. 아직 그건 안해봤네요.

Blog, Blog Tip, body id, body_id, It, Tips, 블로그 팁, 블로그팁, 티스토리, 하이라이트


위에 내용이 복잡하다면 그냥 제 블로그에 상단에 중앙쪽에 있는 메뉴들을 눌러서 뭔가 변하는지 살펴봐주세요. 혹시라도 비슷한 내용을 찾고 있는분께 도움이 되었음 합니다. 좀 더 좋은 방법을 알고 계신분 알려주셔도 감사하겠습니다.

댓글