如何构建现代 Webring

我相信不同的人在想到 Webring 时会有不同的画面，所以让我澄清一下我想到的是什么。 我看到网站上有一个元素

1. 表示该网站是 Webring 的一部分
2. 允许您移动到 Webring 的下一个或上一个网站
3. 可能还有其他功能，比如转到“随机”网站或查看完整列表

但另一件重要的事情是

4. 网站所有者不必做太多。 他们只需将它放到网站上，一个功能性的 Webring UI 就出现了。

就像这样

它以前是怎么工作的？ 你知道吗？ 我不知道。 我猜想它是一个古老的 <frameset><frame /></frameset> 情况，但这些东西在我之前就存在了。 我们今天该如何做呢？

好吧，我们可以使用 <iframe>，我想。 这就是像 YouTube 这样的网站在提供“嵌入代码”作为 HTML 代码段时所做的。 像 Twitter 和 CodePen 这样的网站会提供一个 <div>（或任何语义 HTML）和一个 <script>，这样就可以有回退内容，并且脚本将其增强为一个 <iframe>。 <iframe> 可能还不错，因为它对网站所有者的要求非常低，但众所周知它们对性能非常不利。 毕竟它是一个在另一个文档中的完整文档。 此外，它们在自定义方面也没有提供太多选择。 你得到什么就得到什么。

iframe 的另一个问题是……它怎么知道自己目前嵌入在哪个网站上？ 可能是 URL 参数？ 可能是来自父页面的 postMessage？ 如果你问我，这并不太干净。

我认为网络组件可能是这里要走的路，只要我们考虑现代化。 我们可以创建一个自定义元素，比如 <webring-*>。 让我们这样做，并专门针对 CSS 网站。 这将使我们有机会使用属性发送当前网站，就像这样

<webring-css site="https://css-tricks.cn">
  This is gonna boot itself up into webring in a minute.
</webring-css>

这解决了技术选择问题。 现在我们需要弄清楚存储数据的全局位置。 因为，好吧，Webring 需要能够被更新。 网站需要能够被添加到 Webring 中或从 Webring 中删除，而无需 Webring 上的其他网站做任何操作。

对于像这样的相当简单的，GitHub 上的 JSON 文件似乎是一个完美的现代选择。 让我们这样做。

现在每个人都可以以一种相当易读的方式查看 Webring 中的所有网站。 此外，他们可以提交 Pull Requests 来添加/删除网站（请随意操作）。

从我们的网络组件获取这些数据需要一个 fetch 请求

fetch(`https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`)
  .then((response) => response.json())
  .then((sites) => {
     // Got the data.
  });

我们将在我们的网络组件安装时发送它。 让我们构建一个框架……

const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`;

const template = document.createElement("template");
template.innerHTML = `
<style>
  /* styles */
</style>

<div class="webring">
  <!-- content -->
</div>`;

class WebRing extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    fetch(DATA_FOR_WEBRING)
      .then((response) => response.json())
      .then((sites) => {
        // update template with data
      });
  }
}

window.customElements.define("webring-css", WebRing);

剩下的部分并不那么有趣，以至于我觉得我们需要一步一步地讲解。 我只会为你博客概述一下

1. 从网络组件中提取属性，以便我们可以看到当前网站是什么
2. 在数据中匹配当前网站
3. 从模板中的数据构建“下一个”、“上一个”和“随机”链接
4. 更新模板中的 HTML

瞧！

你能用它做更多的事情吗，比如错误处理、更好的设计以及更好的所有东西？

是的。