삶의 의미는 성장에 있다: blog

2016년 3월 30일 수요일

(E)How to create hierarchy labels(tree structure) in blogger, blogspot

This is How to make sublabels in tree structure tutorial
Main Idea is from this blog(How to create Sublabels / Hierarchical Labels in Blogspot) and I modify to use my blog
I'm new to web programming(and Javascript), so I'm hardly understand these codes, so just enough to make dTree

Sequece

1. Add Gadgets

* blog-layout click

1) sidebar-right-1, add 'HTML/JavaScript' gadget

- title: 'Labels'

- content: "." temporary

2) sidebar-right-1, add 'tag' gadget

- title: 'tag'

=> 'tag' gadget must be before 'HTML/JavaScript' gadget

so change order if it's not

2. Add Template HTML Code

* blog-template-HTML edit click

1) add below code right after <head>
these codes must work before dTree code usage
I change location from reference blog.

<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) find below code

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

-> and change ... to below code
these code get each label count to be used at dTree

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

- blue 'Label1' can be changed by the Label gadget number

3. Add 'HTML/JavaScript' Gadget content

- add below code to Gadget content and change blue code by your own labels
'' are erased. at first time I thought it should be there, but doesn't work

<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. Result

http://dtreesample.blogspot.kr/

(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/