How You Might Build a Modern Day Webring

When it comes to network rings, the pictures that appear in different people's minds must be different, so let me explain my ideas first. I think there should be an element on the website:

1. Indicates that the website is part of the network ring;
2. Allows users to jump to the next or previous website in the network ring;
3. Maybe there are other features, such as jumping to a "random" website or viewing the full list.

But more importantly:

4. The website owner doesn't need to do much. They simply add (it) to the website and get a fully functional web ring user interface.

Like this:

How did it work before? To be honest, I don't know. I guess it's an ancient way, but it's beyond my memory. How should we achieve it today? I think we can use<iframe></iframe> . Websites like YouTube do this when providing "embed code" as HTML code snippets. Websites such as Twitter and CodePen will provide a<div> (or other semantic HTML) and a <script>，以便可以有备用内容，并且脚本可以将其增强为<code><iframe>。<code><iframe>可能不错，因为它对网站所有者的要求非常低，但众所周知，它的性能相当差。毕竟，它是在另一个文档内嵌套的整个文档。此外，它在自定义方面也没有提供太多选择。你只能得到现有的功能。 <p><code><iframe>的另一个问题是……它如何知道当前嵌入在哪个网站上？也许是 URL 参数？也许是来自父页面的postMessage？如果问我的话，这并不十分简洁。 <p>我认为，如果我们考虑现代化，Web 组件可能是实现此目标的方法。我们可以创建一个自定义元素，例如<code><webring-*>。让我们这样做，并专门为 CSS 网站创建它。这将使我们有机会使用属性发送当前网站，例如： <pre class="brush:php;toolbar:false"><webring-css site="http://css-tricks.com"> 这个元素一会儿就会启动到网络环中。 <p>这解决了技术选择问题。现在我们需要确定存储<strong>数据的全局位置。因为，网络环需要能够被<strong>更新。网站需要能够添加和删除到网络环中，而无需网络环中的其他网站进行任何操作。 <p>对于像这样的相当简单的数据，GitHub 上的 JSON 文件似乎是一个非常现代的选择。让我们这样做。 <p>现在每个人都可以以相当易读的方式查看网络环中的所有网站。此外，他们可以针对它提交拉取请求以添加/删除网站（随意）。 <p>从我们的 Web 组件获取该数据只需一个fetch请求： <pre class="brush:php;toolbar:false">fetch(`https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`) .then((response) => response.json()) .then((sites) => { // 获取了数据。 }); <p>当我们的 Web 组件挂载时，我们将启动它。让我们搭建一下…… <pre class="brush:php;toolbar:false">const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`; const template = document.createElement("template"); template.innerHTML = ` /* styles */ <div > <!-- content --> </script> </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) => { // 使用数据更新模板 }); } } window.customElements.define("webring-css", WebRing); <p>其余部分并没有那么有趣，我觉得我们不需要一步一步地讲解。我将为您简单地概述一下：</p> <ol> <li>获取 Web 组件的属性，以便我们可以查看当前网站是什么；</li> <li>在数据中匹配当前网站；</li> <li>从模板中的数据构建“下一个”、“上一个”和“随机”链接；</li> <li>更新模板中的 HTML。</li> </ol> <p>瞧！</p> <p><details><summary> 你可以做更多的事情，例如错误处理、更好的设计和更好的所有方面吗？</summary>是的。</details></p>

The above is the detailed content of How You Might Build a Modern Day Webring. For more information, please follow other related articles on the PHP Chinese website!