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 来做切换动画的。

md enhance

excerpt 与 description

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

container, syntax

markdown 语法拓展，一些自定义的容器，卡片一类的
不过我想做的是那个， spoiler。

toc, header

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

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

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

a, button, input, links…

可能也还包括一些博客都会有的各种基础的元素搭起来的组件，像 header，footer，list，list-item… 这里需要注意的可能是，怎么去做一种看起来比较统一的风格。 可我几乎是看到喜欢的有趣的就搬过来x，目前好多都是蛮混乱的状态。

还有我既想要简洁又想要丰盈可爱… 我都在想什么…

light/dark

关于亮暗模式… 其实我想的不是亮暗，而是想每个主题，都找一套颜色，也许也可以有多个主题色搭配的。 但…就网页的设计和使用习惯而言，亮暗模式加主题色选择似乎成熟完善的多。