Home >Web Front-end >JS Tutorial >Mentions United ... Go

Mentions United ... Go

Linda Hamilton
Linda HamiltonOriginal
2024-10-04 20:23:30835browse

写博客意味着将自己的观点公开展示,当然你希望得到回应,否则你宁愿把自己的想法写在一个小笔记本上,然后藏在床头柜里。因此,博客文章始终只是与人类同胞、读者和网络用户对话的前半部分。另一半由反应组成,或者更好的是,由互动组成。来自其他博主的点赞、评论或链接,他们在自己的博文中采纳了该观点,以便进一步传播或讨论。一个故事从这两半中诞生。

博客似乎再次变得流行起来。经过多年被大型“意见集团”围困后,许多人意识到这种简单性是有代价的,因为意见本身甚至个人从来都不是兴趣的焦点。封闭网络中心的内容被货币化或用于操纵他人。如今,博客也是对自由、独立以及从大型社交媒体平台中解放出来的渴望的表达。

但是,这种自由也意味着您必须有相当多的技术理解,并且链接内容并不像在大平台上那么容易,您只需要能够使用键盘即可。像 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 通过 API 在那里检索它
在 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 收集点赞和评论,但该平台四年来已知的一些错误阻止了这一点。

Now, I'm not the most patient person, and since there was no response even after repeated inquiries in the Pixelfed issue, and it would only have solved one problem for me anyway, I thought to myself: then I'll just build something myself that is able to pick up interactions from all possible APIs and insert them into my post pages.

Project «Mentions United»

As Robb Knight said about his EchoFeed:

Naming things is hard, leave me alone.

The functionality and structure of the solution were easier to define. On the one hand, it was to be a pure client JavaScript application that runs in the browser on the page to ensure that the data is always up to date and that withdrawn interactions are not taken into account. On the other hand, a plugin system should only ever execute the scripts that are needed.

The project therefore consists of a main script of only 7 KB and two types of plug-in scripts:

  • Provider plugins to retrieve person-related interaction data and put it into a common form

  • Renderer plugins to transform the collected data into HTML and insert it into the page

The main script (mentions-united.js) implements following relevant methods:

  • register(plugin) - Registers a plugin script for execution
  • load() - Executes the retrieve() method in all registered provider plugins, which collects the data from the respective APIs
  • show() - Executes the render(interactions) method in all registered renderer plugins, which converts the merged data into HTML and inserts it

Further explanations of how the solution is structured can be found in the README of the GitHub repo.

Available plugins

The initially developed plugins naturally cover my needs for this blog, but it would be great if over time more from the developer community would be added. I will contribute native provider plugins for Mastodon and Flickr in the next few weeks to reduce the current dependence on brid.gy, where it is no longer necessary.

  • Provider-Plugin Webmentions (mentions-united-provider_webmentions.js)
    Get all interactions from the webmention.io API via the URL of the blog post (target), be they real webmentions or interactions from the platforms Mastodon, Bluesky, GitHub, Flickr and others that have been integrated via brid.gy

  • Provider-Plugin Pixelfed (mentions-united-provider_pixelfed.js)
    Get all interactions from the API of a Pixelfed instance via the syndication URL (source). In the passed options, you can also specify an API proxy URL to prevent the key necessary for the retrieval from being publicly available.

  • Provider-Plugin DEV.to (mentions-united-provider_devto.js)
    Get all comments from the DEV API via the syndication URL

Mentions United ... Go

Once all the interactions have been collected, the renderer plugins can integrate them into the page in different ways. It is important to note that the solution outputs pure HTML without any styles, because these are very individual after all.

  • Renderer-Plugin List (mentions-united-renderer_list.js)
    Generates a descending sorted list of all interactions

  • Renderer-Plugin Avatars by Type (mentions-united-renderer_avatars-by-type.js)
    Generates an inline list of avatars for all interactions of a given type, for example Likes

  • Renderer-Plugin Total Number (mentions-united-renderer_total-number.js)
    Creates an anchor with the number of interactions

Additional information about the plugins, the options and many more details can be found on the GitHub repository for the project.


On the original post on kiko.io I give an insight how my implementation looks like under the SSG Hexo ... https://kiko.io/post/Mentions-United-3-2-1-go/

The above is the detailed content of Mentions United ... Go. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn