1. 블로그스팟 테마 XML

byGood Click Value On 100% • • 2 min read
0
2025 에 대한 썸네일

블로그스팟(Blogger)의 테마는 XML 형식으로 작성되며, 블로그의 구조, 스타일, 동적 기능 등을 정의합니다. 이 XML 파일은 블로그스팟의 템플릿 엔진인 Blogger Template Language(BTL)를 사용하여 동적 콘텐츠를 렌더링하며, HTML, CSS, JavaScript와 결합된 구조를 가집니다. 아래에서는 블로그스팟 테마의 XML 구조, 주요 구성요소, 문법, 그리고 관련 세부 사항을 상세히 설명합니다.

1. 블로그스팟 테마 XML 구조 개요

블로그스팟 테마 XML 파일은 기본적으로 다음과 같은 계층적 구조를 따릅니다:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/gml/expr'>
  <head>
    <title><data:blog.pageTitle></data:blog.pageTitle></title>
    <b:skin><![CDATA[ /* CSS 코드 */ ]]></b:skin>
    <b:template-skin>
      <b:variable name='color1' type='color' value='#ffffff'/>
      <!-- 테마 변수 -->
    </b:template>
  </head>
  <body>
    <b:section id='header' class='header'>
      <!-- 위젯 정의 -->
    </b:section>
    <b:section id='main' class='main'>
      <b:widget id='Blog1' type='Blog' locked='true'>
        <!-- 블로그 콘텐츠 -->
      </b:widget>
    </b:section>
    <!-- 동적 콘텐츠 및 루프 -->
    <b:loop values='data:posts' var='post'>
      <!-- 게시물 렌더링 -->
    </b:loop>
  </body>
</html>

주요 특징

  • XML 선언: <?xml version="1.0" encoding="UTF-8" ?>로 시작하여 XML 문서임을 선언.
  • HTML5 기반: <html> 요소는 HTML5 구조를 따르며, 블로그스팟 전용 네임스페이스(xmlns:b, xmlns:data, xmlns:expr)를 포함.
  • BTL 태그: <b:tag>, <data:tag>, <expr:tag>와 같은 블로그스팟 고유 태그를 사용하여 동적 데이터와 논리를 처리.
  • CDATA 섹션: CSS와 JavaScript는 <![CDATA[ ]]> 내부에 작성되어 XML 파싱 오류를 방지.
  • 반응형 지원: 뷰포트 메타 태그와 CSS 미디어 쿼리로 모바일 친화적 설계 가능.

2. 주요 구성요소

블로그스팟 테마 XML은 다음과 같은 주요 구성요소로 이루어집니다:

2.1. <head> 섹션

  • 메타 데이터: 블로그 제목(<data:blog.pageTitle>), 문자 인코딩, 뷰포트 설정 등이 포함.
  • CSS 정의: <b:skin> 태그 내에 CSS 코드를 작성. CDATA로 감싸 파싱 오류 방지. 
    <b:skin><![CDATA[
  body { font-family: Arial, sans-serif; }
  .header { background: #f0f0f0; }
]]></b:skin>
  • 테마 변수: <b:template-skin> 내에 사용자 커스터마이징 가능한 변수를 정의. 
    <b:template-skin>
  <b:variable name='bg_color' type='color' value='#ffffff'/>
  <b:variable name='font_size' type='length' value='16px'/>
</b:template-skin>
    • 변수는 블로그스팟 관리자 패널의 '테마 디자이너'에서 수정 가능.
    • type은 color, length, font, url, string 등이 가능.

2.2. <body> 섹션

  • 섹션(<b:section>): 블로그의 레이아웃을 구획화. 각 섹션은 위젯을 포함. 
    <b:section id='header' class='header' maxwidgets='1' showaddelement='false'>
    • id: 섹션 고유 식별자.
    • maxwidgets: 포함 가능한 최대 위젯 수.
    • showaddelement: 관리자에서 위젯 추가 가능 여부(true/false).
  • 위젯(<b:widget>): 블로그의 동적 콘텐츠를 렌더링. 예: 블로그 게시물, 사이드바, 헤더. 
    <b:widget id='Blog1' type='Blog' locked='true'>
  <b:includable id='main'>
    <!-- 게시물 렌더링 코드 -->
  </b:includable>
</b:widget>
    • id: 위젯 고유 식별자.
    • type: 위젯 종류(Blog, Header, HTML, AdSense 등).
    • locked: 위젯 이동/삭제 가능 여부.
    • <b:includable>: 위젯 내 재사용 가능한 코드 블록 정의.

2.3. 동적 데이터 태그

  • <data:tag>: 블로그 데이터를 출력. 예: <data:blog.title>, <data:post.title>.
    • 데이터 소스: blog(블로그 정보), posts(게시물), widgets(위젯 데이터) 등.
    • 예: <data:blog.url>은 블로그 홈 URL 출력.
  • <b:loop>: 데이터 배열을 반복 처리. 게시물 목록 렌더링에 주로 사용. 
    <b:loop values='data:posts' var='post'>
  <h2><data:post.title/></h2>
  <div><data:post.snippet/></div>
</b:loop>
    • values: 반복할 데이터 배열.
    • var: 각 항목을 참조하는 변수명.
  • <b:if>: 조건문. 특정 조건에 따라 콘텐츠 렌더링. 
    <b:if cond='data:blog.pageType == "index"'>
  <div>홈 페이지 콘텐츠</div>
<b:else/>
  <div>다른 페이지 콘텐츠</div>
</b:if>
    • cond: 조건식. ==, !=, and, or 등 논리 연산자 지원.
    • 페이지 유형: index, item, archive, static_page.

2.4. 표현식 태그(<expr>)

  • <expr:tag>: 동적 속성 값을 계산. 
    <a expr:href='data:blog.url'>홈</a>
    • href, class, style 등 HTML 속성에 동적 값 삽입.
  • 연산 지원: 문자열 연결, 산술 연산, 조건식 가능. 
    <div expr:class='"post-" + data:post.id'></div>

2.5. JavaScript 및 외부 리소스

  • JavaScript는 <b:skin> 외부의 <script> 태그에 작성. 
    <script>
  //<![CDATA[
  console.log('Blogger 테마 로드');
  //]]>
</script>
  • 외부 리소스(폰트, 라이브러리)는 <head>에 추가. 
    <link href='https://fonts.googleapis.com/css2?family=Roboto' rel='stylesheet'/>

3. 블로그스팟 테마 문법 세부 사항

3.1. BTL(Blogger Template Language) 문법

BTL은 블로그스팟의 동적 렌더링을 위한 전용 마크업 언어입니다. 주요 문법은 다음과 같습니다:

  • 데이터 출력:
    • <data:blog.title>: 블로그 제목.
    • <data:post.title>: 게시물 제목.
    • <data:widget.title>: 위젯 제목.
    • <data:blog.languageDirection: RTL(오른쪽에서 왼쪽) 또는 LTR(왼쪽에서 오른쪽).
  • 조건문: 
    <b:if cond='data:blog.isMobile'>
  <div>모바일 뷰</div>
</b:if>
    • 조건식은 문자열 비교, 존재 여부 검사 가능.
  • 반복문: 
    <b:loop values='data:labels' var='label'>
  <a expr:href='data:label.url'><data:label.name/></a>
</b:loop>
  • 포함 파일: 
    <b:include name='header'/>
    • <b:includable>로 정의된 코드 블록 호출.

3.2. 주요 데이터 객체

  • blog: 블로그 전역 정보.
    • blog.title, blog.url, blog.pageType, blog.searchQuery.
  • posts: 게시물 배열.
    • post.title, post.url, post.snippet, post.author, post.timestamp.
  • labels: 게시물의 태그/라벨.
    • label.name, label.url.
  • widgets: 위젯 데이터.
    • widget.id, widget.type.

3.3. 표현식 문법

  • 문자열 연결: 
    <div expr:id='"post-" + data:post.id'></div>
  • 조건식: 
    <div expr:class='data:blog.isMobile ? "mobile" : "desktop"'></div>
  • 수치 연산: 
    <div expr:style='"width: " + (data:width + 10) + "px;"'></div>

3.4. 위젯 문법

  • 위젯 타입: Blog, Header, PageList, AdSense, HTML, Profile, Label 등.
  • 위젯 설정: 
    <b:widget id='HTML1' type='HTML'>
  <b:includable id='main'>
    <div>커스텀 HTML 콘텐츠</div>
  </b:includable>
</b:widget>

5. 실제 XML 테마 예제

아래는 간단한 블로그스팟 테마의 XML 구조 예제입니다:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <title><data:blog.pageTitle/></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <b:skin><![CDATA[
    body { font-family: 'Roboto', sans-serif; margin: 0; }
    .header { background: #333; color: #fff; padding: 20px; text-align: center; }
    .post { margin: 20px; padding: 10px; border: 1px solid #ddd; }
    .sidebar { float: right; width: 30%; padding: 20px; }
    @media (max-width: 600px) { .sidebar { float: none; width: 100%; } }
  ]]></b:skin>
  <b:template-skin>
    <b:variable name='bg_color' type='color' value='#ffffff'/>
  </b:template-skin>
</head>
<body>
  <b:section id='header' class='header'>
    <b:widget id='Header1' type='Header' locked='true'>
      <b:includable id='main'>
        <h1><data:header.title/></h1>
      </b:includable>
    </b:widget>
  </b:section>
  <b:section id='main' class='main'>
    <b:widget id='Blog1' type='Blog' locked='true'>
      <b:includable id='main'>
        <b:loop values='data:posts' var='post'>
          <div class='post'>
            <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
            <div><data:post.snippet/></div>
            <b:if cond='data:post.author'>
              <p>작성자: <data:post.author.name/></p>
            </b:if>
          </div>
        </b:loop>
      </b:includable>
    </b:widget>
  </b:section>
  <b:section id='sidebar' class='sidebar'>
    <b:widget id='HTML1' type='HTML'>
      <b:includable id='main'>
        <h3>사이드바</h3>
        <p>커스텀 콘텐츠</p>
      </b:includable>
    </b:widget>
  </b:section>
</body>
</html>

6. 테마 커스터마이징 및 디버깅 팁

  • 테마 백업: XML 수정 전 블로그스팟 관리자에서 '테마' > '백업'으로 기존 테마 저장.
  • HTML 편집기: 관리자 패널의 '테마' > 'HTML 편집'에서 XML 코드 직접 수정.
  • 미리보기: 수정 후 '미리보기'로 변경 사항 확인.
  • 오류 디버깅:
    • XML 파싱 오류: <![CDATA[ ]]> 누락 또는 잘못된 태그 닫힘 확인.
    • 데이터 태그 오류: <data:tag>의 오타 또는 잘못된 데이터 소스 사용 확인.
    • CSS 충돌: 브라우저 개발자 도구(F12)로 스타일 디버깅.
  • SEO 최적화:
    • <meta name='description' expr:content='data:blog.metaDescription'/> 추가.
    • <meta name='robots' content='index, follow'/>로 검색엔진 색인 허용.
  • 모바일 최적화:
    • <meta name='viewport' content='width=device-width, initial-scale=1.0'/> 필수.
    • CSS 미디어 쿼리로 반응형 디자인 구현.

7. 제한사항 및 주의점

  • 제한된 JavaScript: 블로그스팟은 보안상 <script> 태그 내에서 실행 가능한 JavaScript가 제한적. 외부 호스팅(Google Drive, GitHub) 사용 가능.
  • 서드파티 테마 주의: 무료 테마는 푸터 크레딧이나 숨겨진 링크를 포함할 수 있으므로 소스 코드 검토 필요.
  • 애드센스 승인: 서드파티 테마는 애드센스 정책 위반(예: 복잡한 광고 배치)으로 승인 거절 가능성 있음. 기본 테마로 승인 후 변경 권장.
  • CDATA 필수: CSS와 JavaScript는 반드시 <![CDATA[ ]]>로 감싸야 XML 파싱 오류 방지.
  • 구형 테마 호환성: 2006년 이전의 구형 테마는 최신 블로그스팟 기능(예: 반응형 디자인)을 지원하지 않을 수 있음.

8. 추가 리소스

  • 공식 문서: Blogger의 공식 도움말(https://support.google.com/blogger/)에서 BTL 문법 및 위젯 정보 확인.
  • 커뮤니티: Reddit(r/blogger) 또는 Stack Overflow에서 최신 테마 및 커스터마이징 팁 공유.
  • 테마 소스: 구야비(gooyaabitemplates.com), ThemeXpose(themxpose.com)에서 무료/유료 테마 다운로드.
  • XML 검증: XML 파싱 오류 확인을 위해 온라인 XML 검증 도구(예: xmlvalidation.com) 사용.

블로그스팟 테마 XML은 HTML, CSS, JavaScript에 BTL을 결합한 강력한 구조를 제공하지만, 복잡한 문법과 제한사항으로 인해 초보자에게는 학습 곡선이 있을 수 있습니다. 특정 기능(예: 특정 위젯 추가, SEO 최적화) 구현 방법이나 추가 질문이 있다면 말씀해주세요!




4.94 / 169 rates

댓글 쓰기

다음 이전