Maison >interface Web >js tutoriel >Mentionne United... Aller

Mentionne United... Aller

Linda Hamilton
Linda Hamiltonoriginal
2024-10-04 20:23:30830parcourir

Blogging, c'est exposer sa propre opinion au public, et bien sûr, on espère des réactions, sinon on préfère écrire ses pensées dans un petit cahier et le cacher dans sa table de chevet. Les articles de blog ne constituent donc toujours que la première moitié d’une conversation avec d’autres êtres humains, lecteurs et internautes. L’autre moitié est constituée de réactions ou, mieux encore, d’interactions. J'aime, commentaires ou liens d'autres blogueurs qui reprennent l'opinion dans leur propre article de blog afin de la diffuser davantage ou d'en discuter. Une histoire émerge de ces deux moitiés.

Il semble que les blogs redeviennent de plus en plus populaires. Après de nombreuses années de confinement par les grandes « sociétés d’opinion », qui facilitaient le partage d’informations, nombreux sont ceux qui se sont rendu compte que cette simplicité a un prix, car l’opinion elle-même ou même la personne n’a jamais été au centre de l’intérêt. Le contenu au centre des réseaux fermés est monétisé ou utilisé pour manipuler autrui. Aujourd'hui, les blogs sont aussi l'expression du désir de liberté, d'indépendance et d'émancipation par rapport aux grandes plateformes de médias sociaux.

Mais cette liberté signifie aussi qu'il faut avoir une certaine maîtrise technique et que relier des contenus n'est pas aussi simple que sur les grandes plateformes, où il suffit de pouvoir utiliser un clavier. Les plateformes de blogs comme Wordpress sont certainement utiles à ce stade, mais en fin de compte, vous disposez simplement d'un blog dans lequel vous pouvez écrire et publier vos réflexions sous forme d'articles, mais pas automatiquement d'une conversation. L’élément le plus important d’une véritable conversation via un blog est le lien hypertexte, l’élément central du World Wide Web. Et contrairement aux années 2000, débuts du blogging, il existe aujourd’hui plusieurs façons de communiquer via un lien et ainsi d’engager une interaction qui va au-delà du simple commentaire sur un article de blog.

Interactions

Un exemple : Alice écrit un article sur son blog...

  1. Bob le lit et écrit sur le sujet dans son blog, mentionnant le message d'Alice via son URL.
  2. Alice publie l'URL de sa publication, y compris le titre, sur une plateforme Web sociale comme Mastodon. Chris lit le message et met un J'aime
  3. Daniel répond et republie le post de Mastodon en même temps
  4. Alice syndique la publication complète, y compris l'URL de l'original, sur une plateforme de développement telle que DEV et Eric commente cette publication

Toutes les interactions ci-dessus proviennent du blog d'Alice, mais elles ont lieu en dehors de son système et ne sont pas reflétées dans le message d'origine. Bob trouverait certainement intéressant le commentaire d'Eric ou la réponse de Daniel, mais il les ignore tout autant qu'Alice l'est de la mention de Bob sur son blog. Une liste de toutes les interactions sur le Web est manquante dans le message d'origine.

Les techniques pour accomplir tout cela existent déjà. Il suffit de les mettre en pratique :

sur 1 : Bob envoie une webmention au point de terminaison lié par Alice sur la page de publication (par exemple webmention.io) et Alice la récupère là-bas via l'API
les 2 et 3 : Alice a déjà configuré brid.gy pour fournir également les interactions Mastodon au point de terminaison Webmention
le 4 : Alice récupère les commentaires DEV via l'API dédiée

Les interactions du web social alias Fediverse sont déjà visibles sur divers articles de blog aujourd'hui. Ils sont généralement extraits directement de l'API de Mastodon sur la page. Cependant, cela néglige généralement un aspect important : le lien de la syndication auto-réalisée sur la publication d'origine, afin de donner aux lecteurs la possibilité d'atterrir sur une option d'interaction en un seul clic !

Mais comment Alice peut-elle obtenir les interactions sur sa page sans avoir à se familiariser avec les API respectives ?

Elle utilise simplement les scripts clients du projet Mentions United...

Élan

Il y a trois ans, j'ai non seulement introduit les Webmentions sur ce blog et écrit à leur sujet ici et ici, mais j'ai également commencé à enregistrer systématiquement mes syndications manuelles sur d'autres plateformes et à les afficher sous la publication.
Je syndique des messages texte sur Mastodon et, si le contenu est adapté, sur DEV et des photos sur Pixelfed, Flickr et quelques autres plateformes (malheureusement) fermées. J'ai collecté toutes les mentions Web et interactions de Mastodon et Flickr en utilisant une combinaison de webmention.io d'Aaron Parecki et brid.gy de Ryan Barrett et je les ai amenées à la page de publication à l'aide d'un JavaScript côté client.

Mais ce qui manquait toujours, ce étaient les interactions provenant d'autres plateformes. brid.gy pourrait, en principe, récolter les likes et commentaires de Pixelfed, la plus grande plateforme photo du web social, mais quelques bugs connus depuis quatre ans sur la plateforme l'empêchent.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Le code source de useMemo :Article suivant:Le code source de useMemo :