Blogger 插件 | 文章顯示目錄的方法紀錄

1. 前言

    此篇是參考 我是工程師我是女生 的Blogger文章 <如何在 Blogger 文章加目錄索引？>，並記錄實作過程，避免時間久了，忘記如何設定，可以從這篇文章中喚醒記憶。

    

效果如下圖:

2. 流程概述

        S1.  新增 HTML/Javascript 小工具 

        S2.  貼上程式碼

        S3. 將文章內容的標題設置為 標題(如：小標題、子標題...等)

        S4. 在文章中的HTML檢視中，插入要顯示目錄的標記程式碼

        S5. 檢視目錄 (完成)

3. 文章目錄設定過程

    3-1. 新增 HTML/Javascript 小工具 

    3-2. 貼上程式碼

            下圖是貼上程式碼的區域

    
            總共有三段程式碼，可以貼在同個區塊:

                a. 第一段(選填): 載入 JQuery , 如果你的樣本沒有使用JQuery,那就需要貼這上段程式碼

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    

                b. 第二段(必要): 主要功能的程式碼，一定要填

<script type="text/javascript">

    $(function () {

        if ($('.post-body h1, .post-body h2, .post-body h3, .post-body h4').length) {

            var topicHtml = '<strong>目錄</strong><br>';

            $('.post-body h1, .post-body h2, .post-body h3, .post-body h4').each(function (index, obj) {

                $(obj).attr('id', 'point-' + index);

 

                if ($(obj).prop('tagName') == 'H2') {

                    topicHtml += '&nbsp;&nbsp;';

                } else if ($(obj).prop('tagName') == 'H3') {

                    topicHtml += '&nbsp;&nbsp;&nbsp;&nbsp;';

                } else if ($(obj).prop('tagName') == 'H4') {

                    topicHtml += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';

                }

 

                topicHtml += '<a href="#point-' + index + '">' + $(obj).text() + '</a><br>';

            });

            $('#topic').html(topicHtml);

        }

    });

</script>

                c. 第三段(選填, 但筆者認為應該填，美化目錄): 載入 CSS , 用於美編目錄的程式碼

<style type="text/css">

    #topic {

        background: rgba(0, 0, 0, 0.03);

        border: dashed 1px;

        margin-bottom: 30px;

        padding: 15px;

    }

</style>

    3-3. 將文章內容的標題設置為 標題(如：小標題、子標題...等)

            記得把要在文章內設定標題，最終才會依照標題變成目錄。

 

    3-4. 在文章中的HTML檢視中，插入要顯示目錄的標記程式碼

            1. 我會先在"編輯模式" 先打一段文字，如:這裡放目錄

            2. 選取編輯圖示

            3. 點擊 HTML檢視

            找到剛剛打的 "這裡放目錄" (這是你自己打的，方便找到替換程式碼的位置), 然後取代為標記程式碼如下:

 <div id="topic"></div>

    3-5. 檢視目錄 (完成)

轉貼本文時，需註明來自黑修斯的隨手札記原創作者 hughes chen（黑修斯），及附上原文連結，同時 禁止修改，禁止商業使用 。