現代のウェブリングをどのように構築するか

ネットワークリングに関しては、異なる人々の心に表示される写真は異なるに違いないので、最初に私のアイデアを説明しましょう。ウェブサイトには要素があるべきだと思います。

1. ウェブサイトがネットワークリングの一部であることを示します。
2. ユーザーは、ネットワークリング内の次または以前のWebサイトにジャンプできます。
3. 「ランダムな」ウェブサイトにジャンプしたり、リスト全体を表示するなど、他の機能があるかもしれません。

しかし、もっと重要なこと：

4. ウェブサイトの所有者は多くのことをする必要はありません。彼らは単にウェブサイトに（それ）を追加し、完全に機能するWebリングユーザーインターフェイスを取得します。

このような：

以前はどのように機能していましたか？正直に言うと、私は知りません。私はそれが古代の方法だと思いますが、それは私の記憶を超えています。今日どのように達成すべきですか？使用できると思います<iframe></iframe>。 YouTubeのようなWebサイトは、HTMLコードスニペットとして「埋め込まれたコード」を提供するときにこれを行います。 TwitterやCodepenなどのWebサイトはaを提供します<div>（または他のセマンティックHTML）および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>

以上が現代のウェブリングをどのように構築するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。