Astro添加功能

记录一下 Astro 功能添加。

添加MDX支持

安装

自动添加

pnpm astro add mdx

手动添加

pnpm install @astrojs/mdx

需要修改astro.config.mjs:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  // ...
  integrations: [mdx()],
});

编辑器集成

修改.vscode/settings.json:

{
  "files.associations": {
    "*.mdx": "markdown"
  }
}

添加Sitemap支持

安装

自动添加

pnpm astro add sitemap

手动添加

pnpm install @astrojs/sitemap

需要修改astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  // ...
  integrations: [sitemap()],
});

添加RSS支持

安装

pnpm install @astrojs/rss

使用

在src/pages/中创建一个文件，其中包含你选择的名称和扩展名.xml.js，以用作Feed的输出 URL。一些常见的 RSS 源 URL 名称是feed.xml或rss.xml。

以rss.xml.js为例(此处sanitizeHtml和markdown-it需要额外安装:pnpm install sanitize-html markdown-it)：

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import sanitizeHtml from 'sanitize-html';
import MarkdownIt from 'markdown-it';
const parser = new MarkdownIt();

export async function GET(context) {
  const blog = await getCollection('blog');
  return rss({
    title: 'Buzz’s Blog',
    description: 'A humble Astronaut’s guide to the stars',
    site: context.site,
    items: blog.map((post) => ({
      link: `/blog/${post.slug}/`,
      // 注意：这不会处理 MDX 文件中的组件或 JSX 表达式。
      content: sanitizeHtml(parser.render(post.body)),
      ...post.data,
    })),
  });
}

需要修改

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        external: ["sanitize-html","markdown-it"]
      }
    }
  },
});

添加Mathjax支持

安装

pnpm install remark-parse remark-math rehype-mathjax rehype-stringify

使用

需要修改astro.config.mjs:

import { defineConfig } from 'astro/config';
import remarkParse from 'remark-parse';
import remarkMath from 'remark-math';
import rehypeMathjax from 'rehype-mathjax';
import rehypeStringify from 'rehype-stringify';

// https://astro.build/config
export default defineConfig({
  markdown: {
    remarkPlugins: [
      remarkParse,
      remarkMath],
    rehypePlugins: [rehypeMathjax, rehypeStringify]
  },
});

然后就可以正常使用mathjax了（注意行间公式的$$应该都令取一行）。

如：

$\alpha_{1}+\alpha_{2}=\alpha{3}$

$$
F=\frac{Gm_{1}m_{2}}{r^{2}}
$$