Wie Sie einen modernen Webring bauen könnten

Wenn es um Netzwerkringe geht, müssen die Bilder, die in den Köpfen verschiedener Menschen erscheinen, anders sein. Lassen Sie mich also zuerst meine Ideen erklären. Ich denke, es sollte ein Element auf der Website geben:

1. Zeigt an, dass die Website Teil des Netzwerkrings ist.
2. Ermöglicht Benutzern, auf die nächste oder vorherige Website im Netzwerkring zu springen.
3. Vielleicht gibt es andere Funktionen, wie zum Beispiel zu einer "zufälligen" Website oder das Anzeigen der vollständigen Liste.

Aber was noch wichtiger ist:

4. Der Website -Eigentümer muss nicht viel tun. Sie fügen einfach (es) zur Website hinzu und erhalten eine voll funktionsfähige Webring -Benutzeroberfläche.

So was:

Wie hat es schon einmal funktioniert? Um ehrlich zu sein, weiß ich nicht. Ich denke, es ist ein alter Weg, aber es ist jenseits meiner Erinnerung. Wie sollen wir es heute erreichen? Ich denke, wir können verwenden<iframe></iframe> . Websites wie YouTube tun dies, wenn Sie "Einbettungscode" als HTML -Code -Snippets bereitstellen. Websites wie Twitter und CodePen bieten eine<div> (oder andere semantische HTML) und 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>

Das obige ist der detaillierte Inhalt vonWie Sie einen modernen Webring bauen könnten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!