urara-docs/zh-hans/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-CN"
      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-CN', // 语言
      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。