我是如何制作出传统色页面的

厚积而薄发。

---

Hexo 中创建新页面

在项目的 source 目录下，新建一个 colors 文件夹，在里面新建一个 index.md，这样就新建了一个页面，可以通过 /colors/ 访问。

在主题 layout 文件夹中新建一个模板 colors.ejs，再在 index.md 中，通过 layout: colors 指定这个模板。此时可以改变 colors.ejs 中的内容是否生效。

可以在 colors 文件夹中新建更多的 Markdown 文件，可以通过 /colors/xxx 来访问。

Hexo 标签

所谓标签，可以理解为现在前端框架中的“组件”，传入一定的参数，便能根据模板渲染出一系列类似的 DOM。在主题目录的 script 文件夹下，新建一个 js。

下面是一个简单的例子，wrap 为标签名字，args 为在标签中传入的参数，形式为数组，content 为标签中的内容

hexo.extend.tag.register('wrap', function (args, content) {
    let name = args.join(' ');
    let result = `<div class="${ name }">
                    ${ content }
                </div>`;
    return result;
}, { ends: true });

使用方法

{% wrap 参数1 参数2 %}
这是 content 的内容
{% endwrap %}

以上例子中，args 为 [参数1,参数2]，content 为 "这是 content 的内容"

假如内容是类数组结构，我们可以用正则去匹配 content 的内容，实现分组，也可以自己限定分隔符，用 split 去分割成数组。这样就可以用 js 构建任何格式的内容。

文字颜色自适应

HEX、HSL、RGB 之间的互转，网上都有现成的方案。

在页面中讲到目前一些网站存在的问题，有些颜色很浅，但没有用深色字体颜色，导致阅读非常困难。现在的问题就变成了，如何根据背景色自动切换黑白文字。这个问题有很多解决方法，最粗暴的，可以在标签中多传入一个参数，控制是否使用深色字体，在这个页面中，多数情况下用浅色字体是不会有问题的，所以可以默认为浅色，在需要的情况再传入，但还是得一个个颜色检查一遍。

其他方案，可以用 js 计算颜色灰度，也可以用 CSS 滤镜。

在这里，我选择用 js 计算，但并不是计算灰度。因为本来就要把 RGB 转变为 HSL，所以可以改变 HSL 中的亮度，大于60%，我认为这是亮色，把亮度固定在 35%，相反固定在 90%，简单高效，而且这样做还有一个好处，字体颜色不再是单色，而是亮度更高/更低的邻近色，观感会更高级。这是从《CSS 新世界》中获取到的灵感。

我一直想不到 HSL 颜色的具体应用场景，在这里就派上用场了。

悬浮效果

原本只是简单地降低不透明度，但效果不理想。于是利用上面讲到的改变亮度来获取更深的颜色，把背景设为渐变（从左到右，从深到浅），对齐方向为从右到左，水平方向适当放大，让深色往左偏移以看上去跟使用纯色背景一样为准，悬浮时取消放大，显示深色背景，再设置变换时间，动画效果就有了。

.color-card {
  transition: background-size .5s;
  background-size: 200% 100%;
  background-position: right;
}
.color-card:hover {
  background-size: 100% 100%;
}

弹窗

弹窗参考 sonner 制作，看了下源码，功能非常完善。

像这种全局通知弹窗，无非是一个 position: fixed; 且 visibility: hidden; 的容器，通过 js 把他变成可见，几秒后又变回不可见。有一个常用的居中方法，用 left: 50%; 让容器的左边与父级元素中线对齐，再配合 transform: translateX(-50%); 向左偏移自身的 50%，但这样会导致 translate 被占用，无法做动画。解决方法也很简单，外边再包一个容器，用上面的方法定位，把真正的弹窗放在这个容器里，这样就可以做动画了。

这时想起张鑫旭老师的一个方法，设置 top: 0;right: 0;margin: 0 auto; 就可以让容器水平居中，如果想让容器宽度根据文字内容自适应，还可以设置 width: fit-content;。

写在最后

“没有更好的，所以自己写了一个”
终于有这个能力去做这样的事了。