使用Edge函数添加Mastodon Toots-DEV365 开发者社区

您创建了一个很棒的静态网站。部署时正在构建您的HTML页面，也许您甚至使用像Astro这样的框架，从您的页面中剥离了尽可能多的JavaScript。现在，您已经成为从某个鸟类网站到Mastodon的巨大迁移，您很想在网站上展示您的最新个人象牙。让我们使用边缘功能来实现这一目标。

边缘功能是在请求时转换静态页面内容的好方法。它增加了您可以更改静态页面而无需重建静态页面的好处。

设置NetLify CLI

对于本教程，我将使用Netlify和Netlify Edge Functions。让我们首先通过打开终端并运行来安装Netlify CLI：

npm install netlify-cli -g

创建您的HTML页面

为您的项目创建一个简单的文件夹，并创建一个名为index.html的新文件。您的文件夹现在应该看起来像这样：

.
└── index.html

在该index.html页面上添加一些简单的html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Edge Function Mastodon example</title>
  </head>
  <body>
    <header><h1>My Mastodon feed</h1></header>
    <main><div>TOOT_CONTAINER</div></main>
  </body>
</html>

创建您的边缘功能

在您的项目文件夹中，创建一个名为netlify的文件夹，该文件夹在该文件夹中，创建一个称为edge-functions的文件夹。在该文件夹中，创建一个名为toots.ts的文件。我们将在此示例中使用Typescript。您也可以创建一个普通的JavaScript文件。
在文件夹的根部，您还可以创建一个名为netlify.toml的文件。您的项目文件夹现在应该看起来像这样：

.
├── index.html
├── netlify
│   └── edge-functions
│       └── toots.ts
└── netlify.toml

要开始定义您的边缘函数，我们将为netlify.toml文件添加一些配置：

[[edge_functions]]
  path = "/"
  function = "toots"

使用path = "/"，我们定义了边缘函数将要运行的路线，在这种情况下为您的网站的根。因此，在为index.html服务之前。 function = "toots"配置定义了它在该路径上应使用的边缘功能。

让我们在toots.ts文件中添加一些代码：

import { Context } from 'https://edge.netlify.com';

export default async (request: Request, context: Context) => {
  const response = await context.next();
  const page = await response.text();

  console.log('Hello World!');

  return new Response(page, response);
};

koude11返回index.html的响应。然后，我们只需返回该响应的文本（页），然后响应本身传递给new Response(page, response)。

使用`netlify dev`为您的项目服务

现在让我们通过键入：
在终端中运行您的项目

netlify dev

CLI工具可能会问您一些问题，在这种情况下，回答是可以的。 CLI现在在您的浏览器中打开http://localhost:8888。它应该显示您在上一步中创建的页面！我们应该看到一个标题和文本TOOT_CONTAINER。

此页面上唯一重要的HTML部分是其中的<div>元素，其中包含TOOT_CONTAINER文本。
我们还没有在页面上更改任何内容，这就是为什么我们只是在index.html中看到任何内容。

但是，如果我们查看运行服务器的终端，我们应该能够看到正在登录到控制台的Hello World!。

获取你的乳齿棒

设置边缘函数，以便从mastodon实例中获取所有符号。首先，find out what your mastodon account id is。然后，使用获取来检索数据：

import { Context } from 'https://edge.netlify.com';

export default async (request: Request, context: Context) => {
  const response = await context.next();
  const page = await response.text();

  const statuses = await fetch(
    'https://YOUR_INSTANCE.io/api/v1/accounts/YOUR_ID/statuses'
  );
  const toots = await statuses.json();

  return new Response(page, response);
};

确保将YOUR_INSTANCE替换为您的帐户的Mastodon服务器的名称。并将YOUR_ID替换为您在上一步中找到的ID。

我们尚未使用数据做任何事情，但是您始终可以console.log(toots)查看对象的样子。

现在，让我们转换数据，以便我们可以在页面上显示！我们将从Toot中获取内容，然后加入整个Toots。这样，Toots的列表成为一个字符串。
此后，我们创建了一个称为transformedPage的const，该量子conde25 content，并用我们的toots列表代替TOOT_CONTAINER。

import { Context } from 'https://edge.netlify.com';

export default async (request: Request, context: Context) => {
  const response = await context.next();
  const page = await response.text();

  const statuses = await fetch(
    'https://YOUR_INSTANCE.io/api/v1/accounts/YOUR_ID/statuses'
  );
  const toots = await statuses.json();

  const formattedTootsList = toots
    .map((toot: { content: string }) => toot.content)
    .join('');

  const transformedPage = page.replace('TOOT_CONTAINER', formattedTootsList);

  return new Response(transformedPage, response);
};

在浏览器中查看您的项目。现在，它应该向您显示您的Toots列表。如果您想知道我们正在使用的端点上还有其他可用的内容，则可以始终使用check out the documentation for api/v1/accounts/:id/statusses。

如果您想使用NetLify实时将网站直播，请确保您有一个帐户的signed up。此后，您可以运行netlify deploy，CLI将帮助您完成部署网站的步骤。玩得开心！

设置NetLify CLI

创建您的HTML页面

创建您的边缘功能

使用netlify dev为您的项目服务

获取你的乳齿棒

使用`netlify dev`为您的项目服务