vuepress-theme-plume/plugins/plugin-page-collection

@vuepress-plume/plugin-page-collection

这是一个使用了 netlify functions + leancloud 的 VuePress2 插件示例。

• 功能： 进入页面时，记录访问次数，并提供一个 组件展示页面访问次数。

Why ？

• 为什么是在 netlify functions 中 连接 leancloud ，而不是直接在 web客户端中请求 leancloud ?

  这是出于数据安全的角度考虑，避免直接在浏览器可见的代码中暴露私密的鉴权信息。

使用方式

(仅示例，本插件未发布到 npm)

• 在 vuepress 配置插件

  export default defineUserConfig({
    plugins: [
      pageCollectionPlugin()
    ]
  })
  

• 在需要做页面记录的路由级组件中引入<PageCollection>组件

  <Page>
    <PageCollection />
  </Page>
  

• 在项目根目录 新建 .env 文件

  开发时使用，发布到生产时，需要在 netlify 中配置 环境变量。 同时，需要将 .env 文件添加到 .ignore中，避免暴露

  LEAN_CLOUD_APP_ID='your leancloud appId'
  LEAN_CLOUD_APP_KEY='your leancloud appKey'
  LEAN_CLOUD_MASTER_KEY='your leancloud masterKey'
  

效果：

阅读数：99

结构

.
├── database # leancloud-storage
│   └── Page.json # Object Page 在 leancloud控制台中导入即可使用
├── src # 源码
│   ├── client
│   │   ├── clientAppEnhance.ts # 注入全局组件
│   │   ├── components
|   |   |   └── PageCollection.ts # 组件
│   │   └── composables
|   |       ├── index.ts
|   |       └── usePageCollection.ts # 请求 functions
│   ├── node
│   │   ├── functions # netlify functions 文件夹
|   |   |   └── page_collection.ts # 连接 leancloud 获取 page数据
│   │   ├── index.ts
│   │   └── plugin.ts # 插件配置
│   └── shared
│       └── index.ts
└── package.json

主要代码说明

请查看源码注释