블로그 스팟(구글 블로그) - 목차 만들기 # DreaMerZ-Note

안녕하세요. 잊지 않기 위해 기록하는 블로그. DreaMerZ-Note 입니다.

이번 포스팅에서는 구글 블로그에는 지원하지 않는 목차를 구성하는 방법을 소개해드리려고 합니다. 워드프레스나, 티스토리, 네이버 블로그 등은 유저가 편하게 목차를 구성할 수 있는데요. 구글 블로그인 블로그 스팟은 목차 기능을 지원하지 않기에 작성한 게시글을 리스트로 보는 게 불편합니다. 잘 보시고 설정해보세요.

| Quick View 

# 구글 블로그 설정 > 페이지 생성 > HTML 편집 

# 아래 javascript 코드 수정

   ㄴ const url 변수 에 본인 블로그 도메인 주소로 수정

   ㄴ const tags 에 본인 블로그에 해당하는 메인 태그 값으로 수정

# 수정한 javascript 코드를 페이지 HTML에 작성 후 미리보기 클릭

<h2>목차</h2>
<div id="toc"></div>

<script>
async function fetchPosts(tag) {
    const url = `https://yourblog.blogspot.com/feeds/posts/default/-/${tag}?alt=json`;
    const response = await fetch(url);
    const data = await response.json();
    const entries = data.feed.entry || [];
    
    let html = `<h3>${tag}</h3><ul>`;
    entries.forEach(entry => {
        const title = entry.title.$t;
        const link = entry.link.find(l => l.rel === "alternate").href;
        html += `<li><a href="${link}">${title}</a></li>`;
    });
    html += `</ul>`;
    return html;
}

async function generateTOC() {
    const tags = ["Tag1", "Tag2", "Tag3"];
    let tocHtml = "";
    for (const tag of tags) {
        tocHtml += await fetchPosts(tag);
    }
    document.getElementById("toc").innerHTML = tocHtml;
}

generateTOC();
</script>

# 미리보기 시 아래와 같이 태그에 해당하는 게시글의 제목이 출력되면 적용 완료

| Javascript 를 이용한 자동 목차 생성하기

1. 게시글 작성 후 메인 태깅(Label)을 1개 적용합니다.

   ㄴ 태깅과 라벨은 같은 의미입니다.

   ㄴ 목차로 활용할 태그 값을 미리 구성해보세요. (ex. 리뷰, 투자, 일기 .. 등)

   ㄴ 게시글에 여러 개의 태그를 적용해도 되지만, 메인 태그 값은 1개만 적용하는 게 나중에 목차로 출력하기 좋습니다. 

2. 구글 블로그 설정에서 페이지에 접근 후 '새 페이지'를 생성합니다. 

   ㄴ 새 페이지의 편집을 HTML 편집으로 전환합니다.

3. 아래 Javascript 코드에서 도메인 주소와 태그 값만 변경하여 적용합니다.

   ㄴ const url 변수 에 본인 블로그 도메인 주소로 수정

       ㄴ dntsecurity -> Your Blog Name

   ㄴ const tags 에 본인 블로그에 해당하는 메인 태그 값으로 수정

       ㄴ tag1 -> Review 

<h2>목차</h2>
<div id="toc"></div>

<script>
async function fetchPosts(tag) {
    const url = `https://yourblog.blogspot.com/feeds/posts/default/-/${tag}?alt=json`;
    const response = await fetch(url);
    const data = await response.json();
    const entries = data.feed.entry || [];
    
    let html = `<h3>${tag}</h3><ul>`;
    entries.forEach(entry => {
        const title = entry.title.$t;
        const link = entry.link.find(l => l.rel === "alternate").href;
        html += `<li><a href="${link}">${title}</a></li>`;
    });
    html += `</ul>`;
    return html;
}

async function generateTOC() {
    const tags = ["Tag1", "Tag2", "Tag3"];
    let tocHtml = "";
    for (const tag of tags) {
        tocHtml += await fetchPosts(tag);
    }
    document.getElementById("toc").innerHTML = tocHtml;
}

generateTOC();
</script>

4. 적용이 완료되면, 미리보기를 클릭해주세요. 아래와 같이 태그에 맞는 게시글 제목이 자동으로 생성되면 javascript 가 잘 적용된 상태입니다. 

   ㄴ Javascript 가 잘 동작한다면, '게시'를 클릭하여 게시글을 배포해주세요.

5. 마지막으로 생성한 페이지를 '레이아웃'에 추가하면 적용이 완료됩니다.

   ㄴ 구글 블로그 설정 > 레이아웃 > 페이지 가젯 > 수정

   ㄴ 페이지 목록 구성 > '새 항목 추가' > 신규 페이지 추가 > 저장

   ㄴ 페이지 가젯에 '페이지 추가'가 적용되면, 아래 이미지와 같이 특정 태그를 목차처럼 사용할 수 있습니다.

| 그런데, 어떤 Javascript 를 추가한거야?

추가한 Javascript는 Blogger 의 JSON API 를 활용한 방법입니다. 

Blogger JSON API는 RSS 및 JSON 형식의 피드를 제공합니다.

아래와 같은 URL 을 사용하면 특정 태그의 게시글을 JSON 형태로 불러올 수 있습니다. 

Red 글씨만 본인의 블로그 정보로 변경해서 아래 이미지처럼 게시글의 JSON이 호출되는 지 확인해보세요. 

https://yourblog.blogspot.com/feeds/posts/default/-/tag_value?alt=json

예시.

Blogger JSON API로 게시글 정보를 호출할 수 있으면, Javascript 를 이용해서 게시글 제목만 리스트 업 할 수 있습니다. 위 Javascript 코드가 복잡해보일 수 있으나, 2개의 함수로 동작한 결과입니다. 

- fetchPosts(tag) : 특정 태그의 게시글 목록을 가져온 후 HTML 로 목록을 만드는 함수

- generateTOC() : 위 함수로 Tag1, Tag2 의 게시글을 호출하여 #toc 영역에 표시하는 함수