삶의 의미는 성장에 있다: (K)블로거(블로그스팟)에서 라벨을 트리구조로 생성하는 방법

google blog(blogspot, blogger)의 post 를 트리 구조로 정리하는 방법을 설명하였습니다.

Main Idea는 원글(How to create Sublabels / Hierarchical Labels in Blogspot) 이며, 구현 시에 잘 안되던 것들은 수정하여 적용 하였습니다.
웹 프로그래밍과 Javascript를 모르는 상태에서 이 기능을 구현하기 위해서 필요한 내용을 검색해서 익혔기 때문에 부족한 점이 있습니다.

적용 순서

1. 필요한 가젯 추가

* 블로그-레이아웃 클릭

1) sidebar-right-1 에서 'HTML/JavaScript' 가젯 추가

- 제목: 'Labels'

- 내용: "." 임시로 아무내용

2) sidebar-right-1 에서 '태그' 가젯 추가

- 제목: '태그'

=> 중요한 것은 '태그' 가젯이 'HTML/JavaScript' 가젯보다 위에 있어야 하는 것

왜냐하면 순서대로 코드를 적용해야 하기 때문에

그래서 만약 순서가 반대로 되어 있으면 수동으로 변경 필요

2. 템플릿 HTML 코드 추가

* 블로그-템플릿-HTML 편집 클릭

1) <head> 바로 아랫줄에 아래 코드 두줄 추가
웹 참조한 블로그와는 위치를 다르게 했습니다.

<link href='https://sites.google.com/site/efekefek/file-js/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='https://sites.google.com/site/efekefek/file-js/createdtree.js' type='text/javascript'/>

2) 아래 형태로 되어있는 태그 위젯의 내용에서

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 ...  
</b:includable>
</b:widget>

- ... 으로 표시된 내용을 모두 지우고 아래 코드로 변경
웹 보여줄 라벨들이 각각 몇번 사용되었는지 숫자를 기억해 놓기 위한 코드 입니다.

<script type='text/javascript'>
  var labelCountMap = {};
  <b:loop values='data:labels' var='label'>
     labelCountMap ["<data:label.name/>"] = "<data:label.count/>";
   </b:loop>
</script>

- 파란색으로 표시된 'Label1' 속의 숫자는 태그 가젯의 수에 따라 변경될 수 있으므로 확인 하여야 한다.

3. 'HTML/JavaScript' 가젯의 내용(코드 추가)

- 아래 내용을 해당 위젯을 내용으로 붙여 놓고 코드내용 중 파란색으로 표시된 label 트리구조 변수를 내가 원하는 형태로 변경
웹 참조한 블로그에 있던 '' 는 없앴습니다. 처음에는 원래 형식이 그런 줄 알았는데 주석같아 보여서 제거 했습니다.

<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
}

function addMap(d, startingNode, parentNode, map) {
 for (var key in map) {
  if (isEmpty(map[key])) {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
  } else {
   d.add(startingNode++,parentNode,key+' ('+labelCountMap[key]+')','/search/label/'+key);
   startingNode = addMap(d, startingNode, startingNode-1, map[key]);
  }
  
 }
 return startingNode; 
}

var data = {
    'label1' : {
        'label2' : {}
    }
};
d = new dTree('d');
d.config.useLines = true;
d.config.useIcons = false;
d.config.inOrder = true;

d.add(0,-1,'');   
addMap(d, 1, 0, data);

document.write(d);
</script>
</div>

4. 최종 결과

http://dtreesample.blogspot.kr/

삶의 의미는 성장에 있다

2016년 3월 30일 수요일

(K)블로거(블로그스팟)에서 라벨을 트리구조로 생성하는 방법

댓글 없음:

댓글 쓰기