Astro添加功能

记录一下 Astro 功能添加。

添加MDX支持

安装

自动添加

Terminal window
pnpm astro add mdx

手动添加

Terminal window
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支持

安装

自动添加

Terminal window
pnpm astro add sitemap

手动添加

Terminal window
pnpm install @astrojs/sitemap

需要修改astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
integrations: [sitemap()],
});

添加RSS支持

安装

Terminal window
pnpm install @astrojs/rss

使用

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

rss.xml.js为例(此处sanitizeHtmlmarkdown-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支持

安装

Terminal window
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}}
$$

分类: