客製化你的 Astro Blog

在用了一陣子的 Astro 之後發現我的模板其實有些功能是我想要但是原本沒有的，因此我就嘗試自己動手修改一些功能，這篇文章就是紀錄以及教學如何客製化你的 Blog。

在文章中加入防雷海苔功能

🔧 步驟 1：建立自訂 remark 插件

首先，我們需要讓 Markdown 能夠識別 ||防雷內容|| 的語法。我們會寫一個簡單的 remark 插件，將它轉換為 HTML 的 <span class="spoiler">防雷內容</span>。

在你的專案中建立一個檔案，例如：remarkSpoiler.js（建議放在專案根目錄或 src/plugins/ 目錄中），內容如下：

import { visit } from 'unist-util-visit'

export default function remarkSpoiler() {
  return (tree) => {
    visit(tree, 'text', (node, index, parent) => {
      const regex = /\|\|(.+?)\|\|/g
      const matches = [...node.value.matchAll(regex)]

      if (matches.length > 0) {
        const newNodes = []
        let lastIndex = 0

        for (const match of matches) {
          const [fullMatch, spoilerText] = match
          const matchStart = match.index
          const matchEnd = matchStart + fullMatch.length

          if (matchStart > lastIndex) {
            newNodes.push({
              type: 'text',
              value: node.value.slice(lastIndex, matchStart),
            })
          }

          newNodes.push({
            type: 'html',
            value: `<span class="spoiler">${spoilerText}</span>`,
          })

          lastIndex = matchEnd
        }

        if (lastIndex < node.value.length) {
          newNodes.push({
            type: 'text',
            value: node.value.slice(lastIndex),
          })
        }

        parent.children.splice(index, 1, ...newNodes)
      }
    })
  }
}

⚙️ 步驟 2：在 Astro 中註冊插件

打開你的 astro.config.mjs，並加上這段：

import { defineConfig } from 'astro/config'
import remarkSpoiler from './src/plugins/remarkSpoiler.js' // 路徑根據你的檔案位置調整

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkSpoiler],
  },
})

那邊應該會長這樣，直接在最後加上就好：

remarkPlugins: [remarkMath, remarkReadingTime, remarkExcerpt, remarkGithubAdmonitionsToDirectives, remarkDirective, parseDirectiveNode,remarkSpoiler ],

✅ 記得重新啟動 Astro 開發伺服器：pnpm dev

🎨 步驟 3：加入防雷效果的 CSS

在 src/styles/global.css 中加入以下樣式（如果沒有這個檔案，可以自己創一個）：

.spoiler {
  background-color: #000;
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.spoiler:hover {
  color: #fff;
}

✅ 使用範例

現在，你就可以在 Markdown 檔案中直接使用這樣的語法了：

這是一段正常文字，其中包含 ||這是防雷內容||，滑過才能看到。

渲染後的效果會變成：

這是一段正常文字，其中包含 <span class="spoiler">這是防雷內容</span>，滑過才能看到。

這是效果

在頁腳處新增網站存在時間

先看效果

🔧1.先創建時間的組件

新增一個檔案src/components/SiteRuntime.astro

---
const startDate = new Date('2023-01-01') // 替換為您的網站實際上線日期
---

<div id="site-runtime" class="text-sm opacity-75 dark:text-white text-black">
  網站已運行：<span id="runtime-counter">計算中...</span>
</div>

<script>
  function updateRuntime() {
    const startDate = new Date('2023-01-01') // 替換為您的網站實際上線日期
    const currentDate = new Date()

    const timeDiff = currentDate.getTime() - startDate.getTime()

    let seconds = Math.floor(timeDiff / 1000)
    let minutes = Math.floor(seconds / 60)
    let hours = Math.floor(minutes / 60)
    let days = Math.floor(hours / 24)

    const years = Math.floor(days / 365)
    const months = Math.floor((days % 365) / 30)
    days = days % 30
    hours = hours % 24
    minutes = minutes % 60
    seconds = seconds % 60

    let runtimeText = ''

    if (years > 0) {
      runtimeText += `${years} 年 `
    }

    if (months > 0 || years > 0) {
      runtimeText += `${months} 個月 `
    }

    runtimeText += `${days} 天 ${hours} 時 ${minutes} 分 ${seconds} 秒`

    document.getElementById('runtime-counter').textContent = runtimeText
  }

  updateRuntime()
  setInterval(updateRuntime, 1000)
</script>

⚙️2. 在頁腳引入這個組件

可能是在 src\layouts\MainGridLayout.astro中

---
import SiteRuntime from '../components/SiteRuntime.astro'
// 其他導入...
---

<!-- 您的頁腳部分 -->
<footer class="mt-8 py-6 border-t border-gray-200 dark:border-gray-700">
  <div class="container mx-auto px-4">
    <div class="flex flex-col items-center justify-center text-center">
      <div class="mb-2">
        <SiteRuntime />
      </div>
      <div class="text-sm opacity-75 dark:text-white text-black"></div>
    </div>
  </div>
</footer>

# Astro 部落格客製化教學：留言、Spoiler 與功能擴充實作