Markdown

我们可以将 vite-plugin-ssr 与任何 Vite/Rollup markdown 插件一起使用

Vue

对于 Vue，我们可以使用 vite-plugin-md

Example:

React

对于 React 和 MDX v1，我们可以使用 vite-plugin-mdx.

对于 MDX v2 我们可以使用 @mdx-js/rollup.

Example:

<head> (pageContext.exports)

要设置 markdown 页面的 <head> 标签，我们可以使用 Custom Export

// some.page.md

export const documentProps = {
  title: 'A Markdown Page',
  description: 'Example of setting `<title>` and `<meta name="description">`'
}

# Markdown

This page is written in _Markdown_.
// _default.page.server.js

import { escapeInject } from "vite-plugin-ssr";

export async function render(pageContext) {
  // `pageContext.exports` 包含页面`.page.js` 的所有导出
  const { title, description } = pageContext.exports.documentProps;
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`;
}

Examples:

<head> (frontmatter)

一些 markdown 处理器还支持所谓的 frontmatter 来定义页面的 meta 数据

---
title: A Markdown Page
description: Example of setting `<title>` and `<meta name="description">`
---

# Markdown

This page is written in _Markdown_.

确保你使用的 Vite markdown 插件支持 frontmatter

Markdown 处理器通常将 frontmatter 数据 export 导出， 我们可以访问 pageContext.exports

// _default.page.server.js

import { escapeInject } from "vite-plugin-ssr";

export async function render(pageContext) {
  // 阅读你的 Vite markdown 插件或其底层 markdown 处理器的文档，
  // 找到保存 frontmatter 数据的导出名称。
  const frontmatterExportName = "nameOfTheFrontmatterExport";
  const frontmatter = pageContext.exports[frontmatterExportName];
  const { title, description } = frontmatter;
  return escapeInject`<html>
    <head>
      <title>${title}</title>
      <meta name="description" content="${description}">
    </head>
    <!-- ... -->
  </html>`;
}