如何基于 VitePress 打造自己的 NFT 会员卡阅读平台

用开源平台 VitePress 搞个 “Web3 的写作即赚” 工具。

0x01. 这个想法的起源

实际上几个月前就有思考过开发这个功能，只是作为资深的拖延症爱好者，一直就没有落地去做。

在看到 ETH-Global 的 FEVM 黑客松举办的比赛后，此时只剩几天时间开发，于是神经紧张了起来，全身注意力高度集中的 2 天开始了！

很喜欢这样的状态，在限定的时间内，专注于最核心的功能实现，唯一的目标就是为了展示整个功能的核心流程，不会去做任何多余的动作，因为时间非常紧迫！

这个想法主要从这几个方面考虑：

• • VitePress 是业界知名的开源静态站点生成器

• • 6.4k starts, 1.1k Fork

• • 由 Vue 作者 Yuxi (Evan) You 创立，业界比较知名，支持者较多

• • 开源，且基于 Vue3/Vite

• • 被很多的技术平台作为文档系统使用

• • 极大的自由度定制开发，可以被开发为各类不同功能的系统

如果能和 NFT 及 IPFS 集合，让用户可以方便的使用并产生 Web3 的博客或知识平台，那么在其有强大的社区支持的同时，又能给予用户极大自由度去定制，同时还兼具 Web3 的 NFT 逻辑和提供给创作者 Web3 Native 方式的收入渠道模式，那么可能会很有价值。

所以核心就是打造出这几个功能：

• • 方便用户基于其创作的内容，产生可以被读者 Mint 的 NFT

• • 读者在 Mint NFT 之前只能看到部分创作内容，拥有 NFT 后则可以看到完整内容，这样就创造了一个创作者的 Web3 Native 的收费渠道

0x02. 具体技术实现逻辑及使用方式

由于黑客松截止时间有限，比赛期间仅实现了部分功能。

当前功能及技术方案介绍

• • 创作者可以通过运行命令来对某个创作的文章进行处理，把文章发布到 IPFS 平台

• • 写了个 generateCID.js 的脚本，创作者写完文章后，放在指定的目录下，运行此命令会自动读取内容并调用 NFT.Storage 的 SDK 来发布文章内容到 IPFS 上

• • 创作者可以把 IPFS 的 CID 放到文章的 frontmatter 字段内，这样在网页上会出现 Mint NFT 按钮，其读者可以通过 Mint NFT 来支持创作者

• • 通过脚本而生成的文章的 IPFS CID 放到文章的 frontmatter 上，这样 VitePress 运行后，开发的主题的代码模块会读取这些参数

• • 用户点击 Mint NFT 按钮后，则会读取这些参数，组合后提交到区块链上来 Mint NFT

使用步骤

1. 1. 创作者写博客文章

2. 2. 运行命令 node generateCID.js

3. 3. 黏贴步骤 2 产生的 CID 到文章对应的 frontmatter 字段内

4. 4. 创作者可以先点击 create token 按钮，这篇文章则会在我们预先部署的 ERC1155 合约上创建了新的 NFT Token ID，把获得的 TokenID 黏贴到 frontmatter 内

5. 5. 读者此时则可以看到 Mint NFT 按钮，组合前面获得的内容 CID 及 tokenId，读者就可以成功的 Mint NFT 并付费来支持创作者

背后的技术细节原理

1. 1. 首先我们给 VitePress 创建了一个自定义的 Layout, 此 Layout 是扩展默认的主题的，具体说明文档参考：Layout Slots[1]

.vitepress/theme/Layout.vue

<script setup>
import DefaultTheme from 'vitepress/theme'
import Web3 from './components/Web3.vue'
const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #aside-outline-after>
      <ClientOnly>
        <Web3 />
      </ClientOnly>
    </template>
  </Layout>
</template>

1. 1. 可以看到我们前面的自定义 Layout 里面引入了 Web3 组件，这个组件是整个逻辑的核心，他是我们实现所有和 web3 相关的功能的精髓所在

这个组件内主要完成了这些事情：

未连接 Web3 时，显示连接钱包按钮; 已经连接钱包，则会显示 Create Blog 和 Mint NFT 按钮

<div v-if="connectedChain">
  <button type="button" class="mb-2 btn-primary" @click="showCreateTokenDialog = true">Create Blog</button>
  <button type="button" class="btn-primary" @click="doMintNFT">Mint NFT</button>
</div>
<button type="button" class="btn-primary" @click="doConnect" v-else>Connect Wallet</button>

用户点击 Create Blog 按钮，会显示创建博客的弹窗，用户输入必要的信息后提交，即可对区块链发起创建新的 NFT Token 的请求，此操作相当于新的创作者咱们得 ERC1155 合约内创建了一个他自己的创作空间，后续他的读者对其的支持行为都是通过 Mint 他这个 NFT 来做到的。

具体完整代码可以看这里： Web3.vue[2]

1. 1. 创作者在创作完成后，通过运行 node generateCID.js 来自动生成其创作内容的 IPFS CID, 完整代码查看 generateCID.js[3]

const name = data.title || contents[0].replace(/\s{2,}/g, '').trim()
const description = data.description || contents
            .slice(1)
            .join('')
            .replace(/\s{2,}/g, '')
            .trim()

          
const image = await client.storeBlob(new Blob([fs.readFileSync(`./docs/blog/${data.image}`)]))
const contentCID = await client.storeBlob(new Blob([fs.readFileSync(`./docs/blog/${blog}`)]))
const metadata = {
  name,
  description,
  image,
  properties: {
    contentCID,
  }
}

const metadataCID = await client.storeBlob(new Blob([JSON.stringify(metadata, null, 2)], {
  type: "application/json",
}))

这里的代码目前还是比较粗糙且不够优雅的，后续进一步开发时会进一步优化。

0x03. 下一步规划

黑客松期间时间紧迫，还得研究 VitePress 的代码及 API，导致只能写了很粗糙的功能，并且还没有实现 NFT Gating 的功能，后续进一步思考，要把这个 Web3VitePress 作为一个 比较认真对待的项目进行长期维护推进。

功能规划

• • 平台统一设定一个 ERC1155 的合约，每个博主可以到平台上来 CreateBlog，即获得一个他专属的 NFT 博客，后续他的创作都会和这个 NFT 相关连

• • 引入 LitProtocol，作者可以针对每篇文章设定不同的解锁要求，对于 FEVM，则需要推进 LitProtocol 官方支持 FEVM 链的支持（目前还不支持 FEVM）

• • 引入 TailWindCSS 支持

• • 开发 3 个不同的 Landing Page（使用基于 Tailwind 的 MIT 协议的模板）

• • 开发不同的组件来改进整体平台的用户体验

未来发展规划、畅想

• • Web3VitePress 本身作为一个 Web3 的 SaaS 平台来开发

• • 创作者可以自由设定其每篇文章解锁需要的 NFT 数量，这样创作者获得了一个可以自由设定的 Web3 的会员订阅系统（读者可以按等级需求自由支付）

• • 开发更多的适应不同行业需求的 landing page 以及功能相关模板，以推广更多用户使用（比如音乐、照片、视频等不同的创作载体）

• • 开发 SaaS 功能，这样没有技术背景的用户可以在平台的 SaaS 界面上可以直接用来创作

• • 推出开发者模板市场及插件市场，吸引更多开发者参与平台的开发

• • 以 DAO 的模式进一步推广推进整体平台的市场参与用户（开发者、使用者、读者）

总结

NFT 非常值得关注。其将作为下一代的会员卡核心逻辑在各行各业发展应用。NFT 会是 Web3 的保罗万象的应用不可或缺的一环。

这篇文章主要基于 VitePress 和 NFT 来打造了一套你可以自己自由控制的开源的创作平台。

你可以基于此脑洞大开，打造自己的任何生意。比如界面做成自己小生意的官网，用户通过 mint NFT 来获得你的生意的会员资格。

当然最简单直接的就是你写文章，转发到你的朋友圈，你的读者直接到你的主页来 mint NFT 获得文章阅读权限的同时，也在支持你的创作。

同时也可以作为你未来“发迹”之后，回馈给你的早期支持者的链上凭据！

---

全文完

往期文章推荐

• • 介绍下Web3赏金黑客们必备的开箱即用 Web3 元宇宙 NFT 开发必备脚手架

• • 元宇宙赏金黑客传奇》的相关计划

• • 为什么说加入元宇宙赏金黑客组织 Web3HackerDAO 能改变世界？

• • Web3 赏金黑客 11月-12月可以关注的几个黑客松比赛 ，总共奖金超过100万刀！

• • 脑洞大开之从中医是先人个人努力打造的大数据系统累积的结果联想到的 Web3 对世界的作用

• • 一个解决方案来让你的 NFT 拥有无限可能 当前 1244 阅读，￥2000 赞赏

• • 开源一个连续拿了 3 个 Web3 黑客松奖项目 当前 953 阅读，￥300 赞赏

• • Gumroad 发展史来看 Web3 的精益创业

• • 一起做个 Web3 精益创业的实验： Web3Space 平台种子用户招募中！

• • SBT.Dating，全球首个零知识证明的约会 DApp

引用链接

[1] Layout Slots: vitepress.vuejs.org/guide/theme… [2] Web3.vue: github.com/Web3VitePre… [3] generateCID.js: github.com/Web3VitePre…