블로그에 toc 를 달았다.

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

좌측에 달아논 toc

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

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

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

Tocbot

[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 가 생깁니다.
경우에 따라 어떤 글에는 안붙이고 싶을 때가 있을텐데 말이죠...
음 .... 누가 이런 레버좀 만들어 주세요...