参考:How To Render LaTeX In Markdown With Astro.js
创建Vercel项目
应该用Github Pages配置也可以,Vercel分配的vercel.app会被墙。但是可能需要自己配置一下workflow文件。这里我们图省事,选择用Vercel。 Vercel 里 Add New 一个 Project,我们既可以Fork我们喜欢的主题后 Import Git Repository,也可以直接用仓库的地址 Import Third-Party Git Repository →。
我们这里演示用的主题是 Astro-Ink,如果你愿意用其他的主题也可以,我比较喜欢这个主题因为他很简约。
你可以访问作者的示例Demo,也欢迎访问我的博客 浅尝辄止。
大约需要34s来部署。
自定义域名
如果你愿意,你可以配置自定义域名。Vercel的项目里,点击Setting,转到Domains,然后绑定你的域名。你需要在你的DNS服务提供商那里同时配置好CNAME。
博客自定义
配置 Latex/Katex 数学公式支持
先安装依赖。我们可以在codespaces里操作,也可以git clone本地后安装依赖。我们的安装操作他会自行修改这个项目的一些配置文件,在Vercel他将自行按照这个配置安装。
npm install remark-math
npm install rehype-katex
接着修改astro.config.mjs
。我们需要告诉 Astro,我们想在构建时使用这两个包来渲染 Markdown。同时,我们应该修改site,因为它用来生成sitemap和规范URL。sitemap不一定开启了,比如这个主题,请参考@astrojs/sitemap进行修改。
这里是 How To Render LaTeX In Markdown With Astro.js 写的一个范例,我们需要自定义修改一下。
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default defineConfig({
site: 'https://blog.alexafazio.dev',
integrations: [mdx(), sitemap()],
markdown: {
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
}
});
方便大家复制。
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'css-variables',
},
rehypePlugins: [rehypeKatex],
remarkPlugins: [
remarkCodeTitles, remarkMath
]
},
因为我们只有在博客的内容里面才会用到数学公式,所以只需要修改对应的页面的Astro文件就好了。
我们先根据直觉定位,在pages里面寻找,发现了src/pages/blog/[slug].astro
,根据命名猜测这是用来控制blog的slug的,查看内容。可以看到,指向了src/layouts/post.astro
对post.astro
进行修改,具体操作如下所示。我们可以看见BaseHead在多个文件里都有作为Head的内容使用,所以我们不应该直接修改BaseHead。而是对post.astro
的<head>
进行自定义修改。
cdn.jsdelivr.net有时候速度较慢,导致阅读体验不好,可以换成fastly.jsdelivr.net。
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/katex@0.15.1/dist/katex.css" integrity="sha384-WsHMgfkABRyG494OmuiNmkAOk8nhO1qE+Y6wns6v+EoNoTNxrWxYpl5ZYWFOLPCM" crossorigin="anonymous">
我们再搜索一下,确认我们的猜测是否正确。
可以看见post.astro
确实是只用来控制单个文章的,可以放心的修改,引入这个确实会增加一些开销,但是我们不用担心他会拖累其他页面的加载速度。
自定义内容
语言
如果你需要,修改这个。
个人信息
请根据自己的信息修改public/admin/config.yml
。需要修改的地方作者都有注释提示。
建议批量查找替换,确保没有遗漏。
还有/src/config.ts
。
对于主页,你应该修改/src/pages/_astro-ink.md
。
对于个人简介,你应该修改/src/pages/about.mdx
。
引用块
如果你觉得引用块的字体太大了,请修改这里。
最后个人定制化结果: