티스토리 뷰

티스토리 블로그 관리 #6 - 관련글 목록 만들기

Kimyo 2022. 9. 20. 20:47
티스토리 관리 관련 문서
  1. 초기 세팅
  2. 검색엔진 등록
  3. 단축키 활용
  4. 소제목 꾸미기
  5. P태그 여백조정
  6. 관련글 목록 만들기

티스토리를 하다보면 관련글 목록을 깔끔하게 정리하여 보여주고 싶을 때가 있습니다.

1. '카테고리 글 더 보기' 플러그인

관련글 목록을 보여주는 가장 쉬운 방법은 티스토리 기본 플러그인을 쓰는 것입니다.

해당 플러그인을 쓰면 글 하단에 다음과 같이 카테고리의 같은 글을 표시해줍니다.

1.1. 장점 및 단점

제가 생각하기에 '카테고리 글 더 보기' 플러그인은 장점과 단점이 명확합니다.

장점은 간단하게 카테고리의 같은 글을 보여줄 수 있다는 점입니다.

단점은 이런 식으로 카테고리의 글을 보여주게 되면 다음과 같은 고민에 빠지게 된다는 점입니다.

  • 글을 꼭 카테고리로 분류해야 함
    • 카테고리 안에 글이 너무 많아지거나
    • 카테고리 자체가 너무 많아지면 블로그가 지저분해짐
  • 어떤 글을 담을지 내가 선택할 수 없음
    • 글목록에서 제외하고 싶은 글이 있을 수도 있고
    • 작성 순서가 아닌 다른 순서로 글을 보여주고 싶을 수도 있음
  • 반드시 글 최하단에만 카테고리 더 보기가 표시됨
    • 최상단에 표시하고 싶으면 다른 방법을 써야함

결국, 사용자가 원하는 입맛대로 편집하기 어렵다는 점이 가장 큰 단점이지 싶습니다.

3.2 '카테고리 글 더보기' 플러그인 사용 방법

  • 설정을 위해서는 '블로그 관리' > '플러그인' 메뉴로 이동하여 '카테고리 글 더 보기' 플러그인을 활성화화면 됩니다.

  • 설정할 수 있는 항목은 '글자색'과 '표시 개수'입니다.

2. 티스토리 '글 목록' DIY 하기

티스토리 블로그에서 기본으로 제공하는 카테고리 더 보기를 쓰지 않으면 HTML 편집으로 스스로 글목록을 만드는 방법이 있습니다.

단순히 '글접기' '펼치기' 기능을 이용하여 아래와 같은 모양으로 만들어 보기로 하였습니다.

2.1. 티스토리 글접기를 위한 기본문법

티스토리 블로그 편집기에서도 자체적으로 '접은글' 기능을 제공하긴 합니다. 이 경우, 별로 커스터마이징 할 수 있는 게 없으므로 detail, summary 를 사용하기로 합니다.

  • Detail, Summary 를 사용한 글접기 문법은 아래와 같습니다.
    • summary 태그 부분이 제목 밖의 영역이며
    • </summary> 와 </details> 사이의 영역이 숨겨진 영역입니다.
<details>
<summary>제목</summary>
<p>본문</p>
</details>
  • 저는 아래와 같이 ol(순서목록)과 a(링크) 태그를 활용하여 글목록 박스를 만들 예정입니다.
<details>
<summary>ㅇㅇㅇ에 관한 문서</summary>
<ol>
<li><a href="">링크1</a></li>
<li><a href="">링크2</a></li>
<li><a href="">링크3</a></li>
</ol>
</summary>
</details>

2.2. 티스토리 문서 목록을 위한 CSS 편집

  • 먼저, 모든 details, summary 에 서식이 적용되는 걸 원치 않기 때문에, 글목록에 사용될 class 명을 정해줍니다. 저는 다음과 같이 "related" 라는 이름을 사용하기로 했습니다.
<details class="related">
<summary>ㅇㅇㅇ에 관한 문서</summary>
<ol>
<li><a href="">링크1</a></li>
<li><a href="">링크2</a></li>
<li><a href="">링크3</a></li>
</ol>
</summary>
</details>
  • CSS 를 입힐 선택자를 파악해해보겠습니다.

2.2.1 글목록 전체 : Details.related

먼저, 글 목록 전체를 담당하는 details.related 의 서식을 잡아줘야 합니다.

  • 개발자모드(F12) 로 확인해보면 바로 아래와 같은 전체 영역입니다.

  • CSS 는 단순히 얇은(1px), 검은색(#000), 실선테두리(solid)로 설정해주겠습니다.
details.related{
  border: #000 solid 1px;}

2.2.2 글목록 제목 : summary

글 목록의 제목에 해당하는 summary 의 서식을 잡아주겠습니다.

  • 개발자모드(F12)로 확인하면 바로 아래의 파란색 부분(제목줄)입니다.

  • 이때, <details class="related"> 아래의 summary에 대해서만 서식을 적용할 것이므로 아래와 같이 details.related summary 를 선택자로 설정해야합니다.
details.related summary{
  background-color: blue;
  color: white;
  line-height: 2em;
  text-align: center; /* 가운데 정렬 */
  cursor: pointer; /* 마우스 올리면 커서 손가락 모양 */
}

2.2.3 목록과 링크 : ul, ol, a

글목록 아래 있는 ul, ol, a 태그의 서식도 다음과 같이 간단히 설정해줍니다.

details a {color: grey}
details ul, ol { color: grey;
margin: 16px 0px 16px 28px !important}
details li{margin: 5px auto 5px}

3. 서식에 관련글 목록 저정하기

'블로그관리' → '서식관리'에서 원하는 글 목록을 저장해두면 사용에 편리합니다.

  • 티스토리 편집기의 HTML 편집노드에서 아래와 같이 원하는 글 목록을 생성합니다.

  • 이제 '관련글 목록'을 삽입하고 싶은 곳으로 이동하여 '기타 기능' → '서식' 기능을 사용해 기존에 만들어 놓은 글 목록을 삽입합니다.

  • 그 결과, 아래 보는 바와 같이 문서 펼치기 접기 기능이 만들어집니다.

  • 펼친 모습

저작자표시