{"id":20427142,"url":"https://github.com/orionpax1997/website-card-embed","last_synced_at":"2026-02-21T00:02:54.802Z","repository":{"id":48173566,"uuid":"451804990","full_name":"orionpax1997/website-card-embed","owner":"orionpax1997","description":"欢迎使用 Website Card Embed，只需几个步骤， 你就可以在你的网站中支持以卡片的形式进行文章的引用。","archived":false,"fork":false,"pushed_at":"2025-02-13T02:31:00.000Z","size":1600,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T21:01:21.439Z","etag":null,"topics":["hugo","nextjs","react","vercel"],"latest_commit_sha":null,"homepage":"https://blog.dramacat.top/website-card-embed/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orionpax1997.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-25T09:00:58.000Z","updated_at":"2025-02-13T02:31:04.000Z","dependencies_parsed_at":"2024-01-02T05:04:30.347Z","dependency_job_id":"7f290c3d-e46a-44fe-86d8-ee37ec9ce3f6","html_url":"https://github.com/orionpax1997/website-card-embed","commit_stats":null,"previous_names":["orionpax1997/website-card-embed"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/orionpax1997/website-card-embed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orionpax1997%2Fwebsite-card-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orionpax1997%2Fwebsite-card-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orionpax1997%2Fwebsite-card-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orionpax1997%2Fwebsite-card-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orionpax1997","download_url":"https://codeload.github.com/orionpax1997/website-card-embed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orionpax1997%2Fwebsite-card-embed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29668639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T23:24:07.480Z","status":"ssl_error","status_checked_at":"2026-02-20T23:24:06.202Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hugo","nextjs","react","vercel"],"created_at":"2024-11-15T07:19:03.975Z","updated_at":"2026-02-21T00:02:54.796Z","avatar_url":"https://github.com/orionpax1997.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Website Card Embed\n\n欢迎使用 Website Card Embed，只需几个步骤， 你就可以在你的网站中支持以卡片的形式进行文章的引用。\n\n[![使用 Website Card Embed 在你的 Blog 中以卡片形式进行文章引用](https://website-card-embed.qingtian.me/api/screenshot?url=https://blog.qingtian.me/website-card-embed/)](https://blog.qingtian.me/website-card-embed/)\n\n## 演示\n\n![ezgif](https://cdn.jsdelivr.net/gh/Humble-Xiang/picx-images@master/geek/ezgif.7dedemoeu9o0.gif)\n\n## 快速上手\n\n直接访问 [Website Card Embed Demo](https://website-card-embed-demo.qingtian.me/?url=https://gohugo.io/about/what-is-hugo/) 或者复制以下代码\n\n```md\n\u003ciframe \n  src=\"https://website-card-embed-demo.qingtian.me/?url=https://gohugo.io/about/what-is-hugo/\" \n  style=\"width:100%;height:124px\" frameborder=\"no\"\u003e\n\u003c/iframe\u003e\n```\n\n到你的 Markdown 文章中预览看下效果。如果你的 Markdown 渲染器支持 iframe，修改 `url=` 后的文章地址来 Enjoy!\n\n[![what-is-hugo](https://website-card-embed.qingtian.me/api/screenshot?url=https://gohugo.io/about/what-is-hugo/)](https://gohugo.io/about/what-is-hugo/)\n\n## 降级\n\n值得注意的是上面的方式仅在支持渲染 iframe 标签的 Markdown 引擎中使用，像 Github README 文件是不支持的\n\n[![Github Disallowed Raw HTML](https://website-card-embed.qingtian.me/api/screenshot?url=https://github.github.com/gfm/#disallowed-raw-html-extension-)](https://github.github.com/gfm/#disallowed-raw-html-extension-)\n\nWebsite Card Embed 提供了降级方案 `[![what-is-hugo](https://website-card-embed-demo.qingtian.me/api/screenshot?url=https://gohugo.io/about/what-is-hugo/)](https://gohugo.io/about/what-is-hugo/)`，可以使用基础的 Markdown 语法渲染一张带链接的图片在 Github 中使用。\n\n## 使用 Vercel 部署你自己的服务端\n\n为了演示服务的安全和你自己使用时的稳定性考虑，你最好独自使用一个服务端，感谢 [Vercel](https://vercel.com/docs) 让这一切变得十分简单，只需简单几步操作你就可以拥有自己的解析服务了。\n\n1. 点击 [Deploy](https://vercel.com/import/project?template=https://github.com/Humble-Xiang/website-card-embed)，跳转至 Vercel 进行 Server 端部署。\n2. 如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。\n3. 输入一个你喜欢的 Vercel 项目名称并点击 Create 继续。\n4. 此时 Vercel 会基于 Website Card Embed 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。\n5. 很快，满屏的烟花会庆祝你部署成功，你自己的服务端已经可以使用了。此时点击 Go to Dashboard 可以跳转到应用的控制台。\n6. 你可以在 Settings - Domains 中修改 vercel 分配给你的域名，然后通过 `你的域名/?url=文章地址` 来获取文章的卡片形式的预览。\n\n## 使用 Hugo Shortcodes 引用网站\n\n如果你的 Blog 是使用 Hugo 来搭建的，可以使用 Hugo 的 Shortcodes 来引用网站。在你的 Blog `layouts/shortcodes/` 目录下创建 `card.html` 文件并粘贴如下代码。\n\n```html\n{{- if .IsNamedParams -}}\n\u003ciframe\n  class=\"website-card-embed\"\n  src=\"你的域名/?url={{ .Get `url` }}\u0026title={{ .Get `title` }}\u0026description={{ .Get `description` }}\u0026image={{ .Get `image` }}\u0026favicon={{ .Get `favicon` }}\"\n  style=\"width:100%;height:124px\"\n  frameborder=\"no\"\n\u003e\u003c/iframe\u003e\n{{- else -}}\n\u003ciframe\n  class=\"website-card-embed\"\n  src=\"你的域名/?url={{ .Get 0 }}\"\n  style=\"width:100%;height:124px\"\n  frameborder=\"no\"\n\u003e\u003c/iframe\u003e\n{{- end -}}\n```\n\n现在你可以使用 `{{\u003c/* card \"https://gohugo.io/about/what-is-hugo/\" */\u003e}}` 来引用网站了。\n\n## 静态卡片支持\n\n当出现一个网站总是解析失败的时候，你需要考虑使用静态卡片了。仅需要添加 title、description 等而外参数就可以跳过解析直接生成卡片了。注意不要漏掉 url 参数，不然就会出现虽然渲染了卡片，但是不知道跳转到何处的问题。\n\n```md\n{{\u003c card title=\"What is Hugo\"\nurl=\"https://gohugo.io/about/what-is-hugo/\"\ndescription=\"Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.\"\nfavicon=\"https://gohugo.io/favicon-32x32.png\"\nimage=\"https://gohugo.io/opengraph/gohugoio-card-base-1_huf001e7df4fd9c00c4355abac7d4ca455_242906_filter_11180610884299235099.png\" \u003e}}\n```\n\n## 夜间模式支持\n\n想要支持夜间模式你的 `layouts/shortcodes/card.html` 代码需要修改为\n\n```html\n{{- if .IsNamedParams -}}\n\u003ciframe\n  class=\"website-card-embed\"\n  data-src=\"https://website-card-embed-demo.qingtian.me/?url={{ .Get `url` }}\u0026title={{ .Get `title` }}\u0026description={{ .Get `description` }}\u0026image={{ .Get `image` }}\u0026favicon={{ .Get `favicon` }}\"\n  style=\"width: 100%; height: 124px\"\n  frameborder=\"no\"\n\u003e\u003c/iframe\u003e\n{{- else -}}\n\u003ciframe\n  class=\"website-card-embed\"\n  data-src=\"https://website-card-embed-demo.qingtian.me/?url={{ .Get 0 }}\"\n  style=\"width: 100%; height: 124px\"\n  frameborder=\"no\"\n\u003e\u003c/iframe\u003e\n{{- end -}}\n```\n\n同时你的网站需要引用如下 js 代码\n\n```js\n/**\n * 获取渲染颜色模式的方法，基于现有的主题自定义\n * @returns {string} 'dark' or 'light'\n */\nfunction getWebsiteCardEmbedColorMode() {\n  if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';\n  if (window.matchMedia('(prefers-color-scheme: light)').matches) return 'light';\n  return 'light';\n}\n\nArray.from(document.getElementsByClassName('website-card-embed')).forEach(function (item) {\n  item.src = item.getAttribute('data-src') + '\u0026colorMode=' + getWebsiteCardEmbedColorMode();\n});\n```\n\n也可以通过 `你的域名/website-card-embed.js` 引用\n\n[![hugo-adding-custom-css-js-themes](https://website-card-embed.qingtian.me/api/screenshot?url=https://mcneilcode.com/post/web/hugo/hugo-adding-custom-css-js-themes/)](https://mcneilcode.com/post/web/hugo/hugo-adding-custom-css-js-themes/)\n\n如果你使用的 Hugo 主题为 LoveIt 或者基于其开发的新主题，你需要引入的 JS 为 `你的域名/website-card-embed-loveit.js`，代码为\n\n```js\n/**\n * 获取渲染颜色模式的方法，基于使用的主题自定义\n * @returns {string} 'dark' or 'light'\n */\nfunction getWebsiteCardEmbedColorMode() {\n  return document.body.getAttribute('theme') !== 'light' \u0026\u0026 document.body.getAttribute('theme') !== 'white'\n    ? 'dark'\n    : 'light';\n}\n\n/**\n * 初始化网站卡片\n */\nfunction initWebsiteCardEmbed() {\n  Array.from(document.getElementsByClassName('website-card-embed')).forEach(function (item) {\n    item.src = item.getAttribute('data-src') + '\u0026colorMode=' + getWebsiteCardEmbedColorMode();\n  });\n}\n\n/**\n * 初始化主题切换事件，基于使用主题自定义\n */\nfunction initSelectThemeListener() {\n  var selects = document.getElementsByClassName('color-theme-select');\n  for (var i = 0; i \u003c selects.length; i++) {\n    selects[i].addEventListener('change', function () {\n      setTimeout(function () {\n        initWebsiteCardEmbed();\n      }, 200);\n    });\n  }\n}\n\ninitWebsiteCardEmbed();\ninitSelectThemeListener();\n```\n\n如果你使用的是其他支持夜间模式切换的主题，您也可以参考 `website-card-embed-loveit.js` 来自定义您的颜色模式判断方法。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forionpax1997%2Fwebsite-card-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forionpax1997%2Fwebsite-card-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forionpax1997%2Fwebsite-card-embed/lists"}