欢迎浏览,评论: https://blog.stark-x.cn
我的个人博客,基于 AstroPaper做了一些修改。
原主题基于 Astro 3.X,我的修改版本已经把 Astro 更新到 4.X,并做了对应的适配。
新增若干特性,持续更新中。
Markdown 文件内的 gist.github.com/Stark-X/3dab3058e1c38d53821ba621ccd461ed
会被转换为<script src="https://gist.github.com/Stark-X/3dab3058e1c38d53821ba621ccd461ed.js"></script>
并渲染。注意,https://
必须去掉,才能正常转换,目前发现是因为 markdown 里的超链接会被自动转换成<a>
标签,导致最终的渲染冲突,目前还没修复的头绪。
利用了 Vercel 提供的kv存储实现,参考「使用 Vercel Storage 给Astro站点添加浏览量统计功能」实现,在原基础上增加了一段代码检查是否为本地开发,如果是,则直接返回999,避免本地开发时报错。
注意
- 开启本功能,需要在运行环境提供环境变量
KV_REST_API_URL
以及KV_REST_API_TOKEN
,并使用 serverless 模式或者 hybrid 模式部署服务。 - hybrid 模式下,setPv.ts 里的
export const prerender = false;
不能去掉,否则会因为服务器渲染而变成一直是统计 404 页面的浏览量。
参照官网介绍通过自定义 remark 插件实现。
文章的预计阅读时长会展现在文章的日期旁边。
参考 SAFe Aglist 的认证证书的网页内嵌样式,模仿出来的组件,参考about.mdx的使用方法,打开关于我(about)页面查看效果。
环境变量GTAG_ID
有值时,就会开启 GTag 统计。
配置文件src/config.ts
里提供以下设置时,在文章详情内会开启 WalineJS 的评论框。
export const COMPONENTS_CFG = {
walineServer: "<commentServerUrl>",
};
- type-safe markdown
- super fast performance
- accessible (Keyboard/VoiceOver)
- responsive (mobile ~ desktops)
- SEO-friendly
- light & dark mode
- fuzzy search
- draft posts & pagination
- sitemap & rss feed
- followed best practices
- highly customizable
- dynamic OG image generation for blog posts #15 (Blog Post)
Note: I've tested screen-reader accessibility of AstroPaper using VoiceOver on Mac and TalkBack on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well.
Licensed under the MIT License, Copyright © 2023