docs: update docs

docs/.vuepress/navbar.ts

@@ -14,6 +14,12 @@ export const zhNavbar = [
     link: '/config/intro/',
     activeMatch: '^/config/',
   },
+  {
+    text: '插件',
+    icon: 'clarity:plugin-line',
+    link: '/plugins/',
+    activeMatch: '^/plugins/',
+  },
   {
     text: '博客',
     link: '/blog/',
@@ -24,6 +30,7 @@ export const zhNavbar = [
     text: '更多',
     icon: 'icon-park-outline:more-three',
     items: [
+      { text: '友情链接', link: '/friends/' },
       {
         text: 'Vuepress',
         items: [
@@ -37,8 +44,8 @@ export const zhNavbar = [
     text: `${version}`,
     icon: 'codicon:versions',
     items: [
-      { text: '更新日志', link: 'https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CHANGELOG.md' },
+      { text: '更新日志', link: '/changelog/' },
-      { text: '参与贡献', link: 'https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CONTRIBUTING.md' },
+      { text: '参与贡献', link: '/contributing/' },
     ],
   },
 ] as NavItem[]
@@ -79,8 +86,8 @@ export const enNavbar = [
     text: `${version}`,
     icon: 'codicon:versions',
     items: [
-      { text: 'Changelog', link: 'https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CHANGELOG.md' },
+      { text: 'Changelog', link: '/changelog/' },
-      { text: 'Contributing', link: 'https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CONTRIBUTING.md' },
+      { text: 'Contributing', link: '/contributing/' },
     ],
   },
 ] as NavItem[]

docs/.vuepress/notes.ts

@@ -11,15 +11,18 @@ export const zhNotes = definePlumeNotesConfig({
         {
           text: '快速开始',
           collapsed: false,
+          icon: 'carbon:idea',
           items: ['介绍', '安装与使用', '博客', '知识笔记'],
         },
         {
           text: '写作',
+          icon: 'fluent-mdl2:edit-create',
           collapsed: false,
           items: [
             '编写文章',
             {
               text: 'markdown',
+              icon: 'material-symbols:markdown-outline',
               items: ['markdown-基础', 'markdown-扩展', 'markdown-进阶', 'markdown-试验性'],
             },
             '国际化',
@@ -27,16 +30,19 @@ export const zhNotes = definePlumeNotesConfig({
         },
         {
           text: '功能',
+          icon: 'lucide:box',
           collapsed: false,
           items: ['代码复制', '内容搜索', '评论', '加密', '组件', '友情链接页', 'seo', 'sitemap'],
         },
         {
           text: '自定义',
+          icon: 'material-symbols:dashboard-customize-outline-rounded',
           collapsed: false,
           items: ['自定义首页', '自定义样式'],
         },
         {
           text: 'API',
+          icon: 'mdi:api',
           collapsed: false,
           items: ['api-客户端', 'api-node'],
         },
@@ -71,6 +77,34 @@ export const zhNotes = definePlumeNotesConfig({
         },
       ],
     },
+    {
+      dir: 'plugins',
+      link: '/plugins/',
+      sidebar: [
+        {
+          text: '插件',
+          link: '/plugins/',
+          items: [
+            'caniuse',
+            'iconify',
+            'shiki',
+            'content-updated',
+            {
+              text: 'plugin-netlify-functions',
+              dir: 'netlify-functions',
+              link: '/plugins/plugin-netlify-functions/',
+              items: [
+                '介绍',
+                '使用',
+                '功能',
+                'api',
+                'functions',
+              ],
+            },
+          ],
+        },
+      ],
+    },
   ],
 })
 

docs/.vuepress/theme.ts

@@ -33,6 +33,7 @@ export const theme: Theme = themePlume({
     shiki: { twoslash: true },
     markdownEnhance: {
       demo: true,
+      include: true,
     },
     comment: {
       provider: 'Giscus',

docs/README.md

@@ -155,7 +155,7 @@ export default defineUserConfig({
 
 ### 更新记录
 
-[Changelog](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CHANGELOG.md)
+[Changelog](/changelog/)
 
 ### 贡献者
 

docs/changelog.md

@@ -0,0 +1,14 @@
+---
+title: Changelog
+author: pengzhanbo
+createTime: 2024/03/13 21:15:50
+permalink: /changelog/
+article: false
+aside: false
+externalLinkIcon: false
+readingTime: false
+comment: false
+editLink: false
+---
+
+<!-- @include: ../CHANGELOG.md -->

docs/contributing.md

@@ -0,0 +1,12 @@
+---
+title: 贡献指南
+author: pengzhanbo
+createTime: 2024/03/13 21:27:45
+permalink: /contributing/
+article: false
+externalLinkIcon: false
+readingTime: false
+editLink: false
+---
+
+<!-- @include: ../CONTRIBUTING.md{2-} -->

docs/notes/plugins/README.md

@@ -0,0 +1,17 @@
+---
+title: 介绍
+author: pengzhanbo
+createTime: 2024/03/11 17:34:29
+permalink: /plugins/
+---
+
+## 概述
+
+主题通过插件来实现各种功能，除了一些对主题有强依赖的插件外，主题还开发了一些通用的插件。
+
+## 插件
+
+- [@vuepress-plume/plugin-caniuse](/plugins/plugin-caniuse/)
+- [@vuepress-plume/plugin-iconify](/plugins/plugin-iconify/)
+- [@vuepress-plume/plugin-shikiji](/plugins/plugin-shikiji/)
+- [vuepress-plugin-netlify-functions](/plugins/plugin-netlify-functions/)

docs/notes/plugins/caniuse.md

@@ -0,0 +1,106 @@
+---
+title: plugin-caniuse
+author: pengzhanbo
+createTime: 2024/03/11 17:22:52
+permalink: /plugins/plugin-caniuse/
+---
+
+## 指南
+
+为你的 vuepress 站点，在编写文章时， 提供嵌入 [can-i-use](https://caniuse.com/) WEB feature 各平台支持说明 的功能。
+
+方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。
+
+## 安装
+
+::: code-tabs
+@tab  npm
+``` sh
+npm install @vuepress-plume/plugin-caniuse
+```
+
+@tab:active yarn
+``` sh
+yarn add @vuepress-plume/plugin-caniuse
+```
+
+@tab pnpm
+``` sh
+pnpm add @vuepress-plume/plugin-caniuse
+```
+:::
+
+## 使用
+
+### Step1：添加插件
+
+将插件添加到你的 vuepress 项目的配置文件中：
+
+::: code-tabs
+@tab .vuepress/config.ts
+``` ts
+import { defineUserConfig } from 'vuepress'
+import { caniusePlugin } from '@vuepress-plume/plugin-caniuse'
+
+export default defineUserConfig({
+  plugins: [
+    caniusePlugin()
+  ]
+})
+```
+:::
+
+### Step2：在markdown中使用
+
+在你的 文章 markdown文件中，使用以下格式：
+
+``` md
+::: caniuse <feature> {browser_versions}
+:::
+```
+
+__示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：__
+
+``` md
+::: caniuse css-matches-pseudo
+:::
+```
+效果：
+
+::: caniuse css-matches-pseudo
+:::
+
+## Method
+
+`caniusePlugin([options])`
+
+插件注册函数
+
+__options:__ `[CanIUsePluginOptions]`
+
+- `options.mode`: 配置 can-i-use 在 文章中的 嵌入模式, 默认： `image`
+  - `image`： 嵌入 特性图表图片
+  - `embed`:  嵌入 iframe， 实时的，可交互的模式
+
+## Markdown 语法
+
+``` md
+::: caniuse <feature> {browser_versions}
+:::
+```
+
+### `<feature>`
+
+必填。 正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
+
+### `{browser_versions}`
+
+可选。当前特性在多个版本中的支持情况。
+
+默认值为: `{-2,-1,1}`
+
+格式： `{number,number,...}`  取值范围为 `-5 ~ 3`
+
+- 小于`0` 表示低于当前浏览器版本的支持情况
+- `0` 表示当前浏览器版本的支持情况
+- 大于`0` 表示高于当前浏览器版本的支持情况

docs/notes/plugins/content-updated.md

@@ -0,0 +1,87 @@
+---
+title: plugin-content-update
+author: pengzhanbo
+createTime: 2024/03/12 19:53:34
+permalink: /plugins/plugin-content-update/
+---
+
+## 指南
+
+用于解决在 开发运行时， Markdown 内容更新时， 部分依赖解析后的 HTML 内容提供功能的插件，
+未对新增的 Markdown 内容提供支持。
+
+如， `plugin-medium-zoom` 需要在 页面渲染完成后，获取当前页面的图片实现 图片放大功能。
+但是在 开发运行时，在 markdown 插入新图片后，如果页面未刷新，新增的图片无法实现放大功能。
+
+本插件对 `vuepress` 内置插件 `<Content />` 进行重写替换，并提供了 `onContentUpdated(callback)`
+方法，用于在 Markdown 内容更新时，执行回调函数。
+
+::: warning 警告
+本插件为 试验性插件，未来会随着 VuePress 的更新进行升级。
+
+本插件主要面向 主题开发者 或 插件开发者。
+:::
+
+## 安装
+
+::: code-tabs
+@tabs npm
+```sh
+npm install @vuepress-plume/plugin-content-update
+```
+@tab pnpm
+```sh
+pnpm add @vuepress-plume/plugin-content-update
+```
+@tab yarn
+```sh
+yarn add @vuepress-plume/plugin-content-update
+```
+:::
+
+## 使用
+
+在 vuepress 配置文件中引入插件：
+
+::: code-tabs
+@tab .vuepress/config.ts
+``` ts
+import { defineUserConfig } from 'vuepress'
+import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
+
+export default defineUserConfig({
+  plugins: [
+    contentUpdatePlugin()
+  ]
+})
+```
+:::
+
+在 客户端文件中使用：
+
+``` vue
+<script lang="ts" setup>
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
+
+onContentUpdated(() => {
+  // do something
+})
+</script>
+```
+
+## 示例
+
+获取 `medium-zoom` 实例， 当 markdown 内容更新时， 刷新 `medium-zoom` 实例，使新增的图片可放大
+
+```vue
+<script lang="ts" setup>
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
+import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
+
+const mediumZoom = useMediumZoom()
+
+onContentUpdated(() => {
+  mediumZoom?.refresh()
+})
+</script>
+```

docs/notes/plugins/iconify.md

@@ -0,0 +1,96 @@
+---
+title: plugin-iconify
+author: pengzhanbo
+createTime: 2024/03/13 17:28:25
+permalink: /plugins/plugin-iconify/
+---
+
+## 指南
+
+添加 `iconify` 图标库支持。并注入全局组件 `<Iconify>`
+
+支持 iconify 所有图标，支持通过 icon name 加载图标，可在[iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
+
+## 安装
+
+::: code-tabs
+@tab  npm
+``` sh
+npm install @vuepress-plume/plugin-iconify
+```
+
+@tab:active yarn
+``` sh
+yarn add @vuepress-plume/plugin-iconify
+```
+
+@tab pnpm
+``` sh
+pnpm add @vuepress-plume/plugin-iconify
+```
+:::
+
+## 使用
+
+```ts
+// .vuepress/config.ts
+import iconifyPlugin from '@vuepress-plume/plugin-iconify'
+module.exports = {
+  // ...
+  plugins: [
+    iconifyPlugin({
+      componentName: 'Iconify'
+    })
+  ]
+  // ...
+}
+```
+
+### Options
+
+```ts
+interface IconifyOptions {
+  /**
+   * 组件名，
+   * @default `Iconify`
+   */
+  componentName?: string
+  /**
+   * 默认图标颜色
+   * @default `currentColor`
+   */
+  color?: string
+  /**
+   * 图标大小
+   * @default '1em'
+   */
+  size?: string | number
+}
+```
+
+## Component
+
+```vue
+<template>
+  <Iconify name="material-symbols:home" color="currentColor" size="1em" />
+</template>
+```
+
+### Props
+
+```ts
+interface Props {
+  name?: string
+  size?: string | number
+  color?: string
+  mode?: 'style' | 'svg' | 'mask' | 'bg'
+  style?: StyleValue
+  flip?: string
+  vFlip?: boolean
+  hFlip?: boolean
+  inline?: boolean
+  rotate?: number
+}
+```
+
+效果： <Iconify name="material-symbols:home" color="currentColor" size="1em" />

docs/notes/plugins/netlify-functions/README.md

@@ -0,0 +1,34 @@
+---
+title: plugin-netlify-functions
+author: pengzhanbo
+createTime: 2024/03/12 13:51:09
+permalink: /plugins/plugin-netlify-functions/
+---
+
+如果你的 vuepress 站点是部署在 netlify 的，而且希望能够使用netlify functions 来做 serverless。
+
+那么你可能需要本插件提供支持。
+
+本插件仅 提供 `Netlify Functions` 开发环境和 打包构建 支持，不提供具体的 `functions` 函数。
+
+- 你可以基于此插件 在你的 vuepress 项目中 自定义 `functions`
+- 也可以基于此插件作为你的 vuepress plugin 依赖，开发自定义 `functions` 提供给其他 vuepress项目使用。
+
+## 安装
+
+::: code-tabs
+@tab npm
+``` sh
+npm install vuepress-plugin-netlify-functions
+```
+
+@tab:active yarn
+``` sh
+yarn add vuepress-plugin-netlify-functions
+```
+
+@tab pnpm
+``` sh
+pnpm add vuepress-plugin-netlify-functions
+```
+:::

docs/notes/plugins/netlify-functions/api.md

@@ -0,0 +1,82 @@
+---
+title: API
+author: pengzhanbo
+createTime: 2024/03/12 13:55:25
+permalink: /plugins/plugin-netlify-functions/api/
+---
+
+## netlifyFunctionsPlugin(options)
+
+在 vuepress 项目中使用， 或者 开发vuepress-theme时使用，提供 netlify-functions 开发时服务。
+
+该插件应该优先于其他有依赖该插件的其他插件之前调用。
+
+``` js
+netlifyFunctionsPlugin({
+  sourceDirectory: '',
+  destDirectory: '',
+  proxyPrefix: '',
+})
+```
+
+### options
+
+__类型：__ `{ sourceDirectory: string, destDirectory: string, proxyPrefix: string }`
+
+- `options.sourceDirectory`:
+
+  `functions` 开发时所在目录， 默认值： `app.dir.source('.vuepress/functions')`,
+  即，如果你的vuepress项目源码目录是 `src`， 那么 `sourceDirectory` 默认为 `src/.vuepress/functions/`
+
+- `options.destDirectory`:
+
+  `functions` 构建后输出目录，默认值： `app.dir.dest('functions')`,
+  即，如果你的 vuepress项目配置的 `dest` 输出目录为 `docs`， 那么默认输出目录为 `docs/functions`,
+  一般来说，这个配置不需要手动修改。
+
+- `options.proxyPrefix`:
+
+  在开发环境中， `Netlify Functions` 服务的默认路径是 `/.netlify/functions/*`, 但这并不能保持开发环境和
+  生产部署环境一致，所以需要将路径重写。
+
+  默认值： `/api`
+
+  即 `^/api/*` 的请求会被转发到 `/.netlify/functions/*` ，
+  如, `functions/my_function.ts` ，则请求 `/api/my_function` 将会转发到 `/.netlify/functions/my_function`。
+
+## useNetlifyFunctionsPlugin(app, options)
+
+在开发 vuepress plugin 时使用，为插件提供 `netlify functiosn` 支持
+
+``` ts
+import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
+
+function myPlugin(): Plugin {
+  return (app: App) => {
+    const {
+      // 请求前缀,  默认 /api
+      proxyPrefix,
+      preparePluginFunctions,
+      generatePluginFunctions
+    } = useNetlifyFunctionsPlugin(app, {
+      // 指定插件的functions目录，相关脚本在此目录中开发
+      directory: path.resolve(__dirname, 'functions')
+    })
+    return {
+      name: 'vuepress-plugin-myPlugin',
+      onPrepared: () => preparePluginFunctions(),
+      onGenerated: () => generatePluginFunctions(),
+    }
+  }
+}
+```
+
+### options
+
+__类型：__ `{ directory: string }`
+
+- `options.directory`
+
+  插件中的 functions 开发目录。
+
+  一般来说，它的值都设置为 `path.resolve(__dirname, 'functions')`

docs/notes/plugins/netlify-functions/functions.md

@@ -0,0 +1,96 @@
+---
+title: functions 使用指南
+author: pengzhanbo
+createTime: 2024/03/12 17:56:28
+permalink: /plugins/plugin-netlify-functions/functions/
+---
+
+## 说明
+
+### 在一个 vuepress 项目中
+
+在默认配置下，如果你 packages.json
+``` json
+{
+  "scripts": {
+    "serve": "vuepress dev src",
+    "build": "vuepress build src"
+  }
+}
+```
+即， 你的 `sourceDir` 为 `src` 目录， 那么，你的functions目录则为 `src/.vuepress/functions`。
+
+在这个目录下，直属的 `ts/js` 文件，均为一个个独立的 `function`， 不包括这个目录下的子目录。
+
+``` sh
+src/.vuepress/functions
+├─my_function.ts # 这是一个function 通过 /api/my_function 调用
+├─verify_phone.ts # 这是一个 function， 通过 /api/verify_phone 调用
+└─utils # 子目录中的不会被识别为function
+    └─index.ts
+```
+
+### 在一个 vuepress plugin 项目中
+
+以官方仓库插件的基本组织结构为例
+``` sh
+src/node
+├─functions
+│   ├─my_function.ts # 这是一个function 通过 /api/my_function 调用
+│   ├─verify_phone.ts # 这是一个 function， 通过 /api/verify_phone 调用
+│   └─utils # 子目录中的不会被识别为function
+│       └─index.ts
+├─index.ts
+└─plugin.ts # 在这个文件中配置了 directory 为 path.resolve(__dirname, 'functions')
+```
+
+## 依赖
+
+如果你是使用 typescript 作为开发语言，那么可以引入 `@netlify/functions` 模块提供类型检查支持。
+
+如果你的 function 依赖其他的第三方模块，请在配置在项目`package.json` 的 `dependencies` 字段中作为生产依赖。
+
+如果你是通过插件提供 function，请在 插件的使用指南中 说明，你的插件function依赖了哪些第三方模块，
+提醒使用者安装这些依赖。
+
+## function
+
+`functions` 通过 导出一个 `handler` 函数 提供给 云函数服务调用。
+
+一个 function 的内容一般如下：
+
+- 异步函数
+
+  在异步函数中，支持直接返回一个对象作为 响应体报文
+
+  ``` ts
+  import { Handler } from '@netlify/functions'
+  export const handler: Handler = async function (event, context) {
+    // do something
+    return {
+      statusCode: 200,
+      body: JSON.stringify({})
+    }
+  }
+  ```
+
+- 非异步函数
+
+  在非异步函数中，通过 `callback` 函数参数返回响应体报文
+
+  ``` ts
+  import { Handler } from '@netlify/functions'
+
+  export const handler: Handler = function (event, context, callback) {
+    // do something
+    callback({
+      statusCode: 200,
+      body: JSON.stringify({})
+    })
+  }
+  ```
+
+## 示例
+
+[plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-page-collection)
+页面访问次数插件

docs/notes/plugins/netlify-functions/介绍.md

@@ -0,0 +1,61 @@
+---
+title: 介绍
+author: pengzhanbo
+createTime: 2024/03/12 14:11:59
+permalink: /plugins/plugin-netlify-functions/introduction/
+---
+
+## Why
+
+### Netlify
+
+[Netlify](https://www.netlify.com/) 是一个提供了免费部署静态站点的平台，可用于作为 `github page` 的替代工具。
+
+在 `Netlify` 上面部署站点也非常方便，可以直接使用 `github` 仓库进行 构建并部署，同时支持 自定义域名。
+
+还提供了 `Netlify Functions` 等工具，可以用于给站点提供 自定义云函数。
+
+### VuePress
+
+`vuepress` 是一个很方便的静态网站构建工具，使我们可以直接书写 markdown后，构建为一个高可用的静态站点。
+
+### 部署
+
+一般情况下，当我们不希望购买一个服务器用于部署我们的站点时，通常都会选择使用 `github page` 来进行免费部署。
+`Netlify` 是一种替代方案，而且当使用 `Netlify` 部署时，还可以利用 `Netlify Functions` 提供的云函数功能，
+使站点能够进行更为丰富的交互。
+
+### 场景
+
+通过 `Functions` 连接到 一些提供了 免费服务的 云存储服务，比如 `FireBase` ，`Lean Cloud` 等。
+虽然这些云存储服务提供了 Web 客户端直连服务的功能。但毕竟我们的站点源码是直接放在 `github`开源仓库中，
+我们不希望将 这些 云存储服务 提供的一些 鉴权信息 直接 保存在 仓库代码中，带来某些安全风险。
+
+在这种场景下，就可以借助 `Netlify Functions` ，将这些鉴权信息，作为 `环境变量` ，
+托管在 `Netlify Environment Variables` 中，然后通过 站点调用 `Functions` 来获取这些鉴权信息。
+或者进一步的，直接将 云存储服务的 连接、功能等，都在 `Netlify Functions` 中完成，
+站点再调用 `Functions` 接口， 获取返回的数据。
+
+有了 `Netlify Functions` 加上 一些 第三方的 云服务支持， 可以为我们的 vuepress 站点提供更强大的支持。
+
+## 如何整合？
+
+在基于以上的背景，下一步就是需要将 `Netlify Functions` 能够在 我们的 `Vuepress` 项目中进行 整合了。
+
+- 如何使 `Netlify Functions` 能够在本地开发环境中进行调试。
+- 如何将 已开发好的 `Functions` 作为 `vuepress plugin` 提供给 其他 `vuepress theme` 或 `vuepress` 站点中使用。
+
+### 开发环境
+
+本插件在 vuepress 的开发服务的基础上， 启动了一个 由 `netlify-cli` 提供的 服务，并将该服务通过代理的方式，
+代理到 vuepress开发服务上，统合开发环境。
+
+并且监听 functions 内容变更，实现热更新。
+
+### 打包
+
+在打包阶段， 生成一个 `netlify.toml` 配置文件，配置 functions 相关内容。
+
+并且将 所有 functions 添加在 vuepress 的构建包中。
+
+如何使用插件，请查看 [使用文档](/plugins/plugin-netlify-functions/usage/)

docs/notes/plugins/netlify-functions/使用.md

@@ -0,0 +1,152 @@
+---
+title: 使用
+author: pengzhanbo
+createTime: 2024/03/12 15:53:55
+permalink: /plugins/plugin-netlify-functions/usage/
+---
+
+## 安装
+
+::: code-tabs
+@tab  npm
+``` sh
+npm install vuepress-plugin-netlify-functions
+```
+
+@tab:active yarn
+``` sh
+yarn add vuepress-plugin-netlify-functions
+```
+
+@tab pnpm
+``` sh
+pnpm add vuepress-plugin-netlify-functions
+```
+:::
+
+## 在vuepress中使用
+
+### 添加插件
+
+在vuepress 的配置文件中 引入并 在 `plugins` 字段中添加插件。
+
+::: code-tabs
+@tab .vuepress/config.{ts,js}
+``` ts
+import { defineUserConfig } from 'vuepress'
+import { netlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
+
+export default defineUserConfig({
+  // ...
+  plugins: [
+    netlifyFunctionsPlugin(),
+  ]
+  // ...
+})
+```
+:::
+
+### 编写 functions
+
+启动 vuepress 开发服务后， 就可以在你的 `.vuepress/functions/` 目录中，新建并开发你的 `function`
+
+[`functions` 开发指南](https://docs.netlify.com/functions/overview/)
+
+## 在 vuepress plugin 中使用
+
+### 添加插件钩子
+
+::: code-tabs
+@tab typescript
+``` ts
+import * as path from 'node:path'
+import { App } from '@vuepress/core'
+import { useNetlifyFunctionsPlugin } from 'vuepress-plugin-netlify-functions'
+
+function myPlugin(): Plugin {
+  return (app: App) => {
+    const {
+      // 请求前缀,  默认 /api
+      proxyPrefix,
+      preparePluginFunctions,
+      generatePluginFunctions
+    } = useNetlifyFunctionsPlugin(app, {
+      // 指定插件的functions目录，相关脚本在此目录中开发
+      directory: path.resolve(__dirname, 'functions')
+    })
+    return {
+      name: 'vuepress-plugin-myPlugin',
+      onPrepared: () => preparePluginFunctions(),
+      onGenerated: () => generatePluginFunctions(),
+    }
+  }
+}
+```
+:::
+
+在你的插件开发目录，假如是以下结构：
+``` sh
+.
+└─src # 开发目录
+   ├─shared
+   └─node # node 端
+      ├─functions # functions目录
+      │  └─my_function.ts # functions脚本
+      ├─plugin.ts
+      └─index.ts
+```
+
+那么，就在你的 `src/node/functions` 目录下进行 functions 开发
+
+[`functions` 开发指南](https://docs.netlify.com/functions/overview/)
+
+如果你已经开发好了一个 `functions/my_function.ts` 的function。
+
+那么你可以在 client端，通过以下方式调用：
+
+``` ts
+async function fetchMyFunction() {
+  const result = await fetch('/api/my_functions')
+  // do something
+}
+```
+就像调用一个普通接口一个样简单。
+
+## 环境变量
+
+你可以在项目根目录中，新建一个 `.env` 文件，用于配置开发时环境变量
+
+::: warning
+这些环境变量仅用于开发环境时使用，部署生产时不会被加载。
+
+是用于在开发环境中 代替 `Netlify Environment Variables` 。
+在生产环境中，应该使用 `Netlify Environment Variables` 设置这些环境变量。
+
+如果你的 `.env` 文件中有比较私密的信息，建议将 `.env` 文件添加到 `.gitignore` 中，避免提交到 仓库中。
+:::
+
+::: code-tabs
+@tab .env
+```
+YOUR_ENV_VAR='your env var'
+```
+
+@tab functions/my_function.ts
+``` ts
+const YOUR_ENV_VAR = process.env.YOUR_ENV_VAR
+```
+:::
+
+## 示例
+
+如何使用本插件开发一个 提供 functions 的插件，这里提供了一个 例子：
+
+[plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-page-collection)
+
+可以参考此例子进行插件开发。
+
+该例子提供了以下功能：
+
+- 连接 `lean cloud`
+- 记录页面访问次数，并上报到 `lean cloud` 数据库。
+- 查询 当前页面访问次数，并提供组件嵌入到页面中。

docs/notes/plugins/netlify-functions/功能.md

@@ -0,0 +1,20 @@
+---
+title: 功能
+author: pengzhanbo
+createTime: 2024/03/12 14:43:12
+permalink: /plugins/plugin-netlify-functions/features/
+---
+
+## 功能
+
+在启动 vuepress 开发环境后，`plugin-netlify-functions` 插件会在 vuepress 开发服务中，
+启动一个 `netlify-functions` 服务，然后，将通过 vuepress 开发服务代理该服务。
+
+同时，启动对 `functions` 的文件监听，实现服务热更新，从而获得与 vuepress 开发服务环境一致的体验。
+
+## 服务
+
+考虑到通用性，本插件仅提供对于 `netlify functions` 的开发时和构建时支持，并不提供具体的 `functions`功能支持。
+一切`functions` 功能由插件使用者自定义。
+
+同时，还提供了给其他插件使用本插件的钩子，这使得多个插件之间或者主题，能够共享 本插件提供的基础服务。

docs/notes/plugins/shiki.md

@@ -0,0 +1,101 @@
+---
+title: plugin-shikiji
+author: pengzhanbo
+createTime: 2024/03/11 17:26:31
+permalink: /plugins/plugin-shikiji/
+---
+
+## 指南
+
+使用 [`shiki`](https://shiki.style) 来为 Markdown 代码块启用代码高亮。
+
+## 安装
+
+::: code-tabs
+@tab  npm
+``` sh
+npm install @vuepress-plume/plugin-shikiji
+```
+
+@tab:active yarn
+``` sh
+yarn add @vuepress-plume/plugin-shikiji
+```
+
+@tab pnpm
+``` sh
+pnpm add @vuepress-plume/plugin-shikiji
+```
+:::
+
+## 使用
+
+```ts
+// .vuepress/config.ts
+import shikiPlugin from '@vuepress-plume/plugin-shikiji'
+module.exports = {
+  // ...
+  plugins: [
+    shikiPlugin({
+      // options ...
+    })
+  ]
+  // ...
+}
+```
+
+## Options
+
+```ts
+interface ShikiOptions {
+  /**
+   * Custom theme for syntax highlighting.
+   *
+   * You can also pass an object with `light` and `dark` themes to support dual themes.
+   *
+   * @example { theme: 'github-dark' }
+   * @example { theme: { light: 'github-light', dark: 'github-dark' } }
+   *
+   * You can use an existing theme.
+   * @see https://shiki.style/themes
+   * Or add your own theme.
+   * @see https://shiki.style/guide/load-theme
+   */
+  theme?: ThemeOptions
+  /**
+   * Languages for syntax highlighting.
+   * @see https://shiki.style/languages
+   */
+  languages?: LanguageInput[]
+  /**
+   * Custom language aliases.
+   *
+   * @example { 'my-lang': 'js' }
+   * @see https://shiki.style/guide/load-lang#custom-language-aliases
+   */
+  languageAlias?: Record<string, string>
+  /**
+   * Setup Shiki instance
+   */
+  shikiSetup?: (shikiji: Highlighter) => void | Promise<void>
+  /**
+   * Fallback language when the specified language is not available.
+   */
+  defaultHighlightLang?: string
+  /**
+   * Transformers applied to code blocks
+   * @see https://shiki.style/guide/transformers
+   */
+  codeTransformers?: ShikiTransformer[]
+  /**
+   * Enable transformerRenderWhitespace
+   * @default false
+   */
+  whitespace?: boolean
+
+  /**
+   * @experimental
+   */
+  twoslash?: boolean
+}
+```

docs/notes/theme/config/frontmatter/basic.md

@@ -90,6 +90,13 @@ permalink: /config/frontmatter/basic/
 - 博客类型的文章，主题根据时间排序，自动填充下一篇文章的标题和链接。
 - notes 类型的文章，主题根据 note sidebar 配置，自动填充下一篇文章的标题和链接。
 
+### readingTime
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 显示 阅读时长。
+
 ### lastUpdated
 
 - 类型： `boolean`

docs/notes/theme/config/notes配置.md

@@ -5,4 +5,141 @@ createTime: 2024/03/02 14:00:06
 permalink: /config/notes/
 ---
 
-Todo...
+## 概述
+
+主题默认将 `sourceDir` 目录下的 `notes` 目录作为 文档/知识笔记 的存放目录，
+该目录下的所有文件都会被排除在 博客文章之外。
+
+默认配置如下：
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    notes: { link: '/', dir: 'notes', notes: [] }, // [!code highlight]
+  })
+})
+```
+
+如果启用了 多语言配置， 你 也可以在 `locales` 字段中 分别配置 `notes`
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    locales: {
+      '/': {
+        notes: { link: '/', dir: 'notes', notes: [] }, // [!code highlight]
+      },
+      '/zh/': {
+        notes: { link: '/zh/', dir: 'notes', notes: [] }, // [!code highlight]
+      }
+    }
+  })
+})
+```
+
+## 配置
+
+```ts
+interface NotesDataOptions {
+  /**
+   * 保存所有笔记的目录
+   * @default '/notes'
+   */
+  dir: string
+  /**
+   * 所有笔记的默认链接前缀
+   * @default '/'
+   */
+  link: string
+  /**
+   * global include，只加载需要加载到笔记中的文件
+   */
+  include?: string | string[]
+  /**
+   * global exclude，排除不需要加载到笔记中的文件
+   */
+  exclude?: string | string[]
+  /**
+   * 笔记配置
+   */
+  notes: NotesItemOptions[]
+}
+
+type NotesItemOptions = (Omit<NotesItem, 'text'> & { text?: string })
+
+interface NotesItem {
+  /**
+   * 保存笔记的目录
+   */
+  dir: string
+  /**
+   * 当前笔记的链接前缀，将会与 `notes.link` 合并
+   */
+  link: string
+  /**
+   * 当前笔记名称
+   */
+  text: string
+  /**
+   * 当前笔记的侧边栏配置,
+   * 如果设置为 `auto`，则自动根据目录结构生成侧边栏，根据 `\d+.xxx[.md]` 中 `\d+` 进行排序
+   */
+  sidebar?: NotesSidebar | 'auto'
+}
+
+/**
+ * 可以将配置简写为文件名，主题会自动解析
+ */
+type NotesSidebar = (NotesSidebarItem | string)[]
+
+interface NotesSidebarItem {
+  /**
+   * 侧边栏文本，如果为空，则使用 `dir`
+   */
+  text?: string
+  /**
+   * 侧边栏链接
+   */
+  link?: string
+  /**
+   * 次级侧边栏所在目录
+   */
+  dir?: string
+  /**
+   * 是否折叠, 未定义时不可折叠
+   * @default undefined
+   */
+  collapsed?: boolean
+  /**
+   * 次级侧边栏
+   */
+  items?: NotesSidebar
+  /**
+   * 侧边栏图标
+   */
+  icon?: string
+}
+```
+
+### 自动生成侧边栏
+
+当配置某个 笔记 的 `sidebar` 为 `auto` 时，会自动根据目录结构生成侧边栏。
+
+排序根据 [文件夹命名约定](/guide/write/#文件夹命名约定) 。
+
+### 侧边栏图标
+
+主题不仅可以通过 侧边栏配置中 `icon` 配置图标，还可以通过 文件中的 frontmatter 中 `icon` 字段 配置图标。
+
+```md
+---
+title: 主题介绍
+icon: mdi:tooltip-text-outline
+---
+```

docs/notes/theme/config/导航栏配置.md

@@ -21,7 +21,7 @@ import { plumeTheme } from 'vuepress-theme-plume'
 
 export default defineUserConfig({
   theme: plumeTheme({
-    notes: [
+    navbar: [
       { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
       { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
     ]
@@ -47,13 +47,13 @@ export default defineUserConfig({
   theme: plumeTheme({
     locales: {
       '/': {
-        notes: [
+        navbar: [
           { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
           { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
         ]
       },
       '/en/': {
-        notes: [
+        navbar: [
           { text: 'Home', link: '/en/', icon: 'material-symbols:home-outline' },
           { text: 'Blog', link: '/en/blog/', icon: 'material-symbols:article-outline' },
         ]
@@ -101,7 +101,7 @@ import { plumeTheme } from 'vuepress-theme-plume'
 
 export default defineUserConfig({
   theme: plumeTheme({
-    notes: [
+    navbar: [
       { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
       { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
       {

docs/notes/theme/guide/api-node.md

@@ -1,6 +1,7 @@
 ---
 title: Node
 author: pengzhanbo
+icon: fa6-brands:node
 createTime: 2024/03/07 21:59:13
 permalink: /guide/api/node/
 ---

docs/notes/theme/guide/api-客户端.md

@@ -1,6 +1,7 @@
 ---
 title: 客户端
 author: pengzhanbo
+icon: nimbus:browser
 createTime: 2024/03/07 21:58:48
 permalink: /guide/api/client/
 ---

docs/notes/theme/guide/markdown-基础.md

@@ -1,6 +1,7 @@
 ---
 title: 基础
 author: pengzhanbo
+icon: fluent:markdown-20-filled
 createTime: 2024/03/05 11:10:39
 permalink: /guide/markdown/basic/
 ---

docs/notes/theme/guide/markdown-扩展.md

@@ -1,6 +1,7 @@
 ---
 title: 扩展
 author: pengzhanbo
+icon: fluent-mdl2:auto-enhance-on
 createTime: 2024/03/05 23:29:07
 permalink: /guide/markdown/extensions/
 ---

docs/notes/theme/guide/markdown-试验性.md

@@ -1,6 +1,7 @@
 ---
 title: 试验性
 author: pengzhanbo
+icon: material-symbols:experiment-outline
 createTime: 2024/03/06 11:46:49
 permalink: /guide/markdown/experiment/
 ---

docs/notes/theme/guide/markdown-进阶.md

@@ -1,6 +1,7 @@
 ---
 title: 高阶
 author: pengzhanbo
+icon: ic:outline-auto-fix-high
 createTime: 2024/03/05 16:27:59
 permalink: /guide/markdown/advance/
 ---

docs/notes/theme/guide/seo.md

@@ -1,6 +1,7 @@
 ---
 title: SEO
 author: pengzhanbo
+icon: tabler:seo
 createTime: 2024/03/02 14:46:25
 permalink: /guide/seo/
 ---

docs/notes/theme/guide/sitemap.md

@@ -1,6 +1,7 @@
 ---
 title: 生成 sitemap
 author: pengzhanbo
+icon: mdi:sitemap-outline
 createTime: 2024/03/02 16:47:00
 permalink: /guide/sitemap/
 ---

docs/notes/theme/guide/介绍.md

@@ -1,6 +1,7 @@
 ---
 title: 主题介绍
 author: pengzhanbo
+icon: mdi:tooltip-text-outline
 createTime: 2024/03/04 11:06:24
 permalink: /guide/intro/
 ---

docs/notes/theme/guide/代码复制.md

@@ -1,6 +1,7 @@
 ---
 title: 代码复制
 author: pengzhanbo
+icon: ph:code
 createTime: 2024/03/04 09:59:29
 permalink: /guide/features/copy-code/
 ---

docs/notes/theme/guide/内容搜索.md

@@ -1,6 +1,7 @@
 ---
 title: 内容搜索
-author: Plume Theme
+author: pengzhanbo
+icon: material-symbols:search
 createTime: 2024/03/04 09:58:39
 permalink: /guide/features/content-search/
 ---

docs/notes/theme/guide/加密.md

@@ -1,6 +1,7 @@
 ---
 title: 加密
 author: pengzhanbo
+icon: mdi:encryption-outline
 createTime: 2024/03/04 15:58:48
 permalink: /guide/features/encryption/
 ---

docs/notes/theme/guide/博客.md

@@ -1,6 +1,7 @@
 ---
 title: 博客
 author: pengzhanbo
+icon: material-symbols:article-outline
 createTime: 2024/03/04 19:16:40
 permalink: /guide/blog/
 ---

docs/notes/theme/guide/友情链接页.md

@@ -1,6 +1,7 @@
 ---
 title: 友情链接页
 author: pengzhanbo
+icon: carbon:friendship
 createTime: 2024/03/03 22:44:28
 permalink: /guide/friend-links/
 ---

docs/notes/theme/guide/国际化.md

@@ -1,6 +1,7 @@
 ---
 title: 国际化
 author: pengzhanbo
+icon: material-symbols-light:language
 createTime: 2024/03/05 10:01:26
 permalink: /guide/international/
 ---

docs/notes/theme/guide/安装与使用.md

@@ -1,6 +1,7 @@
 ---
 title: 安装/使用
-author: Plume Theme
+author: pengzhanbo
+icon: grommet-icons:install
 createTime: 2024/03/04 09:50:07
 permalink: /guide/quick-start/
 ---

docs/notes/theme/guide/知识笔记.md

@@ -1,6 +1,7 @@
 ---
 title: 文档/知识笔记
 author: pengzhanbo
+icon: teenyicons:doc-outline
 createTime: 2024/03/04 15:45:34
 permalink: /guide/document/
 ---
@@ -47,6 +48,7 @@ export default defineUserConfig({
           sidebar: [ // 配置侧边栏
             {
               text: '简介',
+              icon: 'mdi:language-typescript', // 侧边栏图标
               items: ['foo'] // 简化写法，主题会自动补全为 `foo.md`
             }
           ]
@@ -65,3 +67,5 @@ export default defineUserConfig({
 ```
 
 主题会根据配置，为对应目录中的 md 文件，生成 永久链接，以及侧边栏。
+
+完整配置查看 [notes配置](/config/notes/)

docs/notes/theme/guide/组件.md

@@ -1,6 +1,7 @@
 ---
 title: 组件
 author: pengzhanbo
+icon: radix-icons:component-2
 createTime: 2024/03/06 09:42:42
 permalink: /guide/features/component/
 ---

docs/notes/theme/guide/编写文章.md

@@ -1,6 +1,7 @@
 ---
 title: 编写文章
-author: Plume Theme
+author: pengzhanbo
+icon: mingcute:edit-4-line
 createTime: 2024/03/04 10:06:06
 permalink: /guide/write/
 ---

docs/notes/theme/guide/自定义样式.md

@@ -1,6 +1,7 @@
 ---
 title: 自定义样式
 author: pengzhanbo
+icon: icon-park-outline:theme
 createTime: 2024/03/04 20:18:52
 permalink: /guide/custom-style/
 ---

docs/notes/theme/guide/自定义首页.md

@@ -1,6 +1,7 @@
 ---
 title: 自定义首页
 author: pengzhanbo
+icon: material-symbols:home-outline
 createTime: 2024/03/02 10:44:03
 permalink: /guide/custom-home/
 ---

docs/notes/theme/guide/评论.md

@@ -1,6 +1,7 @@
 ---
 title: 评论
 author: pengzhanbo
+icon: la:comment
 createTime: 2024/03/04 11:58:59
 permalink: /guide/features/comments/
 ---