부트스트랩 5 티스토리 스킨 만들기 7 - 사이드바 치환자
사이드바(sidebar)
사이드바에는 블로그 프로필, 카테고리,
카운터, 배너 등이 들어갑니다.
티스토리 스킨이 좋은게 사이드바를
이용해서 코드를 삽입할 수 있습니다.
html 뿐만 아니라 자바스크립트도
들어가기 때문에 블로그 관리의
사이드바에서 위치를 조절하여
애드센스 같은 기능을 넣을 수 있습니다.
사이드바에 너무 많은 것을 넣으면
로딩도 느려지고 전체적으로
너저분하게 보일 수도 있지만
필요한 기능을 적당히
채워넣는 것은 좋습니다.
한가지 생각해볼 것은 모바일 트래픽을
중시한다면 사이드바는 노출이
낮기 때문에 페이지 로딩만 잡아먹고
또 기존 블로그 방식으로는
모양새가 좋게 안나옵니다.
모바일은 완전한 반응형 메뉴가
사람들에게 익숙합니다.
이 포스팅의 사이드바는 모바일에도
쓸 수 있는 반응형이지만 데스크탑의
사용성을 좀 더 우선시하는 클래식
스타일입니다. 블로그하면 보통
PC에서 사이드바의 카테고리나
인기글, 최신댓글 등을 클릭하며
보는 방식으로 사용합니다.
(개인취향이며 사람마다 다름)
네이버 블로그를 생각하면 됩니다.
사이드바 치환자
티스토리의 공식문서를 참고하면
사이드바는 <s_sidebar> 그룹 치환자를
사용합니다. 그 안에 <s_sidebar_element>
개별 치환자를 사용하며 첫번째 줄의
주석에 입력한 내용은 블로그 관리의
사이드바에서 사용하는 타이틀입니다.
사이드바는 꼭 위치가 사이드 일
필요도 없고 여러개의 사이드바를
만들 수도 있습니다.
글 본문 아래에 사이드바 그룹치환자를
넣어서 배너 위치로 사용해도 됩니다.
사이드바의 위치는 메인 container의
두번째 col 입니다. aside 태그를 넣은건
사이드바를 넣는 semantic 태그이고
보면 <s_sidebar_element> 단위로
추가해주면 됩니다. 이 개별 요소들은
블로그 관리-사이드바 에서 위치를
바꿀 수 있는데 <s_sidebar> 기준입니다.
무슨 말이냐면 <s_sidebar> 라는 것은
위치를 잡는 용도입니다. 여기서는
col 안에 aside 안에 있습니다.
<s_sidebar_element>는 <s_sidebar>
안에서 순서를 바꿀 수 있고
다른 사이드바에 넣을 수도 있습니다.
말그대로 element(요소)로 취급합니다.
<!-- 사이드바 1 시작 -->
<div class="col-xl-3 col-lg-4">
<aside>
<s_sidebar>
<s_sidebar_element>
<!-- 프로필 카드 -->
<!-- profile card s -->
<div class="card bg-warning text-dark border-danger mb-3">
<div class="card-header">블로그정보</div>
<div class="card-body">
<img src="https://tistory1.daumcdn.net/tistory/3367011/attach/8cfe2971401a480a879223f2119e4075" alt="profile-image" class="card-img-top border">
<hr>
<h5 class="card-title"><b>⟪코딩갘 - 100°⟫</b></h5>
<p class="card-text">코딩 (파이썬, C언어, 자바) 및 IT정보 블로그</p>
<hr>
<a href="#" class="btn btn-primary">button</a> 이메일 등 아이콘
</div>
<div class="card-footer text-muted">
footer
</div>
</div>
<!-- profile card e -->
</s_sidebar_element>
<!-- category s -->
<s_sidebar_element>
<!-- 카테고리 -->
<div class="card border-secondary mb-3">
<div class="card-header">
카테고리
</div>
<p>
</p>
</div>
</s_sidebar_element>
<!-- category e -->
<!-- counter s -->
<s_sidebar_element>
<!-- 카운터 -->
<div class="card border-secondary mb-3">
<div class="card-header">
카운터
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">► 오늘 : </li>
<li class="list-group-item">▻ 총계 : </li>
<li class="list-group-item">▻ 어제 : </li>
</ul>
</div>
</s_sidebar_element>
<!-- counter e -->
<!-- counter graph s -->
<s_sidebar_element>
<!-- 카운터 그래프 -->
<div class="card border-secondary mb-3">
<div class="card-header">
방문자 그래프
</div>
<p></p>
</div>
</s_sidebar_element>
<!-- counter graph e -->
<!-- search bar s -->
<s_sidebar_element>
<!-- 검색창 -->
<div class="input-group mb-3">
<s_search>
<input type="text" name="" value=""
class="form-control" placeholder="검색어 입력"
onkeypress="if (event.keyCode == 13) { }">
<input class="btn btn-outline-primary submit" value="검색" type="button"
onclick="">
</s_search>
</div>
</s_sidebar_element>
<!-- search bar e -->
<!-- random tags e -->
<s_sidebar_element>
<!-- 랜덤 태그 -->
<div class="accordion mb-3" id="random-tag">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
태그
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse"
aria-labelledby="headingOne" data-bs-parent="#random-tag">
<div class="accordion-body">
<s_random_tags>
<ul>
<li><a href="" class="">
</a></li>
</ul>
</s_random_tags>
</div>
</div>
</div>
</div>
</s_sidebar_element>
<!-- random tags s -->
<!-- 추가 사이드바 요소 -->
<!-- 광고-쿠팡 s -->
<s_sidebar_element>
<!-- 쿠팡 위젯 -->
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">쿠팡 위젯</h5>
<iframe src="https://coupa.ng/ccvESj" width="100%" height="75" frameborder="0"
scrolling="no" referrerpolicy="unsafe-url"></iframe>
</div>
</div>
</s_sidebar_element>
<!-- 광고-쿠팡 e -->
</s_sidebar>
</aside>
</div>
<!-- 사이드바 1 끝 -->
*전체 소스코드: skin.html
https://github.com/neokayken/tistory_bootstrap_tut
티스토리 치환자 문서의 예시를 보면서
하나씩 해보면 그렇게 어렵지 않을겁니다.
여기서는 기본적인 카테고리 등을
구현하고 최근글이나 최근댓글 등은
나중에 구현하겠습니다.
이 포스팅 시리즈를 따라왔다면
아직 글 부분이 완전하지 못합니다.
댓글 스킨도 만들지 않았기 때문에
사이드바도 전체 뼈대를 완성하고
그 다음으로 넘어갔다가 나중에
다시 돌아와서 세부사항까지
마무리 짓도록 하겠습니다.
