VTrick” 테마(템플릿) 소스 분석 사용 설명과 레이블에 해당하는 글만 보이도록 위젯 설정

VTrick” 테마(템플릿) 소스 분석과 레이블에 해당하는 글만 보이도록 위젯 설정


 해당 코드는 블로거(Blogger)에서 동작하도록 제작된 “VTrick” 테마(템플릿) 소스입니다. 전체적으로 HTML과 CSS, 그리고 일부 JavaScript를 사용하여 블로그의 레이아웃, 스타일, 기능(예: 모바일 메뉴, 다크모드, TOC, 댓글 양식 등)을 구성하고 있습니다.

특징을 간단히 정리해 드리면 다음과 같습니다:

  1. 기본 구조

    • header-wrapper(헤더), content-wrapper(메인 콘텐츠와 사이드바), footer-wrapper(푸터) 등으로 나뉘어 레이아웃이 구성되어 있습니다.
    • 헤더(메뉴, 로고), 여러 섹션(content-section, sidebar, footer-ads), 푸터(footer-copyright, footer-menu) 등을 위젯(Widget) 섹션으로 나누어 관리하도록 되어 있습니다.

  2. 테마 옵션(Theme Options) 변수

    • `<b:skin>` 내부에 보면 darkmode, userdarkmode, fixedmenu, sidebar 등 여러 가지 설정 변수가 있습니다.
    • 예를 들어, **darkmode == "1px"**이면 기본적으로 다크 모드가 적용되도록, **sidebar == "1px"**이면 사이드바가 왼쪽 정렬(Left Sidebar)로 보이도록 하는 식의 조건 처리가 스킨에서 이루어집니다.

  3. 위젯(Widgets) 구조

    • 블로거는 각각의 영역(헤더, 사이드바, 푸터 등)을 <b:section>으로 감싸고, 그 안에 여러 <b:widget>을 배치하여 관리하도록 되어 있습니다.
    • 예: 
      <b:section class='sidebar' id='sidebar' name='Sidebar' showaddelement='yes'>
  <b:widget type='HTML' ... />
  <b:widget type='PopularPosts' ... />
  ...
</b:section>
    • 이 템플릿에서는 hero-post, ticker, featured, content-section-1, content-section-2, sidebar, footer-ads 등 다양한 <b:section>을 두어, 홈/게시글/푸터 등에 필요한 위젯을 각각 배치하도록 설계되어 있습니다.

  4. 스타일(CSS) 구조

    • <b:skin><![CDATA[ ... ]]></b:skin> 내에 많은 CSS 정의가 있으며, 반응형(responsive) 레이아웃 및 다양한 색상·폰트·크기 등이 변수(:root{--body-bg-color:...})로 정의되어 있습니다.
    • CSS 변수(:root{--main-color: #...})와 함께 다크 모드일 때(html.is-dark)에 재정의(override)되도록 설계되어 있어, 다크 모드 시 색상이나 배경 등을 유연하게 바꾸는 구조입니다.

  5. 모바일 메뉴 / 슬라이드 메뉴

    • <div id='slide-menu'> 부분을 보면, 모바일 기기에서 열리는 사이드 메뉴(햄버거 버튼 클릭 시 열리는 메뉴) 구조가 포함되어 있습니다.
    • .mobile-menu-toggle, .overlay 등을 통해 메뉴 열고 닫기, 오버레이(배경 어둡게) 처리를 합니다.

  6. TOC(목차) 기능

    • autotoc, pagetoc 변수가 1px이면 자동 목차 기능이 활성화되는 로직이 포함되어 있습니다.
    • 스크립트로 #post-body에서 h2, h3, h4 요소들을 읽어 목차(TOC)를 생성하도록 되어 있고, 버튼 클릭 시 접었다 펼 수 있습니다.

  7. 댓글 시스템

    • 블로거 기본 댓글($type={blogger}) 외에도 Disqus, Facebook 등의 다른 댓글 모드를 설정할 수 있도록 만들어진 구조입니다.
    • 예: $type={facebook}이면 <div class="fb-comments">를 로드하고, $type={disqus}이면 디스커스 관련 스크립트를 로드하는 식입니다.

  8. 기타 기능

    • 다중 섹션(Featured Post, Ticker, Trending Posts)을 통해 홈화면이나 다른 페이지에서 인기글/특정 라벨의 글을 노출.
    • LazyLoad, Responsive Image, 코드 하이라이팅(PrismJS) 지원, 아이콘(FontAwesome, Bootstrap Icons) 등도 사용됨.
    • 테마 구글 폰트(Quicksand), Bootstrap Icons, PrismJS, jQuery 등 외부 리소스를 CDN으로 불러오는 구조입니다.
    • requestIdleCallback, prefetch(속도 최적화), 스크롤 애니메이션(to top) 등 각종 최적화/편의 스크립트 포함.

어떻게 활용할 수 있나요?

  • 블로거 대시보드 > 테마(Theme) > HTML 편집 메뉴에서 이 코드를 통째로 붙여넣으면, “VTrick” 테마가 적용됩니다.
  • 블로거의 각 섹션(위젯) 배치나, 위젯 설정(예: PopularPosts, HTML 위젯 내용) 등을 적절히 수정해서 원하는 레이아웃, 디자인, 기능을 조정하면 됩니다.

주의점 / 수정 시 팁

  1. Blogger 편집화면에서 ‘배치(레이아웃)’

    • 템플릿에서 <b:section id='...' name='...' ...> 부분으로 만든 영역은 블로거 레이아웃에서 관리 가능합니다. 원하는 위젯들을 추가/삭제하거나, 배치 순서를 조정하세요.

  2. 다크 모드/Dark Mode

    • 기본적으론 darkmode == "1px"일 때 전체적으로 다크 모드가 됩니다.
    • 또한 userdarkmode == "1px"일 경우, 사용자가 다크모드 버튼을 눌러 바꿀 수 있는 기능이 있습니다.

  3. 코드 하이라이팅(PrismJS)

    • 게시글 본문에 코드 블록이 있으면, <pre class="language-js">...</pre> 형태로 언어 클래스를 넣으면 PrismJS가 자동으로 하이라이팅을 적용합니다(템플릿에서 blockcode == "1px" 조건 시).

  4. 목차(TOC) 자동생성

    • autotoc == "1px" 이며, 게시글 내 <h2>, <h3> 태그가 2개 이상 있으면 자동으로 목차가 생성됩니다.
    • “목차”라는 문구를 “Contents” 대신 다른 텍스트로 바꾸고 싶다면, var toc_title = "..."를 수정하거나 <b:tag name='script'> 내에서 직접 바꿀 수도 있습니다.

  5. 댓글 시스템

    • $type={blogger} 이외에 $type={disqus}, $type={facebook}처럼 라벨(또는 위젯) 내 설정을 바꾸면, 다른 플랫폼 댓글이 적용됩니다.
    • Disqus 사용 시, disqus_shortname 값을 본인 사이트 shortname으로 수정해야 제대로 동작합니다.

  6. 레이아웃 너비

    • :root{--max-width:$(row.width)} 형태로 컨테이너 너비가 결정됩니다. 블로거 테마 설정에서 row.width 변수(기본 1600px)를 조정하면 전체 폭을 줄이거나 늘릴 수 있습니다.

만약 직접 수정 혹은 추가 기능(예: 본문 글꼴 바꾸기, 광고 영역 추가, 푸터 문구 변경, 사이드바 폭 변경 등)이 필요하시면,

  • 블로거 레이아웃(위젯) 메뉴에서 해당 위젯이나 HTML Gadget(HTML 위젯)을 수정하거나,
  • HTML 편집 모드에서 <b:skin> 혹은 <body> 내부 코드를 직접 수정하시면 됩니다.



“앱 기획 및 전략” 레이블에 해당하는 글만 보이도록 하려면, 현재 위젯 설정에 있는

{getContent} $results={3} $label={recent} $type={video}

부분에서 $label={recent} 대신 $label={앱기획및전략}(혹은 실제 라벨 이름에 맞춰 변경)으로 바꿔주면 됩니다.

예) 라벨 이름이 “앱기획및전략”이라면

{getContent} $results={3} $label={앱기획및전략} $type={video}

이런 식으로 수정하시면, 그 라벨에 해당하는 게시물 3개만 표시됩니다.

주의: 라벨 이름에 공백이 있는 경우(예: “앱 기획 및 전략”), 실제 블로거 레이블 이름을 맞춰야 하므로, 라벨을 공백 없이 붙여서 쓰시거나, 템플릿에서 공백 처리를 어떻게 하는지에 따라 앱+기획+및+전략처럼 쓰는 방식이 필요할 수도 있습니다.
일반적으로는 블로거 라벨에서 공백 없이 쓰거나, 라벨을 “앱기획및전략”으로 다시 저장해서 사용하는 것이 편합니다.


 

댓글

댓글 쓰기

이 블로그의 인기 게시물

웹에서 사용자 기기 구별 방법

  웹에서 사용자 기기 구별 방법 User-Agent 문자열 분석 : // User-Agent 문자열을 통해 기기 정보 확인 const userAgent = navigator . userAgent ;   const isIOS = /iPad|iPhone|iPod/ . test ( userAgent ) ; const isAndroid = /Android/ . test ( userAgent ) ; const isMobile = /Mobi|Android/i . test ( userAgent ) ;   if ( isIOS ) { console . log ( 'iOS 기기 사용자 감지' ) ; // iOS 특화 기능/UI 제공 } else if ( isAndroid ) { console . log ( 'Android 기기 사용자 감지' ) ; // Android 특화 기능/UI 제공 } else if ( isMobile ) { console . log ( '기타 모바일 기기 사용자 감지' ) ; } else { console . log ( '데스크톱 사용자 감지' ) ; } 미디어 쿼리 사용 : // 화면 크기로 기기 유형 추정 const isMobileDevice = window . matchMedia ( '(max-width: 768px)' ) . matches ; const isTabletDevice = window . matchMedia ( '(min-width: 769px) and (max-width: 1024px)' ) . matches ; 브라우저 기능 감지 : // Safari 브라우저 감지 (주로 iOS에서 사용) const isSafari = /^((?!chrome|android).)*safari/i . test ( navigator . userAgent ) ;   // Chrome 브라우...
자세한 내용 보기

영상 저장 관련 기능 목록

  영상 저장 관련 기능 목록 1. 오프라인 콘텐츠 저장 ✓ 원클릭 다운로드 - 재생 화면에서 다운로드 버튼으로 빠른 저장 ✓ 다운로드 진행률 표시 - 실시간으로 다운로드 상태 확인 ✓ 다운로드 완료 알림 - 저장이 완료되면 사용자에게 알림 ✓ 자동 저장 설정 - 선호하는 콘텐츠 자동 다운로드 설정 ✓ 배터리/저장공간 최적화 - 기기 상태에 따른 다운로드 조절 2. 다운로드 관리 ✓ 다운로드 목록 보기 - 저장된 모든 콘텐츠 관리 화면 ✓ 다운로드 취소 - 진행 중인 다운로드 중단 ✓ 다운로드 삭제 - 저장된 콘텐츠 삭제로 공간 확보 ✓ 다운로드 정렬/필터링 - 날짜, 크기, 카테고리별 정렬 3. 저장 설정 ✓ 화질 선택 - 고화질/중화질/저화질/오디오만 옵션 ✓ 저장 위치 지정 - 기기 내 저장 위치 설정 ✓ Wi-Fi 전용 다운로드 - 모바일 데이터 사용 방지 ✓ 자동 다운로드 일정 - 특정 시간에 자동 다운로드 실행 4. 오프라인 재생 ✓ 오프라인 표시 - 저장된 콘텐츠 표시 아이콘 ✓ 오프라인 재생 목록 - 인터넷 없이 이용 가능한 콘텐츠 모음 ✓ 저장 콘텐츠 우선 표시 - 오프라인 콘텐츠 우선 노출 ✓ 오프라인 모드 전환 - 데이터 사용 없이 앱 이용 5. 데이터 동기화 ✓ 시청 기록 동기화 - 오프라인에서 봤던 기록 서버 동기화 ✓ 북마크 동기화 - 오프라인에서 추가한 북마크 서버 동기화 ✓ 메타데이터 업데이트 - 최신 콘텐츠 정보 반영 ✓ 만료된 콘텐츠 관리 - 서버에서 삭제된 콘텐츠 처리
자세한 내용 보기

org.xml.sax.SAXParseException 해결 방법

이미지
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MFJCT797');</script> <!-- End Google Tag Manager -->   에러 메시지: pgsql org.xml.sax.SAXParseException; lineNumber: 18 ; columnNumber: 43 ; The reference to entity "l" must end with the ';' delimiter . 아래는 코드의 가독성을 높이고, XML에서 사용할 때 오류를 방지 하도록 & 기호를 &amp; 로 변환한 수정된 코드입니다. ✅ 수정된 Google Tag Manager 코드 (XML 안전 버전) html <!-- Google Tag Manager --> < script > ( function ( w,d,s,l,i ){ w[l]=w[l]||[]; w[l]. push ({ 'gtm.start' : new Date (). getTime (), event : 'gtm.js...
자세한 내용 보기