urara-docs/zh/advanced/extension.md

拓展

正是像您這樣的人為本項目帶來了拓展挿件，下麵列出了本文件中已收錄的拓展。

文章組件

SvelteKit Embed

演示與使用方法 - sveltekit-embed.vercel.app

⚠ SvelteKit Embed 已替代了先前的同類組件，請參考最新的使用方法。

狀態提示

由 藍+85CD 製作 | 演示 - Seviche.cc

配置

✅ 此拓展已包含在 Urara 中，無需額外下載。

在使用前需導入組件：

<script>
  import Alert from '$lib/components/extra/alert.svelte'
</script>

使用方法：

<Alert status="warning" description="警告資訊" title="警告標題"/>

您可以根據需要修改提示的狀態，可用的選項有：info、success、warning 和 error。

您還可以參考使用例源碼：Urara-Blog/+page.svelte.md at main · Sevichecc/Urara-Blog。

資料卡片

由 藍+85CD 製作 | 演示 - ./kwaa.dev

配置

⚠ 此拓展尚未包含在 Urara 中，您需要手動下載組件。

下載 profile.svelte 文件，將其放入 src/lib/components/extra/ 目錄內。

在使用前需導入組件：

<script lang="ts">
  import Profile from '$lib/components/extra/profile.svelte'
</script>

使用方法：

<Profile subname="這裡是姓氏"/>

此拓展會在您的文章內展示個人資料卡片，其中頭像、姓名和簡介會跟隨您在 site.ts 的設定，您還可以通過 avatar="<圖片路徑>" 、 name="姓名" 和 bio={`簡介`} 來手動指定它們：

<Profile name="姓名" avatar="/assets/maskable@512.png" subname="這裡是姓氏" bio={`這裡是簡介。<br>這是第二行簡介。`} />

您還可以參考使用例源碼：blog/+page.svelte.md at main · kwaa/blog。

GitHub 倉庫

由 藍+85CD 製作 | 演示 - ./kwaa.dev

配置

⚠ 此拓展尚未包含在 Urara 中，您需要手動下載組件。

下載 github.svelte 文件，將其放入 src/lib/components/extra/ 目錄內。

在使用前需導入組件：

<script>
  import GitHub from '$lib/components/extra/github.svelte'
</script>

使用方法：

<GitHub user="importantimport" repo="urara"/>

此拓展會在您的文章內展示 https://github.com/importantimport/urara 倉庫，您可以根據需要把 importantimport 替換為其他用戶或組織，把 urara 替換為該用戶或組織名下的 GitHub 倉庫。

您還可以參考使用例源碼：blog/+page.svelte.md at main · kwaa/blog。

評論系統

Webmention

由 藍+85CD 製作 | 演示 - ./kwaa.dev

配置

✅ 此拓展已包含在 Urara 中，無需額外下載。

使用方法：

首先需要在 src/lib/config/general.ts 中添加 IndieAuth 内容：

export const head: HeadConfig = {
  custom: ({ dev, post, page }) =>
    dev
      ? []
      : [
          // IndieAuth
          '<link rel="authorization_endpoint" href="https://indieauth.com/auth">',
          '<link rel="token_endpoint" href="https://tokens.indieauth.com/token">',
        ],
  me: ['https://github.com/example']
}

您可以將上方的 https://github.com/example 替換為您的 GitHub 帳號連結，要使用其他驗證方式請參考：IndieAuth Documentation - Sign in with your domain name。

接下來，還需要根據需求修改 src/lib/config/post.ts 文件：

import type { PostConfig } from '$lib/types/post'

export const post: PostConfig = {
  comment: {
    use: ['Webmention', '其他評論系統'],
    style: 'boxed', // 評論系統欄樣式: none / bordered / lifted / boxed
    webmention: {
      username: '[在此輸入域名]',
      sortBy: 'created', // 排序方式: created / updated
      sortDir: 'down', // 排序順序: up / down
      form: true, // 啟用評論: true / false
      commentParade: true // 啟用匿名評論: true / false
    }
  }
}

在此之後，您可以使用設定的域名來登入 Webmention.io，通過驗證後，您可以查看最近的 Webmentions。

配置完成後，Webmention 既可使用，將顯示在文章末尾後。

您還可以參考使用例源碼：blog/post.ts at main · kwaa/blog。

Giscus

由 藍+85CD 製作 | 演示 - ./kwaa.dev

配置

✅ 此拓展已包含在 Urara 中，無需額外下載。

使用方法：

訪問 Giscus 頁面進行配置，按照步驟配置後，您會獲得以下內容：

<script src="https://giscus.app/client.js"
      data-repo="[在此輸入倉庫]"
      data-repo-id="[在此輸入倉庫 ID]"
      data-category="[在此輸入分類名]"
      data-category-id="[在此輸入分類 ID]"
      data-mapping="pathname"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="top"
      data-theme="preferred_color_scheme"
      data-lang="zh-TW"
      crossorigin="anonymous"
      async>
</script>

接下來，您需要根據需求修改 src/lib/config/post.ts 文件：

import type { PostConfig } from '$lib/types/post'

export const post: PostConfig = {
  comment: {
    use: ['Giscus', '其他評論系統'],
    style: 'boxed', // 評論系統欄樣式: none / bordered / lifted / boxed
    giscus: {
      repo: '[在此輸入倉庫]',
      repoID: '[在此輸入倉庫 ID]',
      category: '[在此輸入分類名]',
      categoryID: '[在此輸入分類 ID]',
      reactionsEnabled: true, // 表情回應: true / false
      inputPosition: 'top' // 評論框位置: top / bottom
      lang: 'zh-TW', // 語言
      theme: 'preferred_color_scheme' // 主題
    }
  }
}

⚠ 此拓展為 Giscus 默認啟用了 pathname 映射方法與 lazyload 加載選項。

配置完成後，Giscus 既可使用，將顯示在文章末尾後。

您還可以參考使用例源碼：blog/post.ts at main · kwaa/blog。

Utterances

由 藍+85CD 製作

配置

✅ 此拓展已包含在 Urara 中，無需額外下載。

使用方法：

訪問 Utterances 頁面進行配置，按照步驟配置後，您會獲得以下內容：

<script src="https://utteranc.es/client.js"
      repo="[在此輸入倉庫]"
      issue-term="pathname"
      theme="preferred-color-scheme"
      crossorigin="anonymous"
      async>
</script>

接下來，您需要根據需求修改 src/lib/config/post.ts 文件：

import type { PostConfig } from '$lib/types/post'

export const post: PostConfig = {
  comment: {
    use: ['Utterances', '其他評論系統'],
    style: 'boxed', // 評論系統欄樣式: none / bordered / lifted / boxed
    utterances: {
      repo: '[在此輸入倉庫]',
      lable: '', // 標籤
      theme: 'preferred-color-scheme', // 主題
    }
  }
}

⚠ 此拓展為 Utterances 默認啟用了 pathname 映射方法。

配置完成後，Utterances 既可使用，將顯示在文章末尾後。

介面組件

功能按鈕

配置

⚠ 這些拓展尚未包含在 Urara 中，您需要手動下載組件。

在使用前需下載組件：

• 回復：reply.svelte - 由 藍+85CD 製作 | 演示 - ./kwaa.dev

• 分享：share.svelte - 由 藍+85CD 製作 | 演示 - ./kwaa.dev

• 翻譯：translate.svelte - 由 藍+85CD 製作 | 演示 - ./kwaa.dev

在上方下載需要的功能按鈕後，在 src/lib/components/ 目錄下新建一個名為 actions 的文件夾，放入其中。

使用方法：

當您完成以上設定後，功能按鈕已可用，需要注意：此拓展僅在文章頁面寬度足够時才會顯示。

您還可以參考使用例源碼：blog/src/lib/components/actions at main · kwaa/blog。

頁面拓展

友鏈

由 藍+85CD 製作 | 演示 - ./kwaa.dev

配置

⚠ 此拓展尚未包含在 Urara 中，您需要手動下載組件。

1. 下載 friend.svelte 文件，放入 src/lib/components/extra/ 目錄。

2. 下載 +page.svelte 文件，在 src/routes/ 目錄下新建一個名為 friends 的文件夾，放入其中。

3. 下載 friends.ts 文件，放入 src/lib/config/ 目錄。

4. 安裝 svelte-bricks 依賴：

pnpm add -D svelte-bricks

使用方法：

friends.ts 中提供了默認樣式，可以自行替換：

export const friends: Friend[] = [
  {
    id: 'id', // HTML ID
    rel: 'friend', // 連絡人類型: contact / acquaintance / friend
    name: 'Name', // 朋友昵稱
    title: 'Title', // 標題
    avatar: '/favicon.png', // 朋友圖片
    link: 'https://urara-demo.netlify.app/', // 連結
    descr: 'A Descriptions.', // 朋友描述
  }
]

您還可以參考使用例源碼：blog/friends.ts at main · kwaa/blog。

項目展示

由 SevicheCC 製作 | 演示 - Seviche.cc

配置

⚠ 此拓展尚未包含在 Urara 中，您需要手動下載組件。

1. 下載 projects.svelte 文件，放入 src/lib/components/extra/ 目錄。

2. 下載 +page.svelte 文件，在 src/routes/ 目錄下新建一個名為 projects 的文件夾，放入其中。

3. 下載 projects.ts 文件，放入 src/lib/config/ 目錄。

使用方法：

projects.ts 中提供了默認樣式，可以自行替換：

export type Project = {
  id: string
  name: string
  tags?: string[]
  feature?: string
  description?: string
  img: string
  link?: string
}

export const projects: Project[] = [
  {
    id: 'urara', // HTML ID
    name: 'Urara', // 項目名
    tags: ['Svelte', 'TypeScript'], // 標籤
    description: // 描述
      "🌸 Sweet, Powerful, IndieWeb-Compatible SvelteKit Blog Starter. [δ](Delta)",
    feature: 'Svelte', // 特點
    img: 'https://github.com/importantimport/urara/raw/main/urara/hello-world/urara.webp',
    link: 'https://github.com/importantimport/urara'
  }
]

您還可以參考使用例源碼：Urara-Blog/projects.ts at main · Sevichecc/Urara-Blog。