구글 블로그(blogger) 템플릿 변수 정의 (variable definitions)

그림1

블로거 템플릿을 편집할 때 스킨 부분을 클릭하면 가장 먼저 보이는 것이 바로 'variable definitions' 입니다. 'variable definitions'은 우리 말로는 '변수 정의', 또는 '변수 설정' 등으로 표현할 수 있습니다.

그림2

쉽게 말하면, 필요할 때마다 꺼내쓸 수 있도록, 몇가지 값(value)들을 미리 설정해놓는다는 것입니다. 그 동안 블로거를 하면서 이 부분은 거의 건드리질 않았는데, 이번에 폰트 설정하면서 공부를 해보니 꽤 유용한 기능임을 알 수 있었습니다.

먼저, 이 기능을 활용할 수 있으려면, 각각의 단어들이 무엇을 의미하는지를 알아야 할 텐데요.

name : name은 해당 변수의 고유한 이름, 또는 ID 입니다. 변수 이름에는 빈 공간(스페이스바)을 입력할 수 없습니다. 아래에서 다시 설명하겠지만, 변수를 꺼내 쓸 때 이 name을 이용합니다.

description : 해당 변수에 대한 간단한 설명입니다. description은 일종의 "display name"으로, 여기에 입력한 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

예1 :

 <Variable name="HTML1.background.color" description="쿵쿵따" type="color" default="#fb5e53" value="transparent"/>  

그림3

type : type은 변수의 유형입니다. color나 font, length, string(문자열), automatic 등으로 설정할 수 있습니다. color나 font 유형은 템플릿 디자이너를 통해서 수정할 수 있는 유형입니다. 나머지 유형의 변수는 HTML 편집 모드를 통해서만 수정할 수 있습니다.

default : 해당 변수에 대한 템플릿의 기본(default) 값(value)입니다. 템플릿 디자이너의 고급 설정 화면에서 '고급 변경사항 적용 취소'를 누르면 이 기본(default) 값으로 돌아갑니다. <예1-그림3>에서, 색상의 기본(default) 값이 "#fb5e53" 으로 설정되어 있으므로, 하단의 '쿵쿵따의 고급 변경사항 적용 취소' 버튼을 누르면 <그림4>에서처럼 default 값인 "#fb5e53"이 출력되게 됩니다.

그림4

value : 해당 변수의 현재 값(value)입니다. 현재의 템플릿이 어떤 값을 갖게 하려면, 바로 이 value 값에 주어져야 합니다.


이렇게 5가지로 정의된 변수(variables)들은 그룹으로도 묶을 수 있습니다.

예2 :

   <Group description="내가 만든 메뉴" selector="#HTML2">  
    <Variable name="HTML2Font" description="짜장면" type="font"  
      default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>  
    <Variable name="HTML2Fontcolor" description="짱뽕" type="color" default="#666666" value="#FFFFFF"/>  
   </Group>  

<Group> ... </Group> 태그에서,

description : 개별 변수에서와 마찬가지로 <Group> 태그의 description도 해당 그룹에 대한 설명이며, 여기에 입력된 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

그림5

selector : CSS에서의 선택자(selector)와 같은 개념입니다. 템플릿 디자이너에서 [고급]의 하위메뉴를 클릭하면 하단 화면에 해당 요소가 붉은 점선 하일라이트로 보여지게 되는데, 어떤 요소가 하일라이트될지를 결정하는 것이 바로 <Group> 태그의 selector 입니다.


이렇게 지정해둔 변수들은 템플릿 디자이너에서뿐만 아니라, 다른 요소들의 스타일을 설정할 때도 활용할 수 있습니다.

컬러나 폰트를 요소마다 일일이 지정하게 되면, 템플릿을 변경할 때마다 모든 요소들을 일일이 다 수정해야 합니다. 그러나, 컬러나 폰트 값을 변수로 지정하면, 변수만 변경하면 이 변수와 연동되어 있는 다른 요소들의 값을 같이 수정할 수 있습니다. 활용하기에 따라서, 매우 편리하게 쓰일 수 있는 기능입니다.

그림6

예를 들어, 어떤 위젯의 폰트와 컬러를 설정할 때 <예3>에서 처럼 폰트와 컬러 값을 직접 설정할 수도 있겠지만,

예3 :

 #위젯id {  
 font:italic bold 12px Georgia, serif;  
 color: #2580a2;  
 }  

폰트와 컬러 값이 템플릿의 다른 요소들의 값과 크게 다르지 않다면, <예4>에서처럼 변수로 지정할 수 있을 것입니다.

예4:

 #위젯id {  
 font: $(body.font);  
 color: $(link.color);  
 }  
   

변수 정의(variable definitions)에 정의된 값을 지정할 때는,

$(name)

<예4>에서 처럼, $과 괄호를 입렵하고 괄호 안에 원하는 변수의 name 을 지정해주면 됩니다.


좀 더 직관적인 예를 들어보겠습니다.

 <Variable name="baseball" description="Link Color" type="color" default="#2198a6" value="#2580a2"/>  

변수가 이렇게 설정되어 있고,

  #위젯id {   
  color: $(baseball);   
  }   

이런식으로 위젯의 컬러 값으로 변수를 끌어다썼다면, 복잡해 보이지만 위젯의 컬러 값으로 선택되는 것은 결국 value의 값, 즉 #2580a2 입니다.



! 해외 블로거의 글을 참고하여 작성했습니다.
Template Variables, The Blogger Guide
How to Make Custom Templates Support Blogger Template Designer, Blogger Illustrated