在Cloudflare Workers里使用markdown-it渲染markdown，并插入HTML中

2024-01-03T12:43:42.3281387Z

因为对Cloudflare Workers感兴趣，因此想尝试一下在Workers中渲染Markdown，看看是否对SEO有所帮助。

使用Wrangler

wrangler是本地开发Cloudflare workers的工具

# 安装wrangler
npm install -g wrangler

# 登录wrangler，在打开的网页中点击授权。
wrangler login

# 创建目录并从已有Worker获取代码
wrangler init --from-dash 你的Worker名

在Cloudflare Workers文档中有详细的说明。

本地运行Cloudflare Workers

本地运行Workers只需以下命令

npm run dev

会启动一个开发服务器，体验和在线编辑类似。

如果要修改Workers环境变量，请修改 wrangler.toml的[var] 条目。如果要覆盖变量，可以创建 .dev.vars文件，并写上想要修改的变量

举例说明

wrangler.toml

[vars]
name = "your-worker"
route = "example.com"

更多示例请看Cloudflare Workers文档

使用markdown-it

安装markdown-it包，就像安装其他npm包一样。

npm install markdown-it

在需要使用的文件里加上

import MarkdownIt from "markdown-it";

将Markdown渲染为html代码

const md = new MarkdownIt();
const result = md.render(string)

替换SPA的html

首先打开浏览器，打开开发人员工具。然后在网页任意位置右键点击，选择查看页面源代码。

观察到代码如下所示

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="/@vite/client"></script>

    <title>MakkaPakka Page</title>
<!-- meta, link etc...-->
    
  </head>
  <body>
    <div id="q-app"></div><script type="module" src="/.quasar/client-entry.js?t=187075245369"></script>
  </body>
</html>

我需要替换标头，并在body中插入渲染好的html。

因此编写了两个正则表达式。

const r1 = /<title>[\s\S]*<\/title>/
const r2 = /<body>/

替换我们的网页。

let html=source.replace(r1,`<title>${art.title} - MakkaPakka Page</title>`);
html=html.replace(r2,`
<body>
<div id="prerendertext">
<h1>${art.title}</h1>
<time>${art.createTime}</time>
<div>
${result}
</div></div>`);
return html;

结论

至于这个方法是否有助于SEO有待观察。网页加载好之后需要使用JS将先前插入的html移除，否则可能导致一些问题。这种方法也可以用来为禁用Javascript的浏览器提供可读网页。