我个人网站上的小细节

前几天我更新了我的 个人网站。这是一个很有趣的项目，因为它是我唯一完全独立完成的项目之一。它是我的个人游乐场，除了让网站代表我并带来一些乐趣之外，没有其他目标。它不是完全重写，只是换了一些新的颜色。

我想在这里记录一些细节，以便深入了解一些技巧，并本着学习与分享的精神进行。

Hoefler 字体

我认为 Inkwell 字体系列非常酷。我喜欢不仅混合匹配字重，还混合匹配衬线和无衬线以及大写和小写。

我在之前的网站设计中也使用了 Inkwell，但我担心它对于博客文章正文来说有点过于俏皮。我的写作风格非常随意，但也不总是如此，而 Inkwell 对于严肃的话题来说则过于欢快。上次我使用了 Ideal Sans 作为正文字体，但与 Inkwell 的搭配感觉有点不协调。

这次我选择了 Whitney 作为常规正文字体，它仍然相当轻松活泼，但在正文内容更正规时也能很好地配合。

博客列表

如果你要为表格添加斑马线效果，你会这样做……

tr:nth-child(even) {
  background-color: var(--color-1);
}
tr:nth-child(odd) {
  background-color: var(--color-2);
}

如果你想轮换四种颜色呢？这仍然是 :nth-child 的技巧，选择每四个，然后进行偏移。这里，我将使用 Sass 中的列表项来实现（嵌套效果很好，无需重复选择器）

li {
  &:nth-child(4n) a {
    color: $blue;
  }
  &:nth-child(4n + 1) a {
    color: $yellow;
  }
  &:nth-child(4n + 2) a {
    color: $red;
  }
  &:nth-child(4n + 3) a {
    color: $purple;
  }
}

这就是我构建彩色博客列表的方式。

注意上面使用的 Sass 代码……我使用 Sass 是因为它已经在项目中使用了。我所要做的就是打开 CodeKit，处理过程就可以开始了。

哦，还有，博客列表又流行起来了。

轻松加载 YouTube 视频

我使用了这个 点击加载 YouTube 视频（完全加载） 的技巧，它仍然非常巧妙。使用一个 <iframe> 元素，它的行为就像一个 YouTube 嵌入一样，但只加载一个简单的静态图像（而不是大量资源），这对于提升性能非常有效，并且与正常的 YouTube 嵌入行为基本相同。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>

到处使用自定义文章类型

我非常喜欢为自己提供结构化的数据来处理。在 WordPress 世界中，这通常意味着使用自定义文章类型，并结合 Advanced Custom Fields 插件之类的工具来获取工作所需的数据。

然后我可以循环遍历这些数据并以我想要的方式输出它们。这并不复杂，但它为我将来想要实现的功能打开了更多便利的大门。

创建你自己的个人简介

它的工作原理并不复杂。

我创建了 18 个 <div> 元素（3 种长度 * 2 种样式 * 3 种代码类型 = 18），并使用一些 JavaScript 代码在它们之间切换。这段 JavaScript 代码会根据当前的选择计算一个类字符串，选择该类，并显示它，同时隐藏其他元素。

$(".bio-choices input").on("change", function () {
  var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
  var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
  var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
  var selector = lengthClass + styleClass + codeClass;

  $(".bio").hide();
  $(selector).show();
});

jQuery！它已经存在于网站上了，网站也使用 jQuery 版本的 FitVids 来实现响应式视频——所以我想就这样保持不变。

如果我要重写网站的这些部分，我可能会移除 jQuery 并 使用这个 来实现 FitVids。然后我会想办法只保留三个个人简介（如果我找不到好的方法来处理第一人称和第三人称之间的词语替换，可能会保留六个），然后通过某种方式自动转换其余的格式（如果必须的话，可能会使用一些云函数）。

ztext.js

我为标题使用了 ztext！对我来说，这类东西让网络感觉更加网络化。我不确定我是否会在 CSS-Tricks 这样的网站上使用太多运动效果（因为人们更频繁地访问它，并且网站停留时间更长）。但是对于那些人们可能偶尔访问一次的网站来说，我认为它具有恰到好处的轻松愉悦感。

背景 SVG

我很高兴看到 SVG Backgrounds 网站最近进行了升级。我在那里玩了一会儿，然后就意识到 没错，我要用它！

我使用了 background-attachment: fixed 效果，我认为它还不错。我还为桌面版添加了 滑出式页脚效果，但我不太确定它是否在这里起作用。当背景发生变化时，它会更有趣，而这里并没有发生。我可能会更改页脚的背景颜色，或者移除该效果。

链接的滤镜技巧

网站上的一些不同部分使用了不同的主要高亮颜色，并且我让这些部分中的链接遵循该颜色。这可能是有问题的（也许所有链接都应该为蓝色），但到目前为止，我认为它还是说得通的（它们仍然具有悬停和焦点样式）。但是，当交互式元素具有多种颜色和样式时，通常意味着您需要为悬停和焦点创建特殊的备用样式。这可能意味着为每种颜色创建定制的颜色更改。这并不是世界末日，但我真的很喜欢 这个小技巧，它可以为所有颜色创建一致的交互式样式。

a:focus, .button:focus,
a:hover, .button:hover {
  filter: brightness(120%);
}

---

总之！这只是在这个网站上花了几个小时进行的修改。主要是因为博客列表是那周 CodePen 挑战 的主题。但我永远无法触碰一个我很久没碰过的网站，只做一件事情。我会被吸引进去，然后不得不做更多的事情！