hexo-link-card-enhanced

本项目是基于 hexo-link-card 的改进版本，感谢原作者 OrangeX4 的开源贡献！

Convert a link to a link card via existing markdown grammar, with custom card colors, dark mode and favicon support.

使用现有 Markdown 语法将链接转换为卡片式链接（网页卡片），支持自定义卡片配色、深色模式适配和网站图标显示。

卡片式链接的优点：

1. 在移动互联网的时代，有许多人通过智能手机浏览文章，通过卡片式链接打开新页面对他们更友好；
2. 旧式的链接显示方式不够明显，很容易导致人们忽视了这是一条链接，卡片式链接能够突出显示，不容易被他人忽略；
3. 许多平台，例如 Bilibili，知乎，微信公众号等平台，均有将链接转换为卡片式链接的功能，如果能在书写 Markdown 阶段，就将卡片式链接的书写考虑进去，能给后续发布带来很大的便利。

新增功能 New Features

相比原版 hexo-link-card，本项目增加了以下功能：

• 深色/浅色模式支持：卡片会根据系统或主题的颜色模式自动适配
• 网站图标显示：自动获取并显示目标网站的 favicon 图标，可通过配置开启或关闭
• 自定义卡片配色：可在 _config.yml 自定义卡片的配色，或由插件自动适配主题的颜色配置

安装 Install

在你的 Hexo 项目下执行以下命令即可。

npm install hexo-link-card-enhanced --save

配置 Configuration

在 Hexo 的 _config.yml 中可以添加以下配置：

link_card:
  # 是否显示网站图标，默认为 true
  icon: true
  
  # 配色设定，下面的都是默认值
  # 浅色模式下的背景色
  bg_color: "#F3F4F4"
  # 深色模式下的背景色
  bg_color_dark: "#303744"
  
  # 浅色模式下的标题颜色
  title_color: "#1a202c"
  # 深色模式下的标题颜色
  title_color_dark: "#C0C0C0"

  # 浅色模式下的链接文字颜色
  desc_color: "#708090"
  # 深色模式下的链接文字颜色
  desc_color_dark: "#a7a9ad"

所有配置项都是可选的，如不配置将使用默认值。

另外，本插件支持自动适配部分 Hexo 主题的颜色配置，例如 Fluid 主题。插件会尝试读取以下配置项：

• body_bg_color 和 body_bg_color_dark：作为卡片的背景颜色
• post_heading_color 和 post_heading_color_dark：作为标题文字颜色
• sec_text_color 和 sec_text_color_dark：作为描述文字颜色

如果你的主题未定义这些配置项，插件会使用默认值。对主题颜色的适配优先级低于在 _config.yml 的设置，推荐在 _config.yml 中显式配置颜色覆盖默认值，以呈现最好的观感。

深色模式说明 About Dark Mode

本插件通过以下方式支持深色模式：

1. CSS 媒体查询：自动检测系统的 prefers-color-scheme 设置
2. HTML 属性：支持 html[data-user-color-scheme="dark"] 属性，兼容大多数支持深色模式切换的 Hexo 主题

网站图标说明 Favicon Support

插件支持自动获取目标网站的 favicon 图标，默认使用 favicon.im 服务。

• 自动获取：插件会根据链接的域名生成 favicon 地址，例如 https://favicon.im/github.com
• 自定义图标来源：可以修改 index.js 中的 faviconUrl 变量
• 关闭图标：在 _config.yml 中设置 link_card.icon: false 即可关闭图标显示

语法 Grammar

我们定义如下语法：

---

Kisechan/hexo-link-card - GitHub
https://github.com/Kisechan/hexo-link-card-enhanced

---

注意，两个空行里不应该有空格，否则会显示失败。

这种语法有以下优点：

1. 书写简单，易于识别，符合 Markdown 语法的设计理念；
2. 实现简单，只需要用 Javascript 的正则表达式替换和内置 HTML 功能即可实现；
3. 与现有的 Markdown 语法兼容，即使是没有实现这种语法的 Markdown 显示页面，也能有一定的显示效果（以两行分割线替代卡片）。

渲染效果 Preview