SSG blog

SSG blog 的一些事

标签

都用 SSG 了，那，一般情况下，都想要尽可能多的将渲染这个操作放在服务端，就是那种，除非不放客户端不行，不然就算一点 js ，都要给它展开了做成静态的。
astro 的群岛，也是为了，搞动态可以灵活控制范围。

对于标签这个功能，一种实现方式是，使用 url/路由 作为 记录/触发 页面改变的一个东西，大约是在服务端把每个标签下的文章都生成一个页面，点击标签就通过 href 跳转到那个页面。
这样搞对于只允许查一个标签下内容的情况，也许挺好的，但如果想要允许选择多个标签，再给个 any，every 的模式切换… 这种时候把所有情况都遍历出来，页面可能就多的有些过分了…。 n 为标签数，所有的情况都遍历出来，要弄 n! 个页面才行，反正基本是指数级的增长了… 而且如果还靠 url/路由 这种 trick 去做的话，对着这个字符串增删改查的情景也是想想就很美妙。

但我还是想要个能选多个标签的，甚至还想加点交并补这种操作，这时候，应该还是允许客户端加载加载 js 渲页面才是更合理的操作。
需要的是文章静态页面的 url 和 tags 这样一个… meta 数据，SSG 一般也有办法定义一个函数将所有文章的这些数据变成静态文件放在站点下。然后在客户端的页面去获取这个数据，再根据数据和用户操作去把符合条件的文章找出来贴上去。

不过，这部分也还是不叫标签，叫搜索好了。

抖动

… SSG 一个一个页面都是独立的文件，MPA， 那怎么做到切换的时候看起来很丝滑而不是一闪一闪呢? 也有可能是我太杂鱼了才做不到…

https://docs.astro.build/en/guides/view-transitions/

https://developer.chrome.com/docs/web-platform/view-transitions/

https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API

… 原来有这种东西，那要做的可能就是，尽量让每个页面的 dom 和布局都类似吧… 但.. 我加了还是有些问题喵，主题切换和页面滚的监听有问题，先放着

似乎确实还是有人嫌这个兼容性不好效果不好，用 swup 来做切换动画的。

excerpt 与 description

vuepress 会根据某些规则自动截取文章前部内容，生成简介，这里会有两种东西，一种是放出来展示的，希望带有样式；一种是纯文本的，希望放到 head 里供索搜索引擎或其他网站检索时使用。

toc, header

我还啥都不会写的时候就很喜欢很多网站的这些地方的一些小交互。

header 简单些，在 post 页面下，向下滚动超过一定阈值显示标题，向上一定距离再让导航回来。

toc 是，内容的标题找出来放到旁边，做一个小导航。 我写了两套监听，一个是内容区域在就是 visible 标出来，然后是根据滚动距离，再挑一个 active 高亮，然后把旁边的小游标也放在一边。 还有就是，toc 容器有溢出时，加一个滚动联动。