글을 쓸 때마다 넘버링을 해주는게 귀찮다보니 그냥 h2, h3, h4에 맞게는 적어주지만 일일이 넘버링을 하지 않았다. 따라서 포스트가 다소 보기 어려워지고, 어떤 헤딩이 어떤 헤딩의 하위 헤딩인지 구분하기 힘들어졌다. 따라서 h2, h3, h4 태그를 최상위 태그 기준으로 (즉 h2 또는 h3 또는 h4 중 존재하는 최상위 헤딩) 자동으로 넘버링해주는 자바스크립트 코드를 아래와 같이 작성해주었다.
(function (window, document) {
'use strict';
const post = document.querySelector('article#content .inner .entry-content .tt_article_useless_p_margin');
if (!post) return;
const maxHeading = () => {
if (h2arr.length > 0) return 2;
else if (h3arr.length > 0) return 3;
else if (h4arr.length > 0) return 4;
else return 'no heading';
};
const makeTagArray = (tag) => {
return [...post.getElementsByTagName(tag)];
};
const sortByOffsetTop = (elements) => {
elements.sort((a, b) => a.offsetTop - b.offsetTop);
};
const putNumbers = (elements, max) => {
if (max === 'no heading') return;
let i = 0; let j = 0; let k = 0;
// max is either 2, 3 or 4
elements.forEach(element => {
if (element.innerText === '출처') return;
if (element.tagName === `H${max}`) {
i += 1;
j = 0;
k = 0;
element.innerText = `${i}. ` + element.innerText;
} else if (element.tagName === `H${max+1}`) {
j += 1;
k = 0;
element.innerText = `${i}.${j}. ` + element.innerText;
} else {
k += 1;
element.innerText = `${i}.${j}.${k}. ` + element.innerText;
}
});
};
const h2arr = makeTagArray('h2');
const h3arr = makeTagArray('h3');
const h4arr = makeTagArray('h4');
const headersArr = h2arr.concat(h3arr).concat(h4arr);
console.log('hello!');
sortByOffsetTop(headersArr);
headersArr.pop();
const max = maxHeading();
putNumbers(headersArr, max);
}) (window, document)
위 파일을 직접 작성하여 넣어주었다. max heading을 먼저 감지한 후 (h2, h3 또는 h4) 그 헤딩에 따라서 자동으로 넘버링을 해주는 시스템이다. offsetTop 이라는, y 좌표상 위치를 기준으로 먼저 정렬해준 후, 각 element의 innerText 앞에 넘버링을 붙여준다. 그 후, 넘버링을 해준다.
포스트는 article#content .inner .entry-content .tt_article_useless_p_margin 라는 쿼리 셀렉터로 가져왔다. 만약 포스트가 아니라면, 즉 홈페이지거나, 카테고리 페이지거나, 등등 기타 페이지라면, 이러한 쿼리를 받아왔을 때 null이 뜨기 때문에, 아래의 코드들이 실행되지 못하고 해당 스크립트가 종료될 것이다 (따라서 다른 페이지들의 헤딩들은 걱정하지 않아도 된다).
또한 헤딩이 없는 경우와 출처 헤딩의 경우는 다르게 적용을 해주었다. 헤딩이 없으면 당연히 넘버링을 할 필요가 없으니 함수가 바로 종료되어버린다. 또한 출처 헤딩의 경우에 만약 innerText가 "출처"이면, 넘버링을 추가하지 않는다.
위 코드를 실행시킨 후 포스트에 들어가보면,
위와 같이 잘 적용되는 것을 볼 수 있다.