workers-og 项目使用教程

workers-og 项目使用教程

workers-ogAn `og:image` (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge. This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by `@vercel/og`. 项目地址:https://gitcode.com/gh_mirrors/wo/workers-og

1. 项目的目录结构及介绍

workers-og/
├── README.md
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── .gitignore
└── src/
    └── index.ts

• README.md: 项目说明文档，包含项目的基本介绍和使用方法。
• LICENSE: 项目许可证，本项目采用 MIT 许可证。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: 锁定依赖版本的文件。
• pnpm-workspace.yaml: 工作区配置文件。
• .gitignore: Git 忽略文件配置。
• src/index.ts: 项目的入口文件。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.ts，该文件是整个项目的入口点。以下是 src/index.ts 的基本内容：

import { ImageResponse } from "workers-og";

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const params = new URLSearchParams(new URL(request.url).search);
    const title = params.get("title") || "Lorem ipsum";
    const html = `
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; font-family: sans-serif; background: #160f29">
        <div style="display: flex; width: 100vw; padding: 40px; color: white">
          <h1 style="font-size: 60px; font-weight: 600; margin: 0; font-family: 'Bitter'; font-weight: 500">${title}</h1>
        </div>
      </div>
    `;
    return new ImageResponse(html, { width: 1200, height: 630 });
  }
};

该文件定义了一个 fetch 方法，用于处理 HTTP 请求并生成 og:image。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 pnpm-lock.yaml。

package.json

package.json 文件包含了项目的基本信息和依赖配置：

{
  "name": "workers-og",
  "version": "1.0.0",
  "description": "An `og:image` (social card) generator that is fast browser-less (no Puppeteer) and capable of running on the edge",
  "main": "src/index.ts",
  "scripts": {
    "start": "wrangler dev",
    "build": "wrangler build"
  },
  "dependencies": {
    "workers-og": "^1.0.0"
  },
  "devDependencies": {
    "typescript": "^4.5.2",
    "wrangler": "^1.19.3"
  },
  "license": "MIT"
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目入口文件。
• scripts: 项目脚本，包括启动和构建命令。
• dependencies: 项目依赖。
• devDependencies: 开发依赖。
• license: 项目许可证。

pnpm-lock.yaml

pnpm-lock.yaml 文件用于锁定项目依赖的版本，确保在不同环境中安装的依赖版本一致。

以上是 workers-og 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助。

workers-ogAn `og:image` (social card) generator that is fast, browser-less (no Puppeteer), and capable of running on the edge. This package is designed to be used with Cloudflare Workers (but may be used elsewhere), with the simple API inspired by `@vercel/og`. 项目地址:https://gitcode.com/gh_mirrors/wo/workers-og