Ghost 教學：如何在文章底部顯示作者簡介

Ghost 的 Ruby 主題以及部分其他官方主題，無法預設在文章頁面底部顯示作者簡介。對於個人部落格來說，文章底部的作者資訊卡片是讀者認識你的重要入口，但不是每個 Ghost 主題都內建這個功能。

這篇教學會用 Ghost 內建的 Code Injection 功能來解決這個問題，文中附上的完整程式碼可以直接複製使用。

我會從前置設定開始，一步步帶你完成在文章底部顯示作者簡介的設定，最後也會詳細說明每一個可以調整的 CSS 參數，讓你可以輕鬆客製化屬於自己的風格。

前置準備：Content API Key 與作者資料設定

在加入程式碼之前，你需要先完成兩件事。

1. 填寫你的 Ghost 作者資料

到 Ghost 後台 → Settings → Staff → 點選你自己的帳號，填寫以下欄位：

• Profile image：你的頭像（建議使用正方形圖片，顯示時會自動裁成圓形）
• Bio：你的個人簡介（建議 1-2 句話，這段文字會直接顯示在作者簡介卡片上）

這些資料會被接下來的程式碼透過 Ghost Content API 自動讀取並顯示，所以如果你之後想在後台更新 Bio 或頭像，文章底部的卡片也會自動同步，不需要更動任何程式碼。

2. 建立 Ghost Content API Key

到 Ghost 後台 → Settings → Integrations → 點選 Add custom integration，取一個名字（例如「Author Bio」），建立完成後你會看到兩組 Key：

• Content API key：這是我們需要的，把它複製下來
• Admin API key：這個不需要用到，不要動它

Content API key 是唯讀的，只能用來讀取你的公開內容（已發布的文章、作者資訊等），無法用來修改或刪除任何資料，出現在前端程式碼裡不會有安全疑慮。

將作者簡介卡片加入 Ghost Code Injection

到 Ghost 後台 → Settings → Code injection → 在 Site Footer 欄位中貼上以下完整程式碼：

<style>
.author-bio-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding: 2.5rem 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.author-bio-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-bio-card .author-info h4 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.author-bio-card .author-info h4 a {
  color: inherit;
  text-decoration: none;
}

.author-bio-card .author-info p {
  margin: 0;
  font-size: 1.15rem;
  color: #444;
  line-height: 1.7;
}
</style>

<script>
(function () {
  var postContent = document.querySelector('.gh-content');
  if (!postContent) return;

  var API_KEY = 'YOUR_CONTENT_API_KEY';

  var slug = window.location.pathname.split('/').filter(Boolean).pop();

  fetch(window.location.origin + '/ghost/api/content/posts/slug/' + slug + '/?key=' + API_KEY + '&include=authors')
    .then(function (res) { return res.json(); })
    .then(function (data) {
      if (!data.posts || !data.posts[0]) return;
      var author = data.posts[0].primary_author;
      if (!author || !author.bio) return;

      var card = document.createElement('div');
      card.className = 'author-bio-card';

      var imgHtml = author.profile_image
        ? '<img src="' + author.profile_image + '" alt="' + author.name + '">'
        : '';

      card.innerHTML =
        imgHtml +
        '<div class="author-info">' +
        '  <h4><a href="/author/' + author.slug + '/">' + author.name + '</a></h4>' +
        '  <p>' + author.bio + '</p>' +
        '</div>';

      postContent.after(card);
    })
    .catch(function () {});
})();
</script>

貼上之後，把程式碼中的 YOUR_CONTENT_API_KEY 替換成你在前一步取得的 Content API key，然後按 Save。

打開任何一篇已發布的文章，你應該就會在文章內容的正下方看到作者簡介卡片了。

這段程式碼做了什麼？

如果你只是想使用，上面的步驟已經完成了，這一段是給想了解原理的人看的。

這段程式碼的運作流程是：

1. 判斷頁面類型：偵測頁面上是否有 .gh-content 這個 CSS class（Ghost 用它來包住文章內容），如果沒有就代表目前不是文章頁面，程式碼不會執行。這表示首頁、標籤頁、作者頁等其他頁面都不會受到影響。
2. 取得作者資料：用 Ghost Content API，根據目前文章網址的 slug 去查詢這篇文章的作者資訊，包含名字、Bio、頭像網址等。
3. 組合並插入卡片：將作者的頭像、名字、Bio 組合成一張卡片，插入到 .gh-content 的正下方。名字是可以點擊的連結，會連到該作者的作者頁面（/author/作者名稱/）。
4. 防呆處理：如果作者沒有填寫 Bio，卡片不會顯示（避免出現空白卡片）；如果沒有上傳頭像，卡片會只顯示名字和 Bio，不會出現破圖。

因為是透過 Code Injection 加入的，這段程式碼獨立於主題之外。即使你之後更新了 Ruby 主題的版本，作者簡介卡片也不會受到影響。

CSS 參數調整：頭像大小、字體、間距

如果你想根據自己的主題配色和排版風格修改這張卡片，可以參考下方參數。
所有可調整的參數都在<style> 區塊裡。

整體卡片（.author-bio-card）

作者頭像（.author-bio-card img）

作者名字（.author-bio-card .author-info h4）

名字連結樣式（.author-bio-card .author-info h4 a）

Bio 文字（.author-bio-card .author-info p）

Casper、Source 等其他 Ghost 主題適用嗎？

這段程式碼是在 Ruby 主題上開發和測試的，但核心邏輯使用的是 Ghost 的通用結構，所以大部分 Ghost 主題都可以直接使用。

唯一需要確認的是：你的主題是否使用 .gh-content 作為文章內容的 CSS class。確認方法是在文章頁面按 F12 打開瀏覽器的開發者工具，找到文章內容的最外層容器，查看它的 class name。

Ghost 的官方主題（包括 Casper、Source、Edition、Bulletin、Alto 等）大多使用 .gh-content，所以在這些主題上應該都可以直接使用。如果你的主題用的是不同的 class name，把程式碼中 JavaScript 部分的 .gh-content 換掉就好。

另外有些主題（像 Casper）本身已經內建了作者簡介功能。如果你的主題已經有了，就不需要這段程式碼。可以先檢查你的文章底部是否已經有作者資訊再決定。

常見問題

貼上程式碼後看不到卡片？

最常見的原因是 Content API key 沒有正確替換。確認你把程式碼中的 YOUR_CONTENT_API_KEY 這整段文字（包括引號裡面的內容）換成了你自己的 key。另外確認文章是已發布的狀態，草稿頁面的網址結構不同，API 會查不到。

卡片的位置不對？

如果卡片出現在你預期之外的位置，可能是你的主題在 .gh-content 之後還有其他元素。你可以用瀏覽器開發者工具（F12）檢查 .author-bio-card 被插入到了哪裡，然後調整 margin-top 和 margin-bottom 的值。

更新了 Bio 但卡片上沒有更新？

Ghost 可能有快取。試試在瀏覽器按 Ctrl + Shift + R（Mac 上是 Cmd + Shift + R）強制刷新，或是等幾分鐘讓快取過期。

Content API key 出現在前端原始碼裡，安全嗎？

安全的。Ghost 的 Content API key 設計上就是公開的，只有唯讀權限，只能存取已發布的公開內容。Ghost 官方文件中的所有 Content API 範例也都是在前端直接使用這組 key。