By Tab Chen in Ghost — 23 Feb 2025

Ghost CMS 功能微調合集

Ghost 作為一個簡潔的內容管理系統，對創作者來講是非常棒的體驗，但有些小地方或是功能需要手動來調整，透過後台 Code Injection 功能，就能方便修改。本篇會陸續更新，針對實用的功能做微調紀錄修改方式。

微調功能前必須知道的位置

在此之前，先熟悉後台 Code Injection 設定位置，日後多數都會在此地方插入程式代碼。進到後台管理介面左下方有個齒輪圖示，點擊進入設定頁面。

移動到下方會看到 Code Injection 功能，點擊 Open 就能進入修改畫面。

分為 Site Heade 與 Site Footer 兩個頁籤，後續可按照教學將代碼填入相對位置。

連結另開新視窗 - 功能微調

文章內建連結功能沒有設定另新開視窗，預設文章內要連外網站，會直接跳轉到對方頁面，對閱讀體驗來說並非好事，可透過插入代碼方式來調整，使文章內的連結點擊後會另開新視窗頁面。

1.到後台 Code Injection 地方，將下面代碼貼入 Site Footer 位置。

<script>
 document.addEventListener('DOMContentLoaded', function() {
   const postContent = document.querySelector('.post-content'); // 請替換成您文章內容的 class 名稱
   if (postContent) {
     const links = postContent.querySelectorAll('a');
     links.forEach(link => {
       link.setAttribute('target', '_blank');
       link.setAttribute('rel', 'noopener noreferrer');
     });
   }
 });
</script>

2.在已發表的文章頁面上，按 F12 鍵（或在 Mac 上按 Cmd + Option + I）開啟開發者工具。

3.在 Elements 標籤中，可用 Ctrl + F 於搜尋框輸入 article 標籤，可看到要替換的 class 名稱，下圖為例 gh-article 這個，注意替換時前面有個小點不可刪掉，最後儲存就會生效。

頁面回到上方按鈕 - 功能新增

網頁右側回到最上方這個小功能很實用，在 Ghost 居然沒有，也許跟主題設計有關，剛好本站用的這個沒有。

這裡提供用 Code Injection 新增方法，如果你選的主題沒有這功能，可參考此方式修改，方法是採用 Font Awesome 免費圖示，搭配 cdnjs 提供的最新版本。

1.下面代碼填入 Code Injection 裡 Site Heade 的頁籤。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2.下面代碼填入 Code Injection 裡 Site Footer 的頁籤。

<style>
#scrollToTopBtn {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 99;
 border: none;
 outline: none;
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 cursor: pointer;
 padding: 10px;
 border-radius: 5px;
}

#scrollToTopBtn:hover {
 background-color: rgba(0, 0, 0, 0.8);
}
</style>

<button id="scrollToTopBtn" title="回到頂部">
 <i class="fas fa-arrow-up"></i>
</button>

<script>
 window.onscroll = function() {
   scrollFunction();
 };

 function scrollFunction() {
   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
     document.getElementById("scrollToTopBtn").style.display = "block";
   } else {
     document.getElementById("scrollToTopBtn").style.display = "none";
   }
 }

 document.getElementById("scrollToTopBtn").addEventListener("click", function() {
   document.body.scrollTop = 0; // For Safari
   document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 });
</script>

3.前往 cdnjs.com：（https://cdnjs.com/），搜尋框中輸入 "font-awesome"。

4.點擊 Font Awesome 的項目，會看到不同版本 Font Awesome 的 CDN 連結，選擇想要用的版本，替換步驟 1 的兩個連結位置，下方斜體標示範圍。

點擊連結圖示複製連結替換 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"

點擊盾牌圖示複製 SRI Hash 連結替換 integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="

5.前往 Font Awesome 官網（https://fontawesome.com/）搜尋喜歡的 icon，複製 HTLM 代碼，回步驟 2 裡的代碼，找到 <i class="fas fa-arrow-up"></i> 做更換，儲存完成修改動作。

文章目錄 - 功能新增

文章目錄對於 SEO 來講有一定必要程度，這部分也是要自己透過程式碼新增才會實現，下面是調整出來的文章目錄程式碼，只會在文章內有 H2、H3 標籤會自動產生，頁面內容則不會。

1.下面代碼填入 Code Injection 裡 Site Heade 的頁籤。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
 // 判斷是否不是 page 頁面
 if (!$("body").hasClass("page-template")) {
   // 生成目錄
   function generateTOC() {
     var toc = "<ul>";
     var headings = $("article .gh-content h2, article .gh-content h3"); // 抓取文章內容中的 h2 和 h3 標題

     headings.each(function(i, heading) {
       var id = "toc-" + i;
       $(heading).attr("id", id); // 為標題添加 ID
       toc += "<li><a href='#" + id + "'>" + $(heading).text() + "</a></li>";
     });

     toc += "</ul>";
     return toc;
   }

   // 插入目錄到文章第一段下方
   var tocHTML = generateTOC();
   if (tocHTML !== "<ul></ul>") { // 檢查是否有標題
     $("article p:first").after("<div id='toc'><b>目錄</b><span id='toc-toggle'>[顯示]</span><div id='toc-content'>" + tocHTML + "</div></div>");

     // 添加收合功能
     $("#toc-toggle").click(function() {
       $("#toc-content").slideToggle(function() {
         if ($("#toc-content").is(":visible")) {
           $("#toc-toggle").text("[隱藏]");
         } else {
           $("#toc-toggle").text("[顯示]");
         }
       });
     });
   }
 }
});
</script>

<style>
#toc {
 border: 1px solid #ccc;
 padding: 10px;
 margin-bottom: 20px;
 border-radius: 5px;
}

#toc ul {
 list-style: none;
 padding: 0;
}

#toc li {
 margin-bottom: 5px;
}

#toc a {
 text-decoration: none;
}

#toc-toggle {
 cursor: pointer;
 margin-left: 10px;
}

#toc-content {
 display: none; /* 初始狀態隱藏目錄內容 */
}
</style>

2.前往 jsDelivr 的 jQuery CDN 頁面獲取連結。