urara-docs/zh-hans/advanced/extension.md

# 拓展

正是像您这样的人为本项目带来了拓展插件，下面列出了本文档中已收录的拓展。

## 文章组件

### SvelteKit Embed

#### 演示与使用方法 - [sveltekit-embed.vercel.app](https://sveltekit-embed.vercel.app/)

**⚠ SvelteKit Embed 已替代了先前的同类组件，请参考最新的使用方法。**

### 状态提示

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [Seviche.cc](https://seviche.cc/2022-12-20-pleroma-mod/)

<details>
  <summary>配置</summary>
  
  **✅ 此拓展已包含在 Urara 中，无需额外下载。**

  #### 在使用前需导入组件：

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

  #### 使用方法：

  ```md
  <Alert status="warning" description="警告信息" title="警告标题"/>
  ```

  您可以根据需要修改提示的状态，可用的选项有：`info`、`success`、`warning` 和 `error`。

  您还可以参考使用例源码：[**Urara-Blog/+page.svelte.md at main · Sevichecc/Urara-Blog**](https://github.com/Sevichecc/Urara-Blog/blob/main/urara/2022-12-20-pleroma-mod/+page.svelte.md?plain=1#L12)。

</details>


### 资料卡片

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/about#关于我)

<details>
  <summary>配置</summary>
  
  **⚠ 此拓展尚未包含在 Urara 中，您需要手动下载组件。**

  下载 [**profile.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/profile/profile.svelte) 文件，将其放入 `src/lib/components/extra/` 目录内。

  #### 在使用前需导入组件：

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

  #### 使用方法：

  ```md
  <Profile subname="这里是姓氏"/>
  ```

  此拓展会在您的文章内展示个人资料卡片，其中头像、姓名和简介会跟随您在 `site.ts` 的设定，您还可以通过 `avatar="<图片路径>"` 、 `name="姓名"` 和 ``bio={`简介`}`` 来手动指定它们：

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

  您还可以参考使用例源码：[**blog/+page.svelte.md at main · kwaa/blog**](https://github.com/kwaa/blog/blob/main/urara/about/+page.svelte.md?plain=1#L13)。

</details>

### GitHub 仓库

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara#开源)

<details>
  <summary>配置</summary>
  
  **⚠ 此拓展尚未包含在 Urara 中，您需要手动下载组件。**

  下载 [**github.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/github/github.svelte) 文件，将其放入 `src/lib/components/extra/` 目录内。

  #### 在使用前需导入组件：

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

  #### 使用方法：

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

  此拓展会在您的文章内展示 [https://github.com/<u>**importantimport/urara**</u>](https://github.com/importantimport/urara) 仓库，您可以根据需要把 **importantimport** 替换为其他用户或组织，把 **urara** 替换为该用户或组织名下的 GitHub 仓库。

  您还可以参考使用例源码：[**blog/+page.svelte.md at main · kwaa/blog**](https://github.com/kwaa/blog/blob/main/urara/intro-urara/+page.svelte.md?plain=1#L280)。

</details>

## 评论系统

### Webmention

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara#post-comment)

<details>
  <summary>配置</summary>
  
  **✅ 此拓展已包含在 Urara 中，无需额外下载。**

  #### 使用方法：

  首先需要在 `src/lib/config/general.ts` 中添加 IndieAuth 属性：

  ```ts
  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**](https://indieauth.com/setup)。

  接下来，还需要根据需求修改 `src/lib/config/post.ts` 文件：

  ```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**](https://webmention.io/)，通过验证后，您可以查看最近的 Webmentions。

  配置完成后，Webmention 既可使用，将显示在文章末尾后。

  您还可以参考使用例源码：[**blog/post.ts at main · kwaa/blog**](https://github.com/kwaa/blog/blob/main/src/lib/config/post.ts#L10)。

</details>

### Giscus

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara#post-comment)

<details>
  <summary>配置</summary>
  
  **✅ 此拓展已包含在 Urara 中，无需额外下载。**

  #### 使用方法：

  访问 [Giscus](https://giscus.app/) 页面进行配置，按照步骤配置后，您会获得以下内容：

  ```ts
  <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` 文件：

  ```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**](https://github.com/kwaa/blog/blob/main/src/lib/config/post.ts#L17)。

</details>

### Utterances

#### 由 [藍+85CD](https://github.com/kwaa) 制作

<details>
  <summary>配置</summary>
  
  **✅ 此拓展已包含在 Urara 中，无需额外下载。**

  #### 使用方法：

  访问 [Utterances](https://utteranc.es/) 页面进行配置，按照步骤配置后，您会获得以下内容：

  ```ts
  <script src="https://utteranc.es/client.js"
        repo="[在此输入仓库]"
        issue-term="pathname"
        theme="preferred-color-scheme"
        crossorigin="anonymous"
        async>
  </script>
  ```

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

  ```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 既可使用，将显示在文章末尾后。

</details>

## 界面组件

### 功能按钮

<details>
  <summary>配置</summary>
  
  **⚠ 这些拓展尚未包含在 Urara 中，您需要手动下载组件。**

  #### 在使用前需下载组件：

  - **回复：[reply.svelte](https://github.com/importantimport/urara-docs/raw/master/public/extension/actions/reply.svelte) - <small>由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara)</small>**

  - **分享：[share.svelte](https://github.com/importantimport/urara-docs/raw/master/public/extension/actions/share.svelte) - <small>由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara)</small>**
  
  - **翻译：[translate.svelte](https://github.com/importantimport/urara-docs/raw/master/public/extension/actions/translate.svelte) - <small>由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/intro-urara)</small>**


  在上方下载需要的功能按钮后，在 `src/lib/components/` 目录下新建一个名为 `actions` 的文件夹，放入其中。

  #### 使用方法：

  当您完成以上设定后，功能按钮已可用，需要注意：**此拓展仅在文章页面宽度足够时才会显示**。

  您还可以参考使用例源码：[**blog/src/lib/components/actions at main · kwaa/blog**](https://github.com/kwaa/blog/tree/main/src/lib/components/actions)。

</details>

## 页面拓展

### 友链

#### 由 [藍+85CD](https://github.com/kwaa) 制作 | 演示 - [./kwaa.dev](https://kwaa.dev/friends)

<details>
  <summary>配置</summary>
  
  **⚠ 此拓展尚未包含在 Urara 中，您需要手动下载组件。**

  1. 下载 [**friend.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/friend/friend.svelte) 文件，放入 `src/lib/components/extra/` 目录。

  2. 下载 [**+page.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/friend/%2Bpage.svelte) 文件，在 `src/routes/` 目录下新建一个名为 `friends` 的文件夹，放入其中。

  3. 下载 [**friends.ts**](https://github.com/importantimport/urara-docs/raw/master/public/extension/friend/friends.ts) 文件，放入 `src/lib/config/` 目录。

  4. 安装 `svelte-bricks` 依賴：

  ```bash
  pnpm add -D svelte-bricks
  ```

  #### 使用方法：

  `friends.ts` 中提供了默认样式，可以自行替换：
  
  ```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**](https://github.com/kwaa/blog/blob/main/src/lib/config/friends.ts#L29)。

</details>

### 项目展示

#### 由 [SevicheCC](https://github.com/sevichecc) 制作 | 演示 - [Seviche.cc](https://seviche.cc/projects)

<details>
  <summary>配置</summary>
  
  **⚠ 此拓展尚未包含在 Urara 中，您需要手动下载组件。**

  1. 下载 [**projects.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/project/projects.svelte) 文件，放入 `src/lib/components/extra/` 目录。

  2. 下载 [**+page.svelte**](https://github.com/importantimport/urara-docs/raw/master/public/extension/project/%2Bpage.svelte) 文件，在 `src/routes/` 目录下新建一个名为 `projects` 的文件夹，放入其中。

  3. 下载 [**projects.ts**](https://github.com/importantimport/urara-docs/raw/master/public/extension/project/projects.ts) 文件，放入 `src/lib/config/` 目录。

  #### 使用方法：

  `projects.ts` 中提供了默认样式，可以自行替换：
  
  ```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**](https://github.com/Sevichecc/Urara-Blog/blob/main/src/lib/config/projects.ts#L11)。

</details>