提及 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 收集点赞和评论,但该平台四年来已知的一些错误阻止了这一点。

现在,我不是最有耐心的人,而且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 获取所有评论

提及 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/

以上就是提及 United Go的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1492009.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:27:23
下一篇 2025年12月19日 14:27:40

相关推荐

  • js中如何生成二维码

    选择二维码生成库时需考量库的大小与性能、功能丰富度与定制性、浏览器兼容性、社区活跃度与维护状态以及许可证类型;2. 优化二维码应确保足够的静区、高对比度颜色、合适尺寸、恰当容错级别、简洁编码内容并提供清晰用户引导;3. 二维码可承载复杂数据类型包括vcard联系人信息、wi-fi连接配置、预设短信或…

    2025年12月20日 好文分享
    000
  • 从GitHub仓库集成Storybook组件到实际应用

    本文将详细介绍如何通过GitHub仓库链接,将使用Storybook和React构建的组件库集成到另一个实际应用中。核心方法是利用npm或yarn直接安装私有仓库作为依赖,但在此之前,务必确保Storybook项目能够成功构建,以避免集成后导致目标应用崩溃。 1. 场景概述 在前端开发中,组件化是提…

    2025年12月20日
    000
  • 在React应用中通过GitHub仓库链接集成Storybook组件

    本文详细介绍了如何在实际React应用中,通过GitHub仓库链接导入并使用基于Storybook构建的组件库。核心方法是利用包管理工具(如npm或yarn)直接安装仓库链接,但强调在导入前务必确保Storybook组件库已成功构建且无任何错误,以避免对目标项目造成破坏。教程涵盖了操作步骤、关键前置…

    2025年12月20日
    000
  • 解决React拖放中状态更新滞后与跨组件访问问题

    针对React拖放应用中状态更新后立即访问出现null的问题,本教程深入分析了React状态异步性与组件隔离性。核心解决方案是采用状态提升(State Lifting)模式,将拖放操作所需的共享状态和逻辑管理上移至共同父组件,确保数据同步与正确访问,并纠正了拖放事件的常见误用,提供了详细的代码示例和…

    2025年12月20日
    000
  • js 如何生成条形码

    在javascript中生成条形码最直接高效的方式是使用第三方库如jsbarcode;2. 引入库后通过提供数据和配置即可快速生成条形码,避免手动计算像素或绘图;3. 选择库时需考量支持的条形码类型、api易用性、自定义能力、渲染性能及社区维护情况;4. 自定义样式可通过配置width、height…

    2025年12月20日
    000
  • 使用 Bookmarklet 批量删除 GitHub 合并/关闭的分支

    本文介绍如何编写一个 Bookmarklet,用于批量删除 GitHub 项目中已合并或已关闭的分支。该 Bookmarklet 通过 JavaScript 代码自动查找并点击删除按钮,简化了手动删除大量分支的繁琐过程。通过使用 MutationObserver,可以确保在删除操作完成后再点击下一个…

    2025年12月20日
    000
  • 解决 Bookmarklet 仅触发第一个元素点击的问题

    Bookmarklet 在批量操作 GitHub 分支删除按钮时,仅触发第一个元素点击的问题,通常是由于点击事件触发后,后续的按钮被禁用导致。以下提供一种使用异步等待和 MutationObserver 机制解决此问题的方案。 问题分析 在 GitHub 的分支管理页面,当点击一个删除按钮时,页面会…

    2025年12月20日
    000
  • js如何实现加密解密

    javascript在客户端实现加密解密是可行的,但安全性有限,主要用于数据传输前或存储时的初步保护而非绝对机密保障;2. 常见实现方式包括使用cryptojs库或浏览器原生web cryptography api,支持对称加密(如aes)、非对称加密(如rsa)和哈希运算;3. 客户端加密的安全性…

    2025年12月20日
    000
  • js怎么获取当前时间的时间戳

    在javascript中获取当前时间的时间戳,推荐使用date.now(),因为它是静态方法,无需创建实例,性能更优且代码简洁;而new date().gettime()需先创建date对象再调用实例方法,略显冗余且性能稍低;两者均返回自1970年1月1日utc以来的毫秒数;1. date.now(…

    2025年12月20日
    000
  • Contact Form 7提交后显示感谢弹窗的正确事件处理方法

    本文旨在提供在Contact Form 7表单成功提交后显示“感谢弹窗”的正确方法。针对常见的jQuery和原生JavaScript实现方式,详细解释了如何避免在表单验证失败时触发弹窗,并提供了适用于多个表单的解决方案。通过本文,你将学会如何利用wpcf7mailsent事件,结合jQuery或原生…

    2025年12月20日
    000
  • Pact Broker 2.107.1 更新后 Pact 文件覆盖问题解决方案

    第一段引用上面的摘要:Pact Broker 升级至 2.107.1 版本后,Pact 文件覆盖功能失效,导致使用相同版本号推送 Pact 文件时出现问题。本文将介绍该问题的原因,并提供启用 allow_dangerous_contract_modification 功能的解决方案,同时强调该方案的…

    2025年12月20日
    000
  • Pact Broker 升级后 Pact 文件覆盖失败问题排查与解决方案

    本文旨在解决 Pact Broker 升级至 2.107.1 后,消费者配置中的 pactFileWriteMode = overwrite 不再生效,导致无法覆盖同版本 Pact 文件的问题。文章分析了该配置失效的原因,并提供了启用 allow_dangerous_contract_modific…

    2025年12月20日
    000
  • Pact Broker 升级后 Pact 文件覆盖失效问题排查与解决方案

    Pact Broker 升级后,消费者配置中的 pactFileWriteMode=overwrite 失效的问题。通过分析问题原因,即 Pact 客户端库已移除该配置,并提供启用 allow_dangerous_contract_modification 功能的替代方案,帮助开发者理解并解决 Pa…

    2025年12月20日
    000
  • js怎么删除数组中的重复项

    最直接、最现代的javascript数组去重方法是使用set,因其设计初衷即为存储唯一值,可高效去除基本类型重复项;2. 对于对象数组去重,需基于唯一标识属性结合map实现,或通过自定义比较逻辑处理复杂场景;3. 需警惕类型隐式转换、nan特殊性等潜在陷阱,并根据数据规模权衡性能与可读性,确保明确“…

    2025年12月20日 好文分享
    000
  • React Leaflet:动态获取用户位置并居中地图教程

    本教程详细介绍了如何在 React 应用中结合 React Leaflet 和浏览器地理定位 API,实现地图根据用户当前位置动态居中的功能。内容涵盖了如何获取用户经纬度信息、利用 useMap 钩子操作 Leaflet 地图实例,并通过创建辅助组件来平滑地将地图视图移动到指定位置,同时提供了完整的…

    2025年12月20日
    000
  • React Leaflet: 实现地图动态定位到用户当前位置

    本文详细介绍了如何在 React Leaflet 应用中,利用浏览器内置的 navigator.geolocation API 获取用户的当前地理位置,并结合 React Leaflet 的 useMap 钩子和 map.panTo() 方法,实现地图视图的动态居中与平移。通过一个完整的代码示例,展…

    2025年12月20日
    000
  • React Leaflet:实现地图动态定位与用户当前位置居中

    本教程详细介绍了如何在 React Leaflet 应用中实现地图的动态定位,特别是如何获取用户当前地理位置并将其作为地图中心。通过利用 navigator.geolocation API 获取经纬度,并结合 React Leaflet 提供的 useMap Hook 来控制地图实例,我们可以创建一…

    2025年12月20日
    000
  • NextAuth.js 登录后回调URL不生效问题排查与解决

    本文针对NextAuth.js中登录后回调URL (callbackUrl) 不生效的问题,提供详细的排查思路和解决方案。通常情况下,signIn 函数未能正确跳转到指定页面,可能是由于缺少Provider配置。本文将通过示例代码,演示如何正确配置Provider,确保用户登录后能够顺利跳转到目标页…

    2025年12月20日
    000
  • AngularJS:从弹窗更新父窗口ng-model的实践指南

    本文详细阐述了在AngularJS应用中,如何从子弹窗安全有效地更新父窗口的ng-model值。核心挑战在于确保程序化修改的DOM值能正确触发AngularJS的数据绑定机制。解决方案的关键在于结合使用$setViewValue()更新模型数据,并手动触发DOM元素的input事件,以模拟用户输入,…

    2025年12月20日
    000
  • 在AngularJS中从弹出窗口正确更新ng-model:事件触发是关键

    本文详细探讨了在AngularJS应用中,如何从一个弹出窗口(子窗口)安全有效地更新主窗口中由ng-model绑定的输入字段值。当直接使用$setViewValue无法完全同步ng-model时,核心解决方案在于通过JavaScript手动触发目标DOM元素的input事件,以模拟用户输入行为,从而…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信