halo-sigs / plugin-editor-hyperlink-card

为 Halo 的默认编辑器提供超链接卡片支持
https://www.halo.run/store/apps/app-UpUJA
GNU General Public License v3.0
17 stars 3 forks source link
halo halo-plugin

Halo 编辑器超链接卡片插件

Halo 的编辑器插件,能够在编辑器中将普通的超链接转为卡片形式,可以用于丰富网站的内容展示。

特性

安装与使用

  1. 应用市场中安装并启用此插件。
  2. 在编辑器中选中一个超链接,如图选择所需链接类型即可。

    Editor Doc

预览

Editor

Dark

Light

作为标签使用

如果你使用默认编辑器,那么参考上面的安装与使用即可在文章中插入链接卡片。此外,因为此插件的 UI 部分最终会编译为 Web Component,所以你可以将其当做一个常规的 HTML 标签插入到网站的任意位置。

hyperlink-card

块级链接卡片,使用方式:

<hyperlink-card href="https://www.halo.run" target="_blank" theme="regular"></hyperlink-card>

参数:

hyperlink-inline-card

行内链接卡片,使用方式:

<hyperlink-inline-card href="https://www.halo.run" target="_blank"></hyperlink-inline-card>

参数:

主题适配

自定义样式

此插件通常无需主题主动适配,可以开箱即用,但也暴露出了部分 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:强制明亮模式。