Heim >Web-Frontend >js-Tutorial >Erwähnt United ... Los

Erwähnt United ... Los

Linda Hamilton
Linda HamiltonOriginal
2024-10-04 20:23:30870Durchsuche

Bloggen bedeutet, die eigene Meinung öffentlich zur Schau zu stellen, und natürlich hofft man auf Reaktionen darauf, sonst schreibt man seine Gedanken lieber in ein kleines Notizbuch und versteckt es im Nachttisch. Blogbeiträge sind daher immer nur die erste Hälfte eines Gesprächs mit Mitmenschen, Lesern und Webnutzern. Die andere Hälfte besteht aus Reaktionen oder, noch besser, Interaktionen. Likes, Kommentare oder Links von anderen Bloggern, die die Meinung in ihrem eigenen Blogbeitrag aufgreifen, um sie weiter zu verbreiten oder zu diskutieren. Aus diesen beiden Hälften entsteht eine Geschichte.

Es scheint, dass Bloggen wieder beliebter wird. Nach vielen Jahren der Abschottung durch große „Meinungskonzerne“, die den Informationsaustausch erleichterten, haben viele Menschen erkannt, dass diese Einfachheit ihren Preis hat, denn die Meinung selbst oder gar die Person standen nie im Mittelpunkt des Interesses. Die Inhalte im Zentrum der geschlossenen Netzwerke werden monetarisiert oder zur Manipulation anderer genutzt. Bloggen ist heute auch Ausdruck des Wunsches nach Freiheit und Unabhängigkeit und Emanzipation von den großen Social-Media-Plattformen.

Allerdings bedeutet diese Freiheit auch, dass man über ein gewisses Maß an technischem Verständnis verfügen muss und die Verlinkung von Inhalten nicht so einfach ist wie auf den großen Plattformen, wo man lediglich eine Tastatur bedienen können muss. Blogging-Plattformen wie Wordpress sind an dieser Stelle sicherlich eine Hilfe, aber am Ende des Tages hat man nur einen Blog, in dem man seine Gedanken aufschreiben und in Form von Beiträgen veröffentlichen kann, aber nicht automatisch eine Konversation. Der wichtigste Baustein für eine echte Konversation über einen Blog ist der Hyperlink, das zentrale Element des World Wide Web. Und im Gegensatz zu den 2000er Jahren, den Anfängen des Bloggens, gibt es heute zahlreiche Möglichkeiten, über einen Link zu kommunizieren und so in eine Interaktion zu treten, die über das bloße Kommentieren eines Blogbeitrags hinausgeht.

Interaktionen

Ein Beispiel: Alice schreibt einen Beitrag auf ihrem Blog...

  1. Bob liest es und schreibt in seinem Blog über das Thema, wobei er Alices Beitrag über seine URL erwähnt.
  2. Alice veröffentlicht die URL zu ihrem Beitrag einschließlich der Überschrift auf einer Social-Web-Plattform wie Mastodon. Chris liest den Beitrag und gibt ihm ein „Gefällt mir“
  3. Daniel antwortet auf den Mastodon-Beitrag und postet ihn gleichzeitig erneut
  4. Alice veröffentlicht den vollständigen Beitrag, einschließlich der URL zum Original, auf einer Entwicklerplattform wie DEV und Eric kommentiert diesen Beitrag

Alle oben genannten Interaktionen haben ihren Ursprung in Alices Blog, finden jedoch außerhalb ihres Systems statt und spiegeln sich nicht im ursprünglichen Beitrag wider. Bob würde sicherlich Erics Kommentar oder Daniels Antwort interessant finden, aber er weiß davon ebenso wenig wie Alice von Bobs Erwähnung in seinem Blog. Eine Liste aller Interaktionen aus dem Web fehlt im Originalbeitrag.

Die Techniken, um all dies zu erreichen, gibt es bereits. Sie müssen nur in die Tat umgesetzt werden:

zu 1: Bob sendet eine Webmention an den von Alice auf der Beitragsseite verlinkten Endpunkt (z. B. webmention.io) und Alice ruft sie dort über die API ab
zu 2 und 3: Alice hat zuvor brid.gy eingerichtet, um Mastodon-Interaktionen auch an den Webmention-Endpunkt zu übermitteln
zu 4: Alice ruft die DEV-Kommentare über die dedizierte API ab

Die Interaktionen aus dem Social Web aka Fediverse sind heute bereits auf diversen Blogbeiträgen zu sehen. Sie werden normalerweise direkt von Mastodons API auf die Seite gezogen. Dabei wird jedoch meist ein wichtiger Aspekt außer Acht gelassen: die Verlinkung der selbst durchgeführten Syndication auf den Originalbeitrag, um den Lesern die Möglichkeit zu geben, mit nur einem Klick auf einer Interaktionsmöglichkeit zu landen!

Aber wie bekommt Alice die Interaktionen auf ihre Seite, ohne sich mit den jeweiligen APIs vertraut machen zu müssen?

Sie verwendet einfach die Client-Skripte des Mentions United-Projekts ...

Impetus

Vor drei Jahren habe ich nicht nur Webmentions auf diesem Blog eingeführt und hier und hier darüber geschrieben, sondern auch damit begonnen, meine manuellen Syndizierungen auf anderen Plattformen systematisch zu erfassen und unter dem Beitrag anzuzeigen.
Ich syndiziere Textbeiträge auf Mastodon und, wenn der Inhalt geeignet ist, auf DEV und Fotos auf Pixelfed, Flickr und einigen anderen (leider) geschlossenen Plattformen. Ich habe alle Webmentions und Interaktionen von Mastodon und Flickr mithilfe einer Kombination aus webmention.io von Aaron Parecki und brid.gy von Ryan Barrett gesammelt und sie mithilfe eines clientseitigen JavaScript auf die Beitragsseite gebracht.

Aber was immer fehlte, waren Interaktionen von anderen Plattformen. Brid.gy könnte grundsätzlich Likes und Kommentare von Pixelfed, der größten Fotoplattform im Social Web, sammeln, doch einige Bugs, die seit vier Jahren auf der Plattform bekannt sind, verhindern dies.

現在,我不是最有耐心的人,而且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 /

Das obige ist der detaillierte Inhalt vonErwähnt United ... Los. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Der Quellcode von useMemo:Nächster Artikel:Der Quellcode von useMemo: