Mentions United ... Go
写博客意味着将自己的观点公开展示,当然你希望得到回应,否则你宁愿把自己的想法写在一个小笔记本上,然后藏在床头柜里。因此,博客文章始终只是与人类同胞、读者和网络用户对话的前半部分。另一半由反应组成,或者更好的是,由互动组成。来自其他博主的点赞、评论或链接,他们在自己的博文中采纳了该观点,以便进一步传播或讨论。一个故事从这两半中诞生。
博客似乎再次变得流行起来。经过多年被大型“意见集团”围困后,许多人意识到这种简单性是有代价的,因为意见本身甚至个人从来都不是兴趣的焦点。封闭网络中心的内容被货币化或用于操纵他人。如今,博客也是对自由、独立以及从大型社交媒体平台中解放出来的渴望的表达。
但是,这种自由也意味着您必须有相当多的技术理解,并且链接内容并不像在大平台上那么容易,您只需要能够使用键盘即可。像 Wordpress 这样的博客平台在这一点上当然是有帮助的,但最终你只有一个博客,你可以在其中以帖子的形式写下并发布你的想法,但不能自动成为对话。通过博客进行真正对话的最重要的组成部分是超链接,它是万维网的核心元素。与 2000 年代博客的早期相比,如今有多种方式可以通过链接进行交流,从而进行互动,而不仅仅是简单地评论博客文章。
互动
示例:Alice 在她的博客上写了一篇文章...
- Bob 阅读了该文章并在他的博客中写下了该主题,并通过其 URL 提到了 Alice 的帖子。
- Alice 在 Mastodon 等社交网络平台上发布了她帖子的 URL,包括标题。克里斯阅读了这篇文章并点赞
- 丹尼尔同时回复并转发Mastodon帖子
- 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.gyProvider-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
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 interactionsRenderer-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 LikesRenderer-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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
