SSG blog
SSG blog 的一些事
标签
都用 SSG 了,那,一般情况下,都想要尽可能多的将渲染这个操作放在服务端,就是那种,除非不放客户端不行,不然就算一点 js ,都要给它展开了做成静态的。
astro 的群岛,也是为了,搞动态可以灵活控制范围。
对于标签这个功能,一种实现方式是,使用 url/路由 作为 记录/触发 页面改变的一个东西,大约是在服务端把每个标签下的文章都生成一个页面,点击标签就通过 href 跳转到那个页面。
这样搞对于只允许查一个标签下内容的情况,也许挺好的,但如果想要允许选择多个标签,再给个 any,every 的模式切换… 这种时候把所有情况都遍历出来,页面可能就多的有些过分了…。 n 为标签数,所有的情况都遍历出来,要弄 n! 个页面才行,反正基本是指数级的增长了… 而且如果还靠 url/路由 这种 trick 去做的话,对着这个字符串增删改查的情景也是想想就很美妙。
但我还是想要个能选多个标签的,甚至还想加点交并补这种操作,这时候,应该还是允许客户端加载加载 js 渲页面才是更合理的操作。
需要的是文章静态页面的 url 和 tags 这样一个… meta 数据,SSG 一般也有办法定义一个函数将所有文章的这些数据变成静态文件放在站点下。然后在客户端的页面去获取这个数据,再根据数据和用户操作去把符合条件的文章找出来贴上去。
不过,这部分也还是不叫标签,叫搜索好了。
抖动
… SSG 一个一个页面都是独立的文件,MPA, 那怎么做到切换的时候看起来很丝滑而不是一闪一闪呢?
也有可能是我太杂鱼了才做不到…

View transitions | Docs
Enable seamless navigation between pages in Astro with view transitions.
https://developer.chrome.com/docs/web-platform/view-transitions/

View Transition API - Web APIs | MDN
The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
… 原来有这种东西,那要做的可能就是,尽量让每个页面的 dom 和布局都类似吧… 但.. 我加了还是有些问题喵,主题切换和页面滚的监听有问题,先放着
似乎确实还是有人嫌这个兼容性不好效果不好,用 swup 来做切换动画的。
2026-01-04: 加了一下,一个,列表到文章内容,标题的动画。
2026-01-22: 似乎会影响 contentload 事件… 有些脚本加载事件要改改补补, astro:page-load
md enhance
excerpt 与 description
vuepress 会根据某些规则自动截取文章前部内容,生成简介,这里会有两种东西,一种是放出来展示的,希望带有样式;一种是纯文本的,希望放到 head 里供索搜索引擎或其他网站检索时使用。
看了好多别的文档工具… 感觉功能好像也都差不多。
container, syntax
markdown 语法拓展,一些自定义的容器,卡片一类的
不过我想做的是那个, spoiler。
link-card
还有,关于链接自动生成卡片。 https://www.npmjs.com/package/link-preview-js
expressive-code
可能,也没什么,这是别人写好的插件,装了就好了。
toc, header
我还啥都不会写的时候就很喜欢很多网站的这些地方的一些小交互。
header 简单些,在 post 页面下,向下滚动超过一定阈值显示标题,向上一定距离再让导航回来。
toc 是,内容的标题找出来放到旁边,做一个小导航。
我写了两套监听,一个是内容区域在就是 visible 标出来,然后是根据滚动距离,再挑一个 active 高亮,然后把旁边的小游标也放在一边。
还有就是,toc 容器有溢出时,加一个滚动联动。
还有滚动条的优化 overlayscrollbars
我这里用就只是原生的有些不好看(但,提一下,一些虚拟列表为了让滚动没有白屏,也会自己写一套滚动、溢出的逻辑,或者说写滚动条。
a, button, input, links…
可能也还包括一些博客都会有的各种基础的元素搭起来的组件,像 header,footer,list,list-item… 这里需要注意的可能是,怎么去做一种看起来比较统一的风格。 可我几乎是看到喜欢的有趣的就搬过来x,目前好多都是蛮混乱的状态。
还有我既想要简洁又想要丰盈可爱… 我都在想什么…
light/dark
关于亮暗模式… 其实我想的不是亮暗,而是想每个主题,都找一套颜色,也许也可以有多个主题色搭配的。 但…就网页的设计和使用习惯而言,亮暗模式加主题色选择似乎成熟完善的多。
SEO and so on
一个链接即使在搜索引擎之外的一些软件里,可能也是会被尝试解析然后生成预览卡片的,这里的信息,好多就来自 head。
而,许多网站在搜索引擎里没有一条一条单独的而是作为一个集合一样的结果展示,这里是,结构化数据 application/ld+json。
相关的还有 robot 文件,sitemap
然后 html 各种标签的合理使用,到页面结构和内容本身的组织,链接等等,也都会影响… 嗯,影响的也不止是 SEO 了。
fuwari
其实这个 blog 主题许多都是从 fuwari 那边看到的
而翻 issue 时也看到 fuwari 里的许多我喜欢的功能也是社区 pr 加进去x
只不过作者好久没动静了x ,我也想试试自己做一个,再写点别的。