首頁 > web前端 > js教程 > 提到曼聯...去

提到曼聯...去

Linda Hamilton
發布: 2024-10-04 20:23:30
原創
863 人瀏覽過

寫部落格意味著將自己的觀點公開展示,當然你希望得到回應,否則你寧願把自己的想法寫在一個小筆記本上,然後藏在床頭櫃裡。因此,部落格文章始終只是與人類同胞、讀者和網路使用者對話的前半部分。另一半由反應組成,或者更好的是,由互動組成。來自其他部落客的點讚、評論或鏈接,他們在自己的博文中採納了該觀點,以便進一步傳播或討論。一個故事從這兩半誕生。

部落格似乎又變得流行起來。經過多年被大型「意見集團」圍困後,許多人意識到這種簡單性是有代價的,因為意見本身甚至個人從來都不是興趣的焦點。封閉網路中心的內容被貨幣化或用於操縱他人。如今,部落格也是對自由、獨立以及從大型社交媒體平台中解放出來的渴望的表達。

但是,這種自由也意味著您必須有相當多的技術理解,並且連結內容並不像在大平台上那麼容易,您只需要能夠使用鍵盤即可。像 Wordpress 這樣的博客平台在這一點上當然是有幫助的,但最終你只有一個博客,你可以在其中以帖子的形式寫下並發布你的想法,但不能自動成為對話。透過部落格進行真正對話的最重要的組成部分是超鏈接,它是萬維網的核心元素。與 2000 年代部落格的早期相比,如今有多種方式可以透過連結進行交流,從而進行互動,而不僅僅是簡單地評論部落格文章。

互動

範例:Alice 在她的部落格上寫了一篇文章...

  1. Bob 閱讀了該文章並在他的部落格中寫下了該主題,並透過其 URL 提到了 Alice 的帖子。
  2. Alice 在 Mastodon 等社群網路平台上發布了她貼文的 URL,包括標題。克里斯閱讀了這篇文章並按讚
  3. 丹尼爾同時回覆並轉發Mastodon貼文
  4. Alice 在 DEV 等開發者平台上聯合發布了完整的帖子,包括原始帖子的 URL,而 Eric 對此帖子發表了評論

以上所有互動均源自 Alice 的博客,但它們發生在她的系統​​之外,並且未反映在原始帖子中。鮑伯肯定會覺得艾瑞克的評論或丹尼爾的回應很有趣,但他並不知道這些,就像愛麗絲不知道鮑伯在他的部落格上提到的那樣。原始貼文中缺少來自網路的所有互動的清單。

完成這一切的技術已經存在。它們只需要付諸實行:

1: Bob 在帖子頁面上向 Alice 連結的端點發送一個 webmention(例如 webmention.io),Alice 在那裡檢索它
在 2 和 3 上: Alice 之前已設定 Brid.gy 來將 Mastodon 互動傳遞到 Webmention 端點
4 日: Alice 透過專用 API 檢索 DEV 評論

來自社群網路(又稱 Fediverse)的互動今天已經可以在各種部落格文章中看到。它們通常直接從 Mastodon 的 API 拉到頁面上。然而,這通常會忽略一個重要的方面:在原始帖子上鏈接自我執行的聚合,以便讓讀者有機會一鍵登陸互動選項!

但是 Alice 如何在不熟悉對應 API 的情況下獲得頁面上的互動呢?

她只是使用 Mentions United 專案的客戶端腳本...

動力

三年前,我不僅在這個博客上介紹了網絡提及並在這裡和這裡寫了它們,而且我還開始系統地記錄我在其他平台上的手動聯合並將它們顯示在帖子下。
我在 Mastodon 上發布文字帖子,如果內容合適,也會在 DEV 上發布文字帖子,在 Pixelfed、Flickr 和其他一些(不幸的是)封閉平台上發布照片。我結合 Aaron Parecki 的 webmention.io 和 Ryan Barrett 的 brid.gy 收集了 Mastodon 和 Flickr 的所有 Webmention 和交互,並使用客戶端 JavaScript 將它們帶到帖子頁面。

但始終缺少來自其他平台的互動。原則上,brid.gy 可以從社交網路上最大的照片平台 Pixelfed 收集點讚和評論,但該平台四年來已知的一些錯誤阻止了這一點。

現在,我不是最有耐心的人,而且Pixelfed問題反覆詢問也沒有任何回應,反正也只能解決我一個問題,我心想:那我就只需自己構建一些能夠從所有可能的API中獲取互動並將其插入到我的帖子頁面中的東西即可。

項目“提及聯合”

如 Robb Knight 談到他的 EchoFeed 時所說:

命名事物很難,別打擾我。

解決方案的功能和結構更容易定義。一方面,它是一個純客戶端 JavaScript 應用程式,在頁面上的瀏覽器中運行,以確保資料始終是最新的,並且不考慮撤回的互動。另一方面,插件系統應該只執行需要的腳本。

因此,該專案由一個僅 7 KB 的主腳本和兩種類型的插件腳本組成:

  • 提供者外掛程式用於擷取與人相關的互動資料並將其放入通用表單

  • 渲染器外掛程式將收集的資料轉換為 HTML 並將其插入頁面

主腳本(mentions-united.js)實作了以下相關方法:

  • register(plugin) - 註冊插件腳本以供執行
  • load() - 在所有註冊的提供者外掛程式中執行retrieve()方法,該方法從對應的API中收集資料
  • show() - 在所有已註冊的渲染器插件中執行 render(interactions) 方法,該方法將合併的資料轉換為 HTML 並插入

有關解決方案如何建構的進一步說明可以在 GitHub 儲存庫的自述文件中找到。

可用插件

最初開發的插件自然滿足了我對這個部落格的需求,但如果隨著時間的推移,可以添加更多來自開發者社群的插件,那就太好了。我將在接下來的幾週內為 Mastodon 和 Flickr 貢獻原生提供程式插件,以減少目前對 brid.gy 的依賴,而不再需要它。

  • 提供者外掛程式 網路提及 (mentions-united-provider_webmentions.js)
    透過部落格文章(目標)的 URL 獲取來自 webmention.io API 的所有交互,無論是真實的 webmention 還是來自 Mastodon、Bluesky、GitHub、Flickr 以及其他透過 Brid.gy 整合的平台的交互

  • 提供者外掛程式 Pixelfed(提及-united-provider_pixelfed.js)
    透過聯合 URL(來源)從 Pixelfed 實例的 API 取得所有互動。在傳遞的選項中,您也可以指定 API 代理 URL,以防止檢索所需的金鑰被公開。

  • 提供者外掛程式 DEV.to(mentions-united-provider_devto.js)
    透過聯合 URL

  • 從 DEV API 取得所有評論

Mentions United ... Go

收集所有互動後,渲染器外掛程式可以以不同的方式將它們整合到頁面中。要注意的是,這個解決方案輸出沒有任何樣式的純 HTML,因為這些畢竟是非常個人化的。

  • 渲染器外掛程式列表(mentions-united-renderer_list.js)
    產生所有互動的降序排序清單

  • 渲染器外掛程式 按類型劃分的頭像 (mentions-united-renderer_avatars-by-type.js)
    為給定類型的所有互動產生頭像的內聯列表,例如 Likes

  • 渲染器外掛程式總數(mentions-united-renderer_total-number.js)
    建立具有互動次數的錨

有關外掛程式、選項和更多詳細資訊的其他資訊可以在該專案的 GitHub 儲存庫上找到。


在kiko.io 上的原始帖子中,我深入了解了我的實現在SSG Hexo 下的樣子... https://kiko.io/post/Mentions-United-3-2-1-go /

以上是提到曼聯...去的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板