How to set index inside Google Blog (BlogSpot, Blogger) ? # DreaMerZ-Note

Hello, I'm writing a blog to keep in mind. This is DreaMerZ-Note.

In this post, I would like to introduce how to organize a table of contents that is not supported by Google Blog (blogspot). For Wordpress, T-Story and Naver Blog, ... users can easily configure the table of contents. But Blogspot, A Google Blogger does not support the table of contents, so it is inconvenient to see the posts written in the list. Take a good look at it and set it up.

| Quick View

# Enter 'Google Blog Setting' > Create 'Page' > Edit 'HTML"

# Check the javascript code below.

   ㄴ Modified to your blog domain address in the 'const url' variable.

   ㄴ Modified to the main tag value corresponding to your blog in 'const tags'.

# Write the modified javascript code to page HTML and click Preview.

<h2>INDEX</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>

# It is applied when the title of the post corresponding to the tag is printed as below when previewing.

| Create auto table of contents using Javascript.

1. After writing the post, apply one main tag (label)

   ㄴ Tagging and label mean the same thing.

   ㄴ Configure the tag value to be used as the table of contents in advance. (ex. review, investment, diary, etc.)

   ㄴ You can apply multiple tags to the post, but it is better to apply only one main tag value to the table of contents later.

2. Create a 'New Page' After accessing the page in Google Blog Settings.

   ㄴ Switch the editing of a new page to HTML editing.

3. Please modify the domain address and tag in the Javascript code below.

   ㄴ Modified to Your blog domain address in the 'const url' value.

       ㄴ dntsecurity -> Your blog url

   ㄴ Modified to the main tag value corresponding to your blog 'const tags'

       ㄴ tag1 -> Review

<h2>Index</h2>
<div id="toc"></div>

<script>
async function fetchPosts(tag) {
    const url = `https://dntsecurity.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 = ["Review", "Blog_Tips", "Invest"];
    let tocHtml = "";
    for (const tag of tags) {
        tocHtml += await fetchPosts(tag);
    }
    document.getElementById("toc").innerHTML = tocHtml;
}

generateTOC();
</script>

4. When you're done, click Preview. If the title of the post that matches the tag is automatically generated as shown below, javascript is well applied. 

   ㄴ If javascript works well, please distribute the post by clicking 'Post'.

5. The last page you created is added to the 'layout' and the application is complete.

   ㄴ Google Blog Settings > Layout > Page Gadgets > Modify

   ㄴ Organize your page list > 'ADD NEW ITEM' > Add New Page > Save

   ㄴ When 'Add Page' is applied to the page gadget, you can use a specific tag like the table of contents as shown in the image below.

| By the way, What Javascript did you add?

The added javascript is a method using Blogger's JSON API.

The Blogger JSON API provides feeds in RSS and JSON formats.

The URL Below allows you to import posts with specific tag in JSON form.

Please change only the Red letters to your blog information to see if JSON in the post is called as shown in the below.

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

Example.

If the blogger JSON API allows you to call the post information, you can use Javascript to list only the post title. Although the above javascript code may seem complicated, it is the result of working with two functions.

- fetchPosts(tag) : A function that imports a list of posts for a particular tag and then creates a list in HTML.

- generateTOC() : A function that calls the posts of Tag1 and Tag2 as the above function and displays them in the #toc area.