Astro-blog记录(1)-初步实现的需求
Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名，与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站，那么 Astro 就是你的选择。
在最开始用Astro的时候我其实没有考虑到为自己做一些功能. 只自己修改了一些样式和实现了一些和主题自带组件类似的功能.
本篇用于记录实现所需功能的关键点.
组件
群岛
Astro 开创并推广了一种叫做 群岛 的前端架构。群岛架构通过帮助你避免单体 JavaScript 模式并自动从页面中剥离所有非必需的 JavaScript，从而实现了更好的前端性能。开发者在使用 Astro 的同时，仍然可以继续使用他们最喜欢的 UI 组件和框架，并且从中得到受益。
岛屿始终独立于页面上的其他岛屿运行，且一个页面上可以存在多个岛屿。尽管岛屿在不同的组件上下文中运行，它们仍然可以共享状态并相互通信。
例如我的博客主页index.astro的<body>部分由两个模块组成:
<Pin /><h3> {t("home.recent")}</h3><LatestBlogPosts />其中的<Pin />和<LatestBlogPosts />就是两个岛屿.
getStaticPaths()
export async function getStaticPaths() { return ["zh", "en"].map((lang) => { //lang return { params: { lang } }; });}上面的代码实现了双语言生成. Astro 是静态站点生成器。这意味着整个网站是预构建的。如果 Astro 不知道在构建时生成什么页面，你的用户在访问你的网站时就看不到它。因此你需要getStaticPaths()函数来告诉Astro你的此页面位于什么路径. 需要注意的是如果你编写的是组件, 那么这个函数是不需要包含的.
官方文档链接: https://docs.astro.build/zh-cn/reference/api-reference/#getstaticpaths
Some Extension
Google My Maps
看到很多朋友的主页都有在记录自己的足迹, 我也打算添加, 但发现来自大陆境内的访问无法正常加载Google. 会让about页面有很大一部分空白. 用js监听下用户加载.
双评论(Twikoo/Giscus)
灵感来源于竹子(虽然相比于Twikoo我觉得Giscus更稳一点)
Pagefind
Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.
最开始时我就搞定了Pagefind的功能, 并没有打算实现tags功能. 后来觉得blog数量多了后, 需要为读者的扩展阅读提供一些便利,才实现了tags.
为了适配blog的风格我把pagefind样式全部重写了. 搜索的效果和自带的分词还是很给力的. 当然Pagefind在你build的时候会根据页面的lang属性来自动进行i18n. 这对于多语言还是很有帮助的.
双Rss
我创建了zh.xml.js和en.xml.js两个rss源.(嘶…似乎透明背景的代码图片更好看)
分别过滤来自blog/zh和blog/en路径下的文章.
猪脑版本的简单友链管理页
// 根据语言选择友情链接数组const selectedFriendLinks = lang === 'zh' ? friendLinksZh : friendLinksEn;我在页面内创建了两个数组来存储中文和英文版本的友链. 这样后期的维护会更方便一些.
Opengraph
Open Graph通讯协定(Protocol)本身是一种制定一套Metatags的规格，用来标注你的页面，告诉我们你的网页代表哪一类型的现实世界物件。
这样在一些IM软件和一些支持og协议的网页中发布你的博客链接, 它们就会获取到你网页的信息.
