优质网站同好者周刊（第 133 期）

倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。

备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。

沉浸式翻译 - 双语网页翻译扩展, 电子书翻译, PDF 翻译, 字幕翻译

标签：翻译器 · 插件 · 效率

沉浸式翻译是一款浏览器插件，可以智能识别网页主内容区进行双语翻译，插件支持全平台浏览器，PDF 文件翻译，EPUB 电子书双语翻译、制作、导出，字幕文件翻译等功能。

倾城之链 - 沉浸式翻译 - 双语网页翻译扩展, 电子书翻译, PDF翻译, 字幕翻译

推荐语：沉浸式翻译是一款浏览器插件，可以智能识别网页主内容区进行双语翻译，插件支持全平台浏览器，PDF 文件翻译，EPUB 电子书双语翻译、制作、导出，字幕文件翻译等功能。免费使用，支持 Deepl、Google、有道、腾讯翻译等多个翻译服务，支持 Firefox、Chrome、油猴脚本，亦可在 iOS Safari 上使用。主要有以下功能特性：

沉浸式阅读外文网站：通过智能识别网页主内容区域并进行双语对照翻译，沉浸式翻译提供了全新的外文阅读体验，因此得名“沉浸式翻译”。
强大的输入框翻译：将任何网页上的输入框化身为多语言翻译器，立刻解锁谷歌搜索， ChatGPT 等工具的双语实时对话体验。
高效的文件翻译：一键导出双语电子书，同时支持 PDF、字幕、TXT 等文件的实时双语翻译。
创新的鼠标悬停翻译：仅需将鼠标停留在任意网页的任意段落上，相应的译文就会立即出现在段落下方。段落在在沉浸式翻译的设计理念中被视为最小单位，保留其上下文，这样我们才能真正理解并学习外语。
深度定制优化主流网站：针对 Google、Twitter、Reddit、YouTube、彭博社、华尔街日报等主流网站进行优化，无论是搜索、社交还是获取资讯，都更加流畅高效。
全平台支持：除了各大桌面端浏览器，移动设备也可享受同样的沉浸式翻译体验。在 iOS Safari、安卓 Kiwi 浏览器等移动端浏览器上轻松实现双语浏览 Twitter，Reddit 等社交媒体。
支持 10+种翻译服务：在沉浸式翻译中，你可以选择超过 10 种翻译服务，如 Deepl 、 OpenAI 、微软翻译、谷歌翻译、腾讯翻译等等，这份名单还在不断增加中。

您可以在如下场景使用：

刷推神器：使用“沉浸式翻译”，轻松浏览信息；
资讯获取：高效获取信息，摆脱语言束缚；
沟通交流：无障碍快速沟通；
PDF 论文阅读：PDF 双语翻译，对照阅读；

一款免费的，好用的，没有废话的，革命性的，饱受赞誉的， AI 驱动的双语网页翻译扩展，帮助你有效地打破信息差；值得一提的是，它在手机上也可以用。如果您对其感兴趣，可前往 About 沉浸式翻译了解如何使用。

── 出自倾城之链 - 沉浸式翻译 - 双语网页翻译扩展, 电子书翻译, PDF 翻译, 字幕翻译

Skeleton — UI Toolkit for Svelte + Tailwind

标签：Svelte · Tailwind · 组件库

关键字：svelte, sveltekit, web, ui, components, reactive, accessibility, typescript, css, open source

Skeleton is a fully featured UI Toolkit for building reactive interfaces quickly using Svelte and Tailwind.

倾城之链 - Skeleton — UI Toolkit for Svelte + Tailwind

推荐语： Skeleton 是一个使用 Svelte + Tailwind 构建的开源 UI 工具包，允许您使用 Svelte + Tailwind CSS 创建反应式 Web 界面。它具有如下功能特征：

专为 Svelte 和 SvelteKit 设计

Skeleton 直接与 Svelte 和 SvelteKit 的最佳功能集成，包括组件、存储、操作等。提供交互式组件、图像过滤器等等。

通过 Tailwind CSS 进行了增强。

Skeleton 的设计完全利用了 Tailwind 独特的 CSS 样式实用类方法，使您能够创建或扩展自己的个人设计系统。

自适应主题

使用 Skeleton 的设计标记系统、变体样式和 Tailwind 实用程序类来创建符合您的整体主题和审美的自定义组件。

惊人的 DX

提供一流的开发人员体验，提供完整的文档和充足的示例，帮助您更快地交付。

无障碍

组件遵循 WAI-ARIA 指南来实现所需的语义、属性和键盘交互。

可扩展

从 Flowbite 或 Tailwind UI 等其他 UI 库中引入元素，进一步扩展您的工具包库。

打字稿

默认情况下使用 TypeScript ，并在您在编辑器中构建应用程序时提供 IntelliSense 反馈。

集成

带上您最喜欢的 Svelte 或 Javascript 库，并使用自适应主题系统以获得无缝体验。

图标不可知论者

支持所有形式的图标以实现完全控制，包括：unicode、表情符号、矢量或基于 SVG 的图标系统。

总之， Skeleton 是一个很棒的组件库；个人最新项目：素问智聊斋，部分功能，也有采用 Skeleton 来达成，它那优雅的设计令人影响深刻；值得一提的是，该项目在 Github 仓库开源，如果您对其感兴趣，可移步前往了解更多。如果您也喜欢基于 Svelte 、 Tailwind CSS 开发 Web 应用，UI 组件库，强烈推荐优先考虑使用它。

── 出自倾城之链 - Skeleton — UI Toolkit for Svelte + Tailwind

MarkDX - AI Markdown Editor

标签：Markdown · AI · 编辑器

关键字：Markdown, MDX, Markdown editor, MDX editor, Markdown preview, MDX preview, AI Markdown, AI MDX, AI Markdown editor, AI MDX editor, MarkDX editor, MarkDX

MarkDX is an open source AI markdown editor, which can help you write markdown documents more efficiently.

倾城之链 - MarkDX - AI Markdown Editor

推荐语：MarkDX ，是一个 Markdown 编辑器，它利用 AI 让标准 Markdown 变得更加强大。以下是 MarkDX 的一些功能特征：

生成或记录代码

您可以从文档生成代码和文档。

导出为任何格式

您可以导出文档 Markdown、HTML、Lexer 数据等。

翻译

您可以将文档翻译成任何语言。

AI 建议和修正

您可以获得 AI 对文档的建议和更正。

问 AI 游乐场

您可以向 AI 游乐场询问您的问题。

实时协作

您可以与您的团队实时协作。

总之， MarkDX 是一款简单、快速且灵活的 AI 支持的 Markdown 编辑器，登录即可免费使用，可帮您实现一流的 Markdown 写作。值得一提的是，该项目在 Github 仓库开源，如果您对其感兴趣，可移步前往从而了解更多。

── 出自倾城之链 - MarkDX - AI Markdown Editor

AutoAnimate - Add motion to your apps with a single line of code

标签：动画 · 程序库 · 开源

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.

倾城之链 - AutoAnimate - Add motion to your apps with a single line of code

推荐语：AutoAnimate 是一个零配置的嵌入式动画实用程序，可为您的 Web 应用程序添加平滑的过渡。您可以将它与 Vue 、 React 、 Svelte 、Solid、Angular 或任何其他 JavaScript 应用程序一起使用。

AutoAnimate 本质上是一个 autoAnimate 接受父元素的函数。自动动画将应用于父元素及其直接子元素。当发生以下三个事件之一时，会专门触发动画：

一个子级被添加到 DOM 中。
DOM 中的子级被删除。
一个孩子在 DOM 中移动。

对于开发者来讲，使用极其容易；几行代码即可为网页带来轻柔、平滑的转变，无需添加任何过渡类或自定义 CSS。对于最终用户来说，这是一次显着的升级，只需最少的开发人员工作。

AutoAnimate 旨在与零配置一起使用。研发团队相信默认配置符合该项目的目标：在不影响开发人员的实施时间或性能预算的情况下，大幅改善应用程序的用户体验。

有大量可用于 JavaScript 的动画库，并且每个库都有其自己的位置。AutoAnimate 不是一个传统的动画库，可以将其更多地视为“更适合运动” ——它是一个易于实现的标准，您可以快速应用于任何项目。

AutoAnimate 的目标是消除对 DOM 的更改，否则最终用户会感到困惑。例如，当用户在没有动画的情况下对列表进行排序时，很难直观地看出列表中的项目实际上是如何变化的，但使用 AutoAnimate，这些变化突然变得直观起来。AutoAnimate 旨在通过零配置的即插即用解决方案来解决此类问题。该项目在 Github 仓库开源，如果您对其感兴趣，不妨移步前往以了解更多。

── 出自倾城之链 - AutoAnimate - Add motion to your apps with a single line of code

Floating UI - Create tooltips, popovers, dropdowns, and more

标签：组件 · JavaScript · 开源

A JavaScript library to position floating elements and create interactions for them.

倾城之链 - Floating UI - Create tooltips, popovers, dropdowns, and more

推荐语：Floating UI 是一个小型 JavaScript 工具库，可帮助您创建“浮动”元素，例如工具提示、弹出窗口、下拉菜单等。它提供两个主要功能：

锚定位：将浮动元素（例如工具提示）锚定到另一个元素（例如按钮），同时通过避免碰撞确保其尽可能保持在视图中。此功能适用于所有平台。
React 的用户交互：用于组合交互以创建可访问的浮动 UI 组件的钩子和组件。从简单的工具提示到选择菜单、对话框、组合框，您可以完全控制，同时确保完全可访问的UI 体验。

为什么使用 Floating UI

浮动元素是绝对定位的，通常锚定到另一个 UI 元素。确保浮动元素保持锚定在另一个元素旁边可能具有挑战性，特别是在滚动容器等独特的布局上下文中。

当浮动元素太靠近视口边缘并变得模糊时，绝对定位也会导致问题（也称为碰撞）。当发生碰撞时，必须调整位置以确保浮动元素保持可见。

此外，浮动元素通常是交互式的，这在设计用户交互时可能会引发复杂的可访问性问题。浮动 UI 提供了一组低级功能来帮助您应对这些挑战并构建可访问的浮动 UI 组件。

除了 Web、 React DOM 、React Native 和 Vue 的官方绑定之外，Floating UI 还支持，并且每个模块都可以由您的打包程序完全进行树摇动（ Fully Tree-Shakeable），因此您不用担心造成应用体积增大。浮动 UI 是免费且开源的，如果您对其感兴趣，不妨移步 Github 开源仓库从而了解更多。

── 出自倾城之链 - Floating UI - Create tooltips, popovers, dropdowns, and more

对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下倾情打赏），🤲 。

本期文末寄语

未曾走到绝境路彼岸花不开，
辛酸只为长安远倒卧在琼台，
小心那流射的海市售卖开花杖，
辽遥的天河啊纷纷流淌的挽歌郎，
蓝采和啊醉酒当歌，
红颜易老转眼桑田泛清波。
── 著名歌手词曲创作人音乐制作人 · 刀郎《翩翩》

倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。

倾城之链 | 优质网站周刊