구글 블로그에는 목차 자동 생성 기능이 없습니다. html을 입력받아 자바 스크립트로 목차를 자동으로 생성하는 방법을 이용하였지만, 이것도 귀찮아서 워드프레스처럼 목차를 자동으로 생성해 주는 방식을 적용해 보도록 하겠습니다.
Table Of Contents
구글 블로그 자동 목차 생성
구글 블로그에는 기본적으로 자동 목차 생성 기능이 없습니다. 하지만 JavaScript를 이용해 이를 구현할 수 있습니다.
아래의 스크립트는 페이지 내의 모든 h2, h3 태그를 찾아 목차를 생성합니다. 이 스크립트를 사용하려면 블로그 템플릿 HTML에 추가해야 합니다.
블로그에 목차가 있어야 하는 이유는 첫째로 SEO에 좋습니다. 두 번째로 사용자에게 친화적입니다. 사용자들은 윗 부분만 보고 나가는 경우가 많은데 아래 내용에 무엇이 있다는 것을 먼저 알려줄 수 있고 한번이라도 클릭을 해서 이동할 수 있도록 도와 줍니다. 그러므로, 애드센스 등의 수익 목적의 블로그는 목차가 반드시 있어야 합니다.
이 글에서는 3가지 방법을 이용하여 작성하는 법을 테스트하고 결과를 공유합니다.
결론 먼저 말씀드리면 방법 1은 제일 먼저 해본 것인데 정상 동작은 하지만 예쁘지가 않습니다.
그리고, 방법 2는 기존 라이브러리를 이용한 방법인데 저의 경우 스타일이 구글 블로그와 잘 맞지 않아서 목차가 깨지는 문제가 있었습니다.
그래서, 최종적으로 방법 1에서 style을 추가하여 방법 3으로 만들었는데 가장 예쁘고 좋습니다.
이 목차는 구글 블로그 뿐 아니라 티스토리 블로그 등 다양한 블로그 혹은 html에서 사용될 수 있으니 참고하시기 바랍니다.
저도 앞으로 이 목차로 교체하려고 합니다.
방법 1. java script 로 생성하기
아래의 코드를 html 편집에 추가합니다.
<script type='text/javascript'>
//<![CDATA[
function createTOC(){
var toc = "<ul>";
var level = 0;
document.getElementById("your-post-id").innerHTML =
document.getElementById("your-post-id").innerHTML.replace(
/(<h[23].*?>)(.*?)(<\/h[23]>)/gi,
function(str, openTag, titleText, closeTag) {
if (openTag.toLowerCase().match(/<h2/gi)) {
level = 2;
} else if (openTag.toLowerCase().match(/<h3/gi)) {
level = 3;
}
if (level == 2) {
toc += "</ul><li><a href='#" + titleText.replace(/\s+/g,'') + "'>" + titleText
+ "</a><ul>";
} else if (level == 3) {
toc += "<li><a href='#" + titleText.replace(/\s+/g,'') + "'>" + titleText
+ "</a></li>";
}
return '<'+'a name="' + titleText.replace(/\s+/g,'')+ '"></'+'a>'
+ openTag+titleText+closeTag;
}
);
toc += "</ul>";
// 새로 생성된 TOC 코드를 원하는 위치에 삽입합니다.
// 여기서는 id가 "toc"인 요소 안에 삽입되도록 설정되어 있습니다.
document.getElementById("toc").innerHTML += toc;
};
window.onload = function(){
createTOC();
};
//]]>
</script>위 코드에서 your-post-id 부분은 본문 내용이 들어가는 요소의 id로 바꿔주셔야 합니다. 마찬가지로 toc 부분도 실제 목차가 들어갈 요소의 id로 변경해 주세요.
제 블로그의 경우 페이지 본문의 id는 아래와 같이 page_body로 되어있습니다. 그러므로 해당 id로 수정합니다.
이 부분은 테마마다 약간씩 차이가 있으므로 본인의 테마에 맞는 것으로 하셔야 합니다.
이 코드는 페이지 로드 시 실행되며 페이지 내의 모든 h2와 h3 태그를 찾아 해당 텍스트와 링크로 구성된 목차 리스트(toc)를 만듭니다.
블로그 작성 시 목차(toc)를 삽입할 위치에 아래의 html 코드를 입력합니다. 그러면 페이지 로딩 시, 자동으로 toc 가 생성됩니다.
<div id="toc"> </div>방법 2. tocbot
블로그에 목차(Table of Contents)를 추가하기 위해 사용할 수 있는 여러 가지 라이브러리와 플러그인이 있습니다. 그중 하나로 많이 사용되는 jQuery 기반의 플러그인 'Tocbot'을 소개하겠습니다.
Tocbot은 HTML 문서의 제목 태그(h1, h2, h3 등)를 이용해 동적으로 목차를 생성합니다. 또한, 스크롤 위치에 따라 현재 보고 있는 섹션을 강조하는 기능도 제공합니다.
아래는 Tocbot을 구글 블로그에 적용하는 방법입니다:
- Tocbot CSS와 JavaScript 파일을 로드합니다. <head> 태그 내부에 아래 코드를 추가하세요:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>- 본문 내용이 들어가는 요소에 data-toc-content 속성을 추가하고, 목차가 들어갈 요소에 id 값을 설정하세요:
<div id="toc"></div> <!-- 이곳에 목차가 생성됩니다 -->
<div data-toc-content>
<h2>Your Heading 1</h2>
<p>Your content...</p>
<h3>Your Heading 2</h3>
<p>Your content...</p>
<!-- more headings and contents... -->
</div>
- 페이지 로드 후 Tocbot을 초기화하는 스크립트를 추가하세요 - 반드시 페이지 로드 후여야 합니다.
<script type='text/javascript'>
//<![CDATA[
window.onload = function() {
tocbot.init({
// Where to render the table of contents.
tocSelector: '#toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.entry-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
});
};
//]]>
</script>위 코드에서 tocSelector, contentSelector, headingSelector 옵션은 각각 목차가 들어갈 요소의 선택자, 본문 내용이 들어있는 요소의 선택자, 그리고 포함시킬 제목 태그를 지정합니다.
예제에서는 toc라는 id를 갖는 태그에 목차를 삽입합니다. <div id="toc"></div>에 해당합니다.
그리고, .entry-content를 갖는 class를 내용으로 삼아서 h1, h2, h3 태그를 목차로 생성합니다.
주의사항으로는 Tocbot은 jQuery 기반이므로 jQuery도 함께 로드해야 합니다(구글 블로그 템플릿에는 기본적으로 포함되어 있습니다). 또한, Tocbot은 자동으로 스크롤 위치에 따라 현재 섹션을 강조하므로, 이를 위한 CSS 스타일도 추가해야 합니다. Tocbot 공식 문서(https://tscanlin.github.io/tocbot/)에서 더 많은 정보와 사용 예시를 찾아볼 수 있습니다.
기타 정보 - CDATA 관련하여
//<![CDATA[와 //]]>는 HTML 문서에서 JavaScript나 CSS 코드를 CDATA 섹션으로 감싸는 데 사용됩니다. 이것은 XML 문서와 XHTML 문서에서 중요한 역할을 합니다.
XML과 XHTML은 모두 "<"와 ">" 문자를 특수 문자로 취급합니다. 따라서, 이러한 문자가 포함된 JavaScript나 CSS 코드를 그대로 사용하면 XML 파서가 오류를 발생시킬 수 있습니다.
이 문제를 해결하기 위해, CDATA 섹션을 사용하여 해당 영역의 내용이 단순한 텍스트 데이터임을 명시합니다. 이렇게 하면 XML 파서는 "<"와 ">" 문자를 특수 문자로 처리하지 않고 그대로 둡니다.
그러나 HTML5는 HTML 형식으로 작성되며, HTML 파서에 의해 처리되므로 CDATA 섹션이 필요 없습니다. 따라서 현대 웹 개발에서는 //<![CDATA[와 //]]>를 볼 일이 거의 없으나, 구글 블로그 테마는 XML로 되어있어서 CDATA로 감싸주어야 합니다.
다만, 과거에 작성된 스크립트나 아직 XHTML을 사용하는 경우 등에는 여전히 볼 수 있으며, 이 경우 주석(//)으로 처리하여 JavaScript 엔진이 무시하도록 합니다.
방법 3. java script + style(css) 적용하기
java script 추가
먼저 </head> 앞에 다음 코드를 삽입합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link href=' http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function createTOC() {
var toc = "<ul>";
var level = 0;
var contentElement = document.getElementsByClassName('entry-content')[0];
contentElement.innerHTML =
contentElement.innerHTML.replace(
/(<h[23].*?>)(.*?)(<\/h[23]>)/gi,
function (str, openTag, titleText, closeTag) {
if (openTag.toLowerCase().match(/<h2/gi)) {
level = 2;
} else if (openTag.toLowerCase().match(/<h3/gi)) {
level = 3;
}
if (level == 2) {
toc += "</ul><li><a href='#" + titleText.replace(/\s+/g, '') + "'>" + titleText
+ "</a><ul>";
} else if (level == 3) {
toc += "<li><a href='#" + titleText.replace(/\s+/g, '') + "'>" + titleText
+ "</a></li>";
}
return '<' + 'a name="' + titleText.replace(/\s+/g, '') + '"></' + 'a>'
+ openTag + titleText + closeTag;
}
);
toc += "</ul>";
// 새로 생성된 TOC 코드를 원하는 위치에 삽입합니다.
// 여기서는 id가 "toc"인 요소 안에 삽입되도록 설정되어 있습니다.
document.getElementById("toc").innerHTML += toc;
};
window.onload = function () {
createTOC();
};
function tocToggle() {
var avs = document.getElementById('toc');
if (avs.style.display === 'none') {
avs.style.display = 'block';
} else {
avs.style.display = 'none';
}
}
//]]>
</script>구글 블로그는 일반적으로 .entry-content에 본문이 나오는데 혹시 테마가 달라서 다른 class를 사용하고 있다면 수정해 해당 class로 수정해 주셔야 합니다.
css 저장
"]]></b:skin>"을 찾아서 바로 위에 아래 코드를 넣습니다. 아래 코드는 모양을 예쁘게 꾸며줄 스타일입니다.
.tocstyle {
border: 1px solid #595757;
box-shadow: 1px 1px 0 #656565;
background-color: #EFEDED;
color: #656565;
line-height: 1.4em;
margin: 30px auto;
padding: 20px 30px 20px 10px;
font-family: oswald, arial;
display: block;
width: 70%;
}
.tocstyle ol,
.tocstyle ul {
margin: 0;
padding: 0;
}
.tocstyle ul {
list-style: none;
}
.tocstyle ol li,
.tocstyle ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.tocstyle a {
color: #656565;
text-decoration: none;
}
.tocstyle a:hover {
text-decoration: underline;
}
.tocstyle button {
background: #EFEDED;
font-family: oswald, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #656565;
padding: 0 0 0 15px;
}
.tocstyle button:after {
content: "\f424";
font-family: "Font Awesome 5 Free";
font-weight: 900;
/* For solid style */
position: relative;
left: 10px;
font-size: 20px;
}
이제 본문 글로 가서 아래의 코드를 넣으면 해당 위치에 목차가 생깁니다.
<div class="tocstyle"><button onclick="tocToggle()">Contents</button><div id="toc"> </div></div>혹시 Contents 옆의 아이콘을 바꾸고 싶으시면 "https://fontawesome.com/v5/search?q=expand&o=r&m=free"
다음 링크로 가셔서 맘에 드는 아이콘을 선택하신 후 우측 상단의 코드(ex:f103)를 가져오셔서 button:after의 context 항목을 바꾸시면 됩니다.
