使用 Astro、MDX 和 Vercel 创建博客平台

业界资讯 2023-06-24 21:49:24 阅读次数: 0

TLDR

源代码可以在这里找到网站可以在这里
找到

为什么？

自从我开始写博客，我就想在我的个人网站thomasledoux.be上做这件事。
由于在 Remix 和 Next.js（我之前在我的网站上使用的 2 个框架）中设置 Markdown/MDX 支持似乎相当困难，所以我选择在 dev.to 上写我的博客。
这在一段时间内非常有效，但现在我想更好地控制我的博客的布局、分析并获得 MDX 支持。所以我开始建立自己的博客平台，并选择与Astro
一起做！

如何？

设置 Astro

设置 Astro 非常简单。
您只需npm create astro@latest在终端中运行，按照步骤操作，几秒钟内即可启动并运行您的项目。
一旦您的 Astro 项目设置完毕，我们接下来要做的就是添加 MDX 支持。您可以通过 Astro 中的集成
添加 MDX 支持。 这就像在终端中运行一样简单。
npx astro add mdx

创建 MDX 博客

一旦安装了 MDX 集成，您就可以开始在您的应用程序中使用 MDX 组件和页面。您可以通过在文件夹中
添加一个文件夹来开始。 然后在此文件夹中创建文件，例如. 在 MDX 文件的顶部，您可以添加属性。 您可以设置一个，这将使您的博客内容在给定的. 在属性中，您还可以添加自定义属性，例如, , , ... 这看起来像：/blog/src/pages
.mdxbest-features-nextjs-conf-2021.mdx
frontmatter
layoutlayout
frontmattertitledatetags
 

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>---
title: "'The 3 best features announced at Next.js Conf 2021';"
layout: '../../layouts/BlogLayout.astro';
tags: ['nextjs', 'javascript'];
date: '2021-06-15T15:14:39.004Z';
---
</code></span></span>

Astro.glob()当您将 MDX 组件/页面导入另一个组件/页面时，或者当您用于从文件系统读取 MDX 文件时，这些属性将可用。
您可以使用这个博客概览页面来显示博客的标题、创建日期和标签。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)">---</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">posts</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">Astro</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">glob</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./*.mdx</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">/* output: 
[
  {
    title: 'The 3 best features announced at Next.js Conf 2021',
    layout: '../../layouts/BlogLayout.astro',
    tags: ['nextjs', 'javascript'],
    date: '2021-06-15T15:14:39.004Z'
  }
]
*/</span>
<span style="color:var(--syntax-error-color)">---</span>

<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">section</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-string-color)">{</span>
    <span style="color:var(--syntax-name-color)">posts</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">article</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span> - <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">class</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex gap-x-4"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">tags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">tag</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">span</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">tag</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">span</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)">))</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">article</span><span style="color:var(--syntax-text-color)">></span>
    <span style="color:var(--syntax-text-color)">))</span>
  <span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">section</span><span style="color:var(--syntax-text-color)">></span>
</code></span></span>

增加博客文章的阅读时间

Astro 让您可以轻松地将Remark或Rehype插件添加到您的 markdown 中。
您可以扩展markdown向 Astro 配置文件添加一个属性，向该属性添加一个函数/插件remarkPlugins（extendDefaultPlugins添加该属性以确保默认插件不会被此配置更改覆盖）：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">remarkReadingTime</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">./src/utils/calculate-reading-time.mjs</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">defineConfig</span><span style="color:var(--syntax-text-color)">({</span>
  <span style="color:var(--syntax-name-color)">integrations</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">mdx</span><span style="color:var(--syntax-text-color)">()],</span>
  <span style="color:var(--syntax-name-color)">markdown</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">remarkPlugins</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">remarkReadingTime</span><span style="color:var(--syntax-text-color)">],</span>
    <span style="color:var(--syntax-name-color)">extendDefaultPlugins</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>

该./src/utils/calculate-reading-time.mjs文件将如下所示：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">getReadingTime</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">reading-time</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">toString</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">mdast-util-to-string</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">remarkReadingTime</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">tree</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">textOnPage</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">toString</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">tree</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">readingTime</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">getReadingTime</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">textOnPage</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-comment-color)">// readingTime.text will give us minutes read as a friendly string,</span>
    <span style="color:var(--syntax-comment-color)">// i.e. "3 min read"</span>
    <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">astro</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">minutesRead</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">readingTime</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">text</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

所以你会使用 2 个外部库reading-time来mdast-util-to-string完成这项工作。不要忘记npm install这些！
将此添加到 Astro 配置中，使此数据在frontmatter所有 MDX 文件中可用。
您现在可以在我们之前的博客概述中开始使用它：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">section</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-string-color)">{</span>
    <span style="color:var(--syntax-name-color)">posts</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">article</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span> - <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">date</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">class</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex gap-x-4"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">tags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">tag</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">span</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">tag</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">span</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)">))</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">minutesRead</span><span style="color:var(--syntax-string-color)">}</span>ing time<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">article</span><span style="color:var(--syntax-text-color)">></span>
    <span style="color:var(--syntax-text-color)">))</span>
  <span style="color:var(--syntax-string-color)">}</span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">section</span><span style="color:var(--syntax-text-color)">></span>
</code></span></span>

设置 SEO（元标记，og:image）

因为我们正在定义要在我们的 MDX 页面上使用的 a layout，所以我们可以开始在 中使用frontmatterMDX 页面的属性，layout因为它们是在Astro.props对象中传递的。
然后可以使用这些frontmatter属性添加类似 a<title>和 og:image<meta>标签的内容：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)">---</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">frontmatter</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Astro</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-error-color)">---</span>

<span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">head</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">title</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">title</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">meta</span> <span style="color:var(--syntax-name-color)">content</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">property</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"og:title"</span> <span style="color:var(--syntax-text-color)">/></span>
  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">meta</span> <span style="color:var(--syntax-name-color)">content</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">property</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"twitter:title"</span> <span style="color:var(--syntax-text-color)">/></span>
  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">meta</span> <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"twitter:card"</span> <span style="color:var(--syntax-name-color)">content</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"summary_large_image"</span> <span style="color:var(--syntax-text-color)">/></span>
  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">meta</span>
    <span style="color:var(--syntax-name-color)">content</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-string-color)">`https://website-thomas.vercel.app/api/og?title=</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">frontmatter</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-string-color)">}</span>
    <span style="color:var(--syntax-name-color)">property</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"og:image"</span>
  <span style="color:var(--syntax-text-color)">/></span>
<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">head</span><span style="color:var(--syntax-text-color)">></span>
</code></span></span>

请注意，在示例中我使用的是不同域的 API 路由，这是因为我使用的包是根据我的博客文章的标题@vercel/og生成的。您可以在此处og:image阅读文档。 我还根据 Vercel 提供的示例向背景添加了一些闪光。 生成的代码如下所示（在我的Next.js 站点上的 Next.js API 路由中创建）： 我正在使用字体，所以如果你也想使用它，请确保下载字体文件并包含他们在你的项目中。

og:image
Inter

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">ImageResponse</span><span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@vercel/og</span><span style="color:var(--syntax-string-color)">'</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">config</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">runtime</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">experimental-edge</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">font</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">fetch</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">../../assets/Inter.ttf</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">)).</span><span style="color:var(--syntax-name-color)">then</span><span style="color:var(--syntax-text-color)">(</span>
  <span style="color:var(--syntax-name-color)">res</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">res</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">arrayBuffer</span><span style="color:var(--syntax-text-color)">(),</span>
<span style="color:var(--syntax-text-color)">)</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">handler</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">fontData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-text-color)">;</span>

  <span style="color:var(--syntax-declaration-color)">try</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">URL</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">req</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">url</span><span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">hasTitle</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">has</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">title</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">hasTitle</span>
      <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">searchParams</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-declaration-color)">get</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">title</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)?.</span><span style="color:var(--syntax-name-color)">slice</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">100</span><span style="color:var(--syntax-text-color)">)</span>
      <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">My default title</span><span style="color:var(--syntax-string-color)">'</span>

    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ImageResponse</span><span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-text-color)">(</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span>
          <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">white</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">justifyContent</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">fontFamily</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">backgroundImage</span><span style="color:var(--syntax-text-color)">:</span>
              <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">backgroundSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">100px 100px</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span>
            <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span>
              <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">80%</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
              <span style="color:var(--syntax-name-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">flex</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
              <span style="color:var(--syntax-name-color)">flexDirection</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">column</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
              <span style="color:var(--syntax-name-color)">textAlign</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
              <span style="color:var(--syntax-name-color)">alignItems</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">center</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">32</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>Thomas Ledoux<span style="color:var(--syntax-text-color)">&apos;</span>s blog<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">fontSize</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">64</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)">),</span>
      <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1200</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">height</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">600</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">fonts</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span>
          <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Inter</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">fontData</span><span style="color:var(--syntax-text-color)">,</span>
            <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">normal</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-text-color)">},</span>
        <span style="color:var(--syntax-text-color)">],</span>
      <span style="color:var(--syntax-text-color)">},</span>
    <span style="color:var(--syntax-text-color)">)</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">catch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Response</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Failed to generate the image`</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">status</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">500</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">})</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

就是这样，我的博客现在托管在我自己的网站上！去https://www.thomasledoux.be/blog
看看吧。 在下一篇博客文章中，我将更深入地探讨我是如何在博客上添加一个评论系统的，以及如何使用 Prisma 和 Planetscale 对数据库进行分析。

猜你喜欢

转载自blog.csdn.net/jascl/article/details/131304279
MDX
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022