Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/halo-sigs/plugin-editor-hyperlink-card
为 Halo 的默认编辑器提供超链接卡片支持
https://github.com/halo-sigs/plugin-editor-hyperlink-card
halo halo-plugin
Last synced: 3 days ago
JSON representation
为 Halo 的默认编辑器提供超链接卡片支持
- Host: GitHub
- URL: https://github.com/halo-sigs/plugin-editor-hyperlink-card
- Owner: halo-sigs
- License: gpl-3.0
- Created: 2024-06-04T10:03:15.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-03T08:50:16.000Z (5 months ago)
- Last Synced: 2024-08-02T06:17:09.350Z (4 months ago)
- Topics: halo, halo-plugin
- Language: TypeScript
- Homepage: https://www.halo.run/store/apps/app-UpUJA
- Size: 2.7 MB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-halo - plugin-editor-hyperlink-card - Halo 的编辑器插件，能够在编辑器中将普通的超链接转为卡片形式，可以用于丰富网站的内容展示。 (Halo 2.0 / 插件)
- awesome-tiptap - Hyperlink Card by Halo - Convert normal hyperlinks to cards
- awesome-tiptap - Hyperlink Card by Halo - Convert normal hyperlinks to cards
README
# Halo 编辑器超链接卡片插件
Halo 的编辑器插件，能够在编辑器中将普通的超链接转为卡片形式，可以用于丰富网站的内容展示。
## 特性
- 与默认编辑器深度集成，开箱即用。
- 支持行内和块级链接卡片，其中块级卡片支持三种风格。
- 支持为链接的网站设置代理。
- 支持缓存链接信息的请求结果。
- 支持 Dark Mode。
## 安装与使用
1. 在[应用市场](https://www.halo.run/store/apps/app-UpUJA)中安装并启用此插件。
2. 在编辑器中选中一个超链接，如图选择所需链接类型即可。
## 预览
## 作为标签使用
如果你使用默认编辑器，那么参考上面的[安装与使用](#安装与使用)即可在文章中插入链接卡片。此外，因为此插件的 UI 部分最终会编译为 [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)，所以你可以将其当做一个常规的 HTML 标签插入到网站的任意位置。
### hyperlink-card
块级链接卡片，使用方式：
```html
```
参数：
- `href`：链接地址。
- `target`：链接打开方式，可选值为 `_blank`、`_self`，默认为 `_self`。
- `theme`：卡片风格，可选值为 `regular`、`small`、`grid`，默认为 `regular`。
### hyperlink-inline-card
行内链接卡片，使用方式：
```html
```
参数：
- `href`：链接地址。
- `target`：链接打开方式，可选值为 `_blank`、`_self`，默认为 `_self`。
## 主题适配
### 自定义样式
此插件通常无需主题主动适配，可以开箱即用，但也暴露出了部分 CSS 变量。
目前已提供的 CSS 变量：
| 变量名 | 描述 |
|-----------------------------------------------|--------------------|
| `--halo-hyperlink-card-bg-color` | 卡片背景颜色 |
| `--halo-hyperlink-card-inline-bg-color` | 行内卡片背景颜色 |
| `--halo-hyperlink-card-inline-hover-bg-color` | 行内卡片悬停背景颜色 |
| `--halo-hyperlink-card-title-color` | 标题颜色 |
| `--halo-hyperlink-card-inline-title-color` | 行内标题颜色 |
| `--halo-hyperlink-card-description-color` | 描述文字颜色 |
| `--halo-hyperlink-card-link-color` | 链接颜色 |
| `--halo-hyperlink-card-bg-gradient` | 背景渐变 |
| `--halo-hyperlink-card-border-color` | 边框颜色 |
| `--halo-hyperlink-card-border-hover-color` | 边框悬停颜色 |
点击查看 CSS 代码模板
```css
:root {
--halo-hyperlink-card-bg-color: ;
--halo-hyperlink-card-inline-bg-color: ;
--halo-hyperlink-card-inline-hover-bg-color: ;
--halo-hyperlink-card-title-color: ;
--halo-hyperlink-card-inline-title-color: ;
--halo-hyperlink-card-description-color: ;
--halo-hyperlink-card-link-color: ;
--halo-hyperlink-card-bg-gradient: ;
--halo-hyperlink-card-border-color: ;
--halo-hyperlink-card-border-hover-color: ;
}
```
### 配色切换方案
根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为链接卡片提供动态切换配色的功能。
以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。
点击查看示例
```css
@media (prefers-color-scheme: dark) {
.color-scheme-auto,
[data-color-scheme='auto'] hyperlink-card {
color-scheme: dark;
--halo-hyperlink-card-bg-color: #18181b;
--halo-hyperlink-card-inline-bg-color: #3f3f46;
--halo-hyperlink-card-inline-hover-bg-color: #52525b;
--halo-hyperlink-card-title-color: #f4f4f5;
--halo-hyperlink-card-inline-title-color: #f4f4f5;
--halo-hyperlink-card-description-color: #a1a1aa;
--halo-hyperlink-card-link-color: #e4e4e7;
--halo-hyperlink-card-bg-gradient: linear-gradient(#454545, #454545),
linear-gradient(transparent, transparent);
--halo-hyperlink-card-border-color: #52525b;
--halo-hyperlink-card-border-hover-color: #e4e4e7;
}
}
.color-scheme-dark,
.dark,
[data-color-scheme='dark'] hyperlink-card {
color-scheme: dark;
--halo-hyperlink-card-bg-color: #18181b;
--halo-hyperlink-card-inline-bg-color: #3f3f46;
--halo-hyperlink-card-inline-hover-bg-color: #52525b;
--halo-hyperlink-card-title-color: #f4f4f5;
--halo-hyperlink-card-inline-title-color: #f4f4f5;
--halo-hyperlink-card-description-color: #a1a1aa;
--halo-hyperlink-card-link-color: #e4e4e7;
--halo-hyperlink-card-bg-gradient: linear-gradient(#454545, #454545),
linear-gradient(transparent, transparent);
--halo-hyperlink-card-border-color: #52525b;
--halo-hyperlink-card-border-hover-color: #e4e4e7;
}
```
此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：
1. 在 html 或者 body 标签添加 class：
1. `color-scheme-auto`：自动模式，根据系统的暗黑模式自动切换。
2. `color-scheme-dark` / `dark`：强制暗黑模式。
3. `color-scheme-light` / `light`：强制明亮模式。
2. 在 html 或者 body 标签添加 `data-color-scheme` 属性：
1. `auto`：自动模式，根据系统的暗黑模式自动切换。
2. `dark`：强制暗黑模式。
3. `light`：强制明亮模式。