如何在 Blogger 文章加目錄索引?

2022 新一年又要來啦,新年新氣象,我決定幫我的部落格做一點微小的調整。
兩年前曾經寫了一篇「如何在 Blogger 裡放程式碼?」,今天就來分享一下怎麼在文章裡自動加上目錄索引。
原理是在開啟文章時抓取文章中的 H 標籤,整理成目錄的樣子放在文章開頭。

一、步驟

1. 建立 HTML/JavaScript 小工具

如何在 Blogger 文章加目錄索引? - 建立 HTML/JavaScript 小工具
選擇「版面配置→新增小工具→HTML/JavaScript」
如何在 Blogger 文章加目錄索引? - 在「內容」輸入程式碼

2. 在「內容」輸入程式碼

<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>

3. 把小工具拖拉到標頭最上面,並儲存

經測試,不拉也沒關係,不影響顯示。
如何在 Blogger 文章加目錄索引? - 把小工具拖拉到標頭

二、使用

寫文章的時候切成「HTML 檢視」,並在想要目錄出現的地方輸入 <div id="topic"></div>,程式設定好之後,寫文章也要認真設定標題喔。
如何在 Blogger 文章加目錄索引? - 使用

三、補充說明

1. 載入 jQuery

程式有用到 jQuery,如果網誌沒有載入過的還需另外載入喔,載入方式同上,只是內容改為
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
jQuery 要加在其他 JavaScript 之前,所以順序應該是先載入 jQuery 再載入目錄索引程式碼。

2. 加 CSS

當然還可以加一些自己喜歡的 CSS 樣式讓他更好看一點,我自己就加了↓
<style type="text/css">
    #topic {
        background: rgba(0, 0, 0, 0.03);
        border: dashed 1px;
        margin-bottom: 30px;
        padding: 15px;
    }
</style>

3. 回到目錄

如果想要「回到目錄」最簡單的做法是使用超聯結的錨點,一樣在寫文章時切成「HTML 檢視」並在想要的位置輸入
<a href="#topic">回到目錄</a>
同樣的概念,還有另一個變化是把這行程式碼放在 HTML/JavaScript 小工具裡面,再搭配一點 CSS 就可以做出常駐在某個位置的效果,例如:
<style type="text/css">
    .go-to-topic {
        position: fixed;
        bottom: 10px;
        left: 10px;
    }
</style>
<a class="go-to-topic" href="#topic">回到目錄</a>
不過這個做法可能會因為不同的主題而出現不同的小問題,可以透過修改 CSS 或是移動小工具擺放的位置來調整。

4. Dynamic Views 系列主題無法顯示

Blogger 預設提供的主題 Dynamic Views 系列會顯示不出來。

留言

  1. 請問CSS的部分要加在哪裡呢?

    回覆刪除
  2. 請問,延伸閱讀區塊是用程式碼自動產生的嗎?

    回覆刪除
  3. 目前遇過最簡單的方式!感謝分享

    不過如果有內建回到目錄會更好

    回覆刪除
    回覆
    1. 謝謝你的喜歡和建議,我決定在文章內補充一個最陽春的方法

      刪除
    2. 謝謝工程師大大提供這麼棒的方法 m(_ _)m

      刪除
    3. 想要一个一直呆在左下角的回到目录

      刪除
    4. 在侧边加了一个浮动的目录,除了那个横线没有,其他感觉很好https://cdn.jsdelivr.net/gh/254489708/picture@main/img/20220723105529.png

      刪除
    5. 我整合進文章裡了,本來想偷懶只提供最陽春的辦法。
      這個方式比較吃 CSS,如果不幸因為主題而遇到問題,要有一點 CSS 基礎才好調整。

      刪除
  4. 再請問原po,能在CSS語法裡調整段落間距嗎? 例如我希望大標題 (h1)離前段空5px,我該怎麼寫呢?

    回覆刪除
    回覆
    1. 基礎用法就是↓
      h1 {
      margin-top: 5px;
      }
      但我不建議這樣做,加下去會整個網站的 h1 都被套用此設定。
      若要特別指定文章頁才套用,又會因為不同的主題而有不同判斷。

      刪除
    2. 了解,非常感謝您的耐心回覆!

      刪除
  5. 我的 HTML/JavaScript 小工具 沒有辦法拉到最上面"標頭" 怎麼辦呢? 是這個原因才顯示不出來目錄的嗎?

    回覆刪除
    回覆
    1. 我測試了一下,有些主題確實沒辦法拉到 "標頭",不過也不影響顯示。如果無法顯示 "我猜" 可能有以下原因,您可以試試看有沒有用~
      1. 網誌本身沒有載入 jQuery
      2. 文章內文沒有加 <div id="topic"></div>
      3. 文章內文沒有設定標題

      刪除
  6. 想請教為何預覽文章時有看到目錄出現,但文章發布後卻沒看到目錄?

    回覆刪除
    回覆
    1. 不好意思,自行找到原因了。一直以為不顯示小工具,程式碼也會執行,非常謝謝版主的文章,淺顯易懂。

      刪除
  7. 簡單實用又好看!目錄還會自動有錨點,感謝分享><

    回覆刪除
  8. 謝謝分享,非常棒,立即開箱立即使用。

    回覆刪除

張貼留言