2009년 10월 25일 일요일

링크와 글보관함을 드롭다운 목록으로 보여주기

티스토리에서 링크를 드롭다운 목록으로 보여주기의 업그레이드 포스트임. 이 포스트를 먼저 읽기를 권장함.

본 블로그에선 위의 포스트에서 설명한 방법과는 다소 다른 방법을 적용했다.

사용자 삽입 이미지

이제 정말로 이 방식을 설명함.


보면 알 수 있듯이 (그리고, 전술했듯이) 2가지 스타일의 목록을 사용한다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.

이렇게 두 가지 스타일의 목록을 적용하려면 아래와 같이 수정한다.


0. 사전 준비: 링크 목록 분류

먼저, 링크의 목록을 분류한다.
본 블로그에선 QAOS, 기술관련, 영화, 사회, 기타의 5 종류로 구분하여, 이들을 각각 1qa, 2te, 3mo, 4so, 5bl라고 명명했다.


1. 이미지 준비

QAOS, TECH 등의 분류된 링크를 의미하는 이미지를 만든다.
참고로, 본 블로그에는 26x9 크기의 GIF 파일을 만들어 사용했다.



2. 자바스크립트 코드 삽입

블로그 스킨의 헤더 내에 아래와 같은 코드를 삽입한다.
appendlink()는 link_* 로 시작하는 각 목록들을 구분해서 삽입한다.
(이 목록 이름은 뒤에 다시 설명함)

<script type="text/javascript">
//<![CDATA[
//링크 추가
function appendlink(linkname, linkurl){
  if (/^\[...\]/.test(linkname))
  {
  var opt = document.createElement("option");
  document.getElementById("link_"+linkname.substr(1,3)).options.add(opt);
  opt.text = linkname.substr(5);
  opt.value = linkurl;
  }
  else
  {
    var opt = document.createElement("option");
    document.getElementById("link_5bl").options.add(opt);
    opt.text = linkname;
    opt.value = linkurl;
}
}
//]]>
</script>


3. 글 보관함 스킨 수정

글 보관함의 소스는 아래와 같이 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<s_sidebar_element>
<!-- 글 보관함-->
<div class="widget">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[#\#_archive_rep_link_##]">[#\#_archive_rep_date_##] </a>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>

위의 하일라이트된 부분을 아래와 같이 수정한다.

  <select id="archivelist" onchange="document.location=options[selectedIndex].value;" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif;color:#2970A6;width:214px;">
  <option value="">--- 기간 선택 ---</option>
  <s_archive_rep>
  <option value="[#\#_archive_rep_link_#\#]">[#\#_archive_rep_date_#\#] ([#\#_archive_rep_count_#\#])</option>
  </s_archive_rep>
  </select>

여기서 주목할 부분은 1행의 archievelist와 color, width.

archievelist는 위의 2.에서 설명한 archievelist이다.
color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.

즉, 이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.


4. 링크 스킨 수정

링크의 소스는 아래와 같이 생겼다.
역시, 조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link" class="module">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false"> [#\#_link_site_#\#].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

위의 하일라이트된 부분을 아래와 같이 수정한다.

<img src="./images/bnl_ico_1qa.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_1qa" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- QAOSian 여러분 ---</option>
</select><br/>
<img src="./images/bnl_ico_2te.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_2te" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 기술 관련 사이트 ---</option>
</select><br/>
<img src="./images/bnl_ico_3mo.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_3mo" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 영화 세상 ---</option>
</select><br/>
<img src="./images/bnl_ico_4so.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_4so" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 사회에도 관심을 ---</option>
</select><br/>
<img src="./images/bnl_ico_5bl.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_5bl" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 좋은 분들 ---</option>
</select>
<s_link_rep>
<div style="display:none;">
<script type="text/javascript">
appendlink("[#\#_link_site_#\#]", "[#\#_link_url_#\#]");
</script>
</div>
</s_link_rep>

여기서 주목할 부분은 표시한 행들.
link_1qa, link_2te 등은 링크를 분류한 것이다.
(전술했듯이) 총 5개의 목록으로 구분되어있고, 1qa_로 시작되는 링크는 link_1qa에, 2te_로 시작되는 링크는 link_2te에 삽입한다.
(3, 4, 5도 마찬가지다)

물론, 여기서도 color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.

이 부분들 즉, 드롭다운 목록을 구분하거나 색 및 폭은 자신의 스킨에 맞게 수정해줘야 한다.


5. 링크 제목 수정

지금까지 한 작업은 링크를 제목에 따라 각각의 위치에 삽입하는 방법이었다.

마지막으로 링크의 홈페이지 제목을 수정한다.
QAOS 팁'n텍, 순디자인연구소 등은 QAOS 카테고리에 들어갈 것이라 [1qa] QAOS 팁'n텍, [1qa] 순디자인연구소로 수정.
구차니의 잡동사니 모음은 technical 카테고리에 들어갈 것이라 [2te] 구차니의 잡동사니 모음으로 수정.
이런 식으로 모든 제목을 분류에 따라 수정한다.

이렇게 수정하면 아래와 같은 모습을 볼 수 있다.

사용자 삽입 이미지

앞의 이미지 재활용. v^.^v


덧. 하경 님의 댓글을 참조해 일부 코드를 수정함 (2009. 10.25)

댓글 5개:

  1. 제가 사용하는것보다 훨씬 좋아보입니다.

    이전에 이것때문에 시간 많이 뺐겼는데 함 적용해봐야겠습니다.

    감사합니다.

    답글삭제
  2. @demun - 2009/10/25 11:23
    잘 쓰시기 바랍니다. ^^;

    답글삭제
  3. 비밀 댓글 입니다.

    답글삭제
  4. @Anonymous - 2009/10/25 21:59
    오~ 그렇군요. js를 쓴다고만 생각하다보니 생각을 못했습니다. 스브적 적용해야겠습니다. 고맙습니다.



    그리고, 맞습니다. []로 묶어야 됩니다. 실수했네요. 수정했습니다. 역시 고맙습니다.

    답글삭제
  5. @Anonymous - 2009/10/25 21:59
    스킨과 포스팅을 모두 수정했습니다.

    좋은 답글 진심으로 감사드립니다.

    답글삭제