본문 바로가기

블로깅

블로그에 toc 를 달았다.

가뜩이나 마크다운으로 쓰면서 구조적으로 쓰려고 노력하는데,
이런 글에는 toc 가 있으면 좋을 것 같아서 달아놨다.

좌측에 달아논 toc

있어서 좋긴하지만, 아무래도 레이아웃이 비대칭이다 보니 뭔가 ... 맘에 걸리긴 한다.
처음엔 오른쪽에 뒀는데, 왼쪽보다 눈이 덜가긴 하지만 뒷목이 아파서(?) 왼쪽에다가 달았다.
눈과 목이 덜 아프기는 하지만... 그래도 느낌상 뭔가 별로인게 있다.

미니멀리즘 스타일링을 추구하는 블로그였는데... 더 이쁘게 달아볼 순 없을까 생각이 든다.
UI 공부하시는 분이 이 글을 보신다면, 해결책좀 알려주세요...

개인 블로그에 달고 싶으신 분은 아래 링크를 참고하시면 됩니다.

 

Tocbot

Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier to navigate. This library was inspired by Tocify, the main difference is that Tocbot us

tscanlin.github.io

[2020.05.26 에 추가한 내용]
어떻게 적용하느냐는 문의 글이 많아, 일일이 메일로 보내드리지 않고 그냥 글 본문에 추가합니다.
스크린 샷이라 좀 불편할 수 있지만... 따로 글로 더 적기 귀찮네여 ㅎ_ㅎ...
아무튼 저는 아래와 같이 했습니다! (코드 블락친 부분만 보시면 됩니다.)

뒤늦게 알았지만 ... pwnbit 님 블로그의 이 글에 더 잘 친절히 설명되어 있습니다 :)

1.html 헤더 상단에 tocbot 소스 추가

2. s_article_rep 찾아서, 내부 상단에 toc class div 추가

3. body 내부 가장 하단부에 아래 스크립트 추가

4. css 에서 toc 관련 스타일 추가

마지막 4 에서 css 건드리는 부분은.. 개인 취향입니다.
스크린 샷에 나온 그대로 하면, 이 블로그의 toc 와 동일하게 스타일링 될거에요..?!

이후, 마크다운 형태로 글을 쓰시면 알아서 toc 가 만들어져 왼쪽에 붙습니다.
위치나 기타 스타일링은 css 바꾸시면 됩니다 ㅎ_ㅎ...
하나 안 좋은건.. 모든 마크다운 글에 toc 가 생깁니다.
경우에 따라 어떤 글에는 안붙이고 싶을 때가 있을텐데 말이죠...
음 .... 누가 이런 레버좀 만들어 주세요... 

반응형
  • BlogIcon laondev12 2019.12.07 21:32 신고

    안녕하세요
    저도 tocbot을 달고 싶어서 편집중인데 잘 안되네요... ㅠㅠㅠ
    혹시 알려주실 수 있으신가요??

    • BlogIcon 흠시 2019.12.08 22:15 신고

      음.. 해결하셨나요??

      기본적인 설치법? 은 위 사이트 데모나 샘플파일 받으셔서 돌아가는거 확인하시면 되구!

      티스토리에 다는거는, 티스토리 스킨편집 가셔서 별도의 div 를 만들어서, toc 가 거기에 실릴 수 있게 넣어주셔야해요.

      정말 모르시겠으면, 이메일 알려주시면
      제 블로그 단에서 어떻게 달아놨는지
      코드랑 스크린샷 보내드리겠습니다!

    • laondev12 2019.12.09 10:06

      일단 기본적으로 tocbot 공식 페이지에서 하라는건 다 했는데 글 옆이 아니라 안에 생겨버리더라구요 ㅠㅠㅠ
      이메일은 laondev12@gmail.com 입니다.
      코드랑 스크린샷 보내주시면 정말 감사하겠습니다~!!

    • BlogIcon 흠시 2019.12.09 15:06 신고

      메일 드렸습니다 ㅎㅎ

    • laondev12 2019.12.09 18:11

      정말 자세한 설명 적어주셔서 감사합니다~!! ㅠㅠㅠ
      많은 도움이 되었습니다

  • BlogIcon 슬로우푸드 2020.02.05 22:01 신고

    안녕하세요 흠시님!! 고수의 느낌이 물씬납니다.. 저도 메일로 조언주시면 감사하겠습니다!!
    gymnopedies7@naver.com 입니다 ㅎㅎ

  • BlogIcon j_brother 2020.03.16 03:19 신고

    티스토리 블로그를 통해서 CSS와 Markdown을 공부하던 중에 방문하게 되었습니다!
    Tocbot article을 몇번 정독해서 따라해보아도 잘 되질 않네요.. ㅠㅠ
    혹시 저도 메일로 조언을 얻을 수 있을까요?
    메일 주소는 j_brother@naver.com입니다! 감사합니다~!!

  • 익명 2020.03.26 15:41

    비밀댓글입니다

  • BlogIcon pwnbit 2020.05.02 17:46 신고

    안녕하세요, 제가 찾던 toc 중 가장 깔끔한 것 같습니다.
    제 블로그 글들이야 예전에 쓴 것들이라 markdown 구조가 아니라서 나오지는 않겠지만..
    toc js, css 코드 가져가서 수정해서 써도 될까 싶어 허락 받고자 댓글 남깁니다.

    혹시나 싶어 테스트로 적용해 본 글 링크도 같이 남깁니다.
    https://pwnbit.kr/88#utf8-decode-%EC%BF%BC%EB%A6%AC

    • BlogIcon 흠시 2020.05.02 17:56 신고

      안녕하세요.

      애초에 오픈소스라 굳이 제 허락을 받으시지 않으셔도 됩니다 ㅋㅋ

    • BlogIcon pwnbit 2020.05.02 18:06 신고

      답변이 빠르시네요;;
      라이센스 확인은 했지만 그래도 덕분에 편하고 유용하게 쓸 수 있어 감사한 마음에 댓글 남겼습니다 =)

  • BlogIcon AeroCode 2020.05.14 17:46 신고

    안녕하세요.
    며칠전에 우연히 들렸는데 디자인이 너무 깔끔해서 놀랐습니다.

    이렇게 미니멀하고 공간이 넉넉한 스킨을 본 적이 없었는데,
    기본 포스터 스킨에서 얼마나 많이 고민하셨을지 상상도 안가네요..
    글도 좋은게 많아서 하루에도 몇번씩 들락날락하게 됩니다.

    흠시님의 블로그에서 정말 많이 배우다가
    커버 페이지에 컨트리뷰션에 관한 기능이 준비중이라는 것을 보고,
    스피디하게 미니 프로젝트 형태로 만들어 봤는데,

    괜찮으시다면 한번 훑어봐주셨음 합니다.
    피드백이나 개선점이 있다면 첨삭 부탁드립니다..

    컨트리뷰션 그래프는 블로그 커버 페이지에 적용중입니다.

  • BlogIcon subings 2020.05.24 13:20 신고

    안녕하세요~! toc 저도 넣어보려고 햇는데요, div inner로 들어가있긴한데 글 옆이 아니라 글 안에 들어가있네요 ㅜㅜ 혹시 코드에 있어서 좀더 자세하게 메일로 알려주시면 감사하겠습니다 ㅜㅜ 123sandra@naver.com

  • BlogIcon 밤슬 2020.07.07 14:31 신고

    안녕하세요! 잘 모르지만 눈동냥으로 배운걸로 개발자모드랑 이것저것 참고해서 조금 변형해서 잘 적용했어요. 좋은 글 감사합니다 :)

  • 익명 2020.09.14 00:19

    비밀댓글입니다

    • BlogIcon 흠시 2020.09.14 19:12 신고

      안녕하세요.

      마크다운 요소(h1, h2 ...)에 자동으로 id를 붙여주는 코드가 있는데요. (toc 에서 클릭시 해당 글 목록으로 이동하기 위해서는 #링커가 필요해서 이렇게 id를 만듭니다.)

      위 tocbot 페이지에 이부분도 소개되어 있습니다.
      따라하시면 그대로 될 거 같네요!

    • 익명 2020.09.14 22:22

      비밀댓글입니다

  • 익명 2020.11.06 16:41

    비밀댓글입니다

  • BlogIcon 술 참는 개발자 2021.01.01 16:08 신고

    왜 이렇게 적용이 안 되나 했더니 스킨이 달라서였네요 ㅋㅋ 겨우 해결했습니다. 감사합니다.