문제 상황
chirpy 테마를 사용하던 중 마크 다운 파일을 업로드 했을 때 # 하나만 사용하는 h1 태그는 toc에서 제외되고 h2, h3 태그만 toc에 표시되는 문제를 겪었다.
이 문제 때문에 스트레스를 좀 많이 받아서 무조건 해결을 하겠다고 마음을 먹었다..
참고로 나는 웹 개발에 대한 지식이 전무한 편이여서 모든 파일을 하나하나 수정해보며 GPT와 같이 트러블 슈팅을 했다.
원인 파악
먼저 toc 가 설정되어있는 파일들을 전부 찾기 위해 검색 기능을 사용했다.
h1 tag issue
toc.html
가장 먼저 /_includes/toc.html 파일을 수정해봤다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- {% assign enable_toc = false %}
{% if site.toc and page.toc %}
{% if page.content contains '<h1' or page.content contains '<h2' %}
{% assign enable_toc = true %}
{% endif %}
{% endif %}
{% if enable_toc %}
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
<nav id="toc"></nav>
</div>
{% endif %} -->
{% assign enable_toc = false %}
{% if site.toc and page.toc %}
{% if page.content contains '<h1' or page.content contains '<h2' or page.content contains '<h3' or page.content contains '<h4' or page.content contains '<h5' or page.content contains '<h6' %}
{% assign enable_toc = true %}
{% endif %}
{% endif %}
{% if enable_toc %}
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
<nav id="toc"></nav>
</div>
{% endif %}
주석이 수정 전, 아래가 수정 후
수정하고 페이지를 봐도 여전히 h1 태그가 toc에 표시되지 않았다.
js-selector.html
이번에는 /_includes/js-selector.html 파일의 특정 코드를 아래처럼 수정해봤다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- {% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
{% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
{% endif %} -->
{% if page.content contains '<h1' or page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
{% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
{% endif %}
그런데도 여전히 문제는 해결되지 않았다..
toc.js
GPT가 js 파일 및 css 파일의 문제일 수도 있다고 해서 html 파일을 제외한 다른 파일들도 수정하기 시작했다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// export function toc() {
// if (document.querySelector('#core-wrapper h2,#core-wrapper h3')) {
// // see: https://github.com/tscanlin/tocbot#usage
// tocbot.init({
// tocSelector: '#toc',
// contentSelector: '.post-content',
// ignoreSelector: '[data-toc-skip]',
// headingSelector: 'h2, h3',
// orderedList: false,
// scrollSmooth: false
// });
// }
// }
export function toc() {
if (document.querySelector('#core-wrapper h1,#core-wrapper h2,#core-wrapper h3')) {
// see: https://github.com/tscanlin/tocbot#usage
tocbot.init({
tocSelector: '#toc',
contentSelector: '.post-content',
ignoreSelector: '[data-toc-skip]',
headingSelector: 'h1, h2, h3',
orderedList: false,
scrollSmooth: false
});
}
}
이번에도 당연하게 h1태그는 모습을 보이지 않았다.
post.min.js
이 파일은 코드가 좀 압축되어 있었어서 수정한 부분만 보여주겠다.
1
document.querySelector("#core-wrapper h1,#core-wrapper h2,#core-wrapper h3")&&tocbot.init({tocSelector:"#toc",contentSelector:".post-content",ignoreSelector:"[data-toc-skip]",headingSelector:"h1, h2, h3",orderedList:!1,scrollSmooth:!1})
위처럼 수정하니까 드디어 h1 태그가 toc에 나타났다! 하지만 다른 문제가 또 생겨났다.
들여쓰기 issue
아래 사진과 같이 h2태그와 h3태그가 들여쓰기가 안되고 쭉 출력되는 문제였다.
이 문제는 css 파일 문제인 것 같은 감이 와서 바로 개발자 도구를 켜서 css 확인해보니 toc-link ~~ 이런 식으로 class 이름이 되어있길래 바로 검색을 해봤다.
post.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#toc-wrapper {
border-left: 1px solid rgba(158, 158, 158, 0.17);
position: -webkit-sticky;
position: sticky;
top: 4rem;
transition: top 0.2s ease-in-out;
-webkit-animation: fade-up 0.8s;
animation: fade-up 0.8s;
ul {
list-style: none;
font-size: 0.85rem;
line-height: 1.25;
padding-left: 0;
li {
&:not(:last-child) {
margin: 0.4rem 0;
}
a {
padding: 0.2rem 0 0.2rem 1.25rem;
}
}
/* Overwrite TOC plugin style */
.toc-link {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: var(--toc-highlight);
text-decoration: none;
}
&::before {
display: none;
}
}
.is-active-link {
color: var(--toc-highlight) !important;
font-weight: 600;
&::before {
display: inline-block;
width: 1px;
left: -1px;
height: 1.25rem;
background-color: var(--toc-highlight) !important;
}
}
//ul {
// a {
// padding-left: 2rem;
// }
//}
ul {
a {
padding-left: 2rem;
}
ul {
a {
padding-left: 3rem;
}
}
}
}
}
위처럼 수정했더니 정상적으로 들여쓰기가 되었다.
문제 해결
문제를 다 없애고 느낀 건 post.min.js 파일과 post.scss 파일만 수정했어도 뭔가 됐을 것 같은 생각이 들었지만 좋은 경험을 했다고 생각한다.