V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xiaoluoboding
V2EX  ›  分享创造

bookmark.style v0.3.0 发布,支持一键拷贝 SVG 图像到 GitHub README.md 功能

  •  1
     
  •   xiaoluoboding ·
    xiaoluoboding · 2022-10-08 11:29:27 +08:00 · 793 次点击
    这是一个创建于 783 天前的主题,其中的信息可能已经有所发展或是发生改变。

    五个月前发布了一款自用小工具 https://bookmark.style ,获得的反响效果不错,有很多 V 友支持,仓库迄今为止获得 170+ star ,感谢大家支持。

    十一假期,迎来了一次更新,发布了 v0.3.0 版本

    bookmark.style

    bookmark.style 适用于创意工作者,它可以美化你的链接,展示丰富的信息。

    输入链接: https:bookmark.style

    展示内容如下:

    让冰冷的链接看着不再单调,更多细节参见 《 bookmark.style: 你的链接有了新的样式》

    提供渲染 SVG 服务

    这次更新只有一个功能添加,可以一键拷贝可视化 Web Bookmark 到你的 README.md 中,其实这是一个渲染 SVG 服务( Serve SVG as a Service ),idea 源于社区童鞋的一个 issue

    简单点说就是输入一个链接得到一个渲染好的 SVG 图像。

    输入

    https://svg.bookmark.style/api?url=https://bookmark.style&mode=light
    

    生成

    拷贝到 README.md

    在 GitHub 中的 README.md 是可以渲染 SVG 的,所以你可以把它作为一种展示手法放在 README.md 中,加强对链接的展现。

    代码

    拷贝如下代码到你的 README.md 中,即可展示一个渲染好的可视化 Web Bookmark

    [![bookmark.style]( https://svg.bookmark.style/api?url=https://bookmark.style&mode=light)]( https://bookmark.style)
    

    支持 light/dark 模式

    API

    https://svg.bookmark.style/api?url=<URL>&mode=<light|dark>)
    

    范例

    https://svg.bookmark.style/api?url=https://bookmark.style&mode=light
    

    支持自定义渐变颜色

    URL 中的十六进制颜色不能包含 # 字符,所以你可以像这样写 #000000 -> 000000

    Types

    type GradidentColor = {
      formColor: string
      viaColor?: string
      toColor: string
    }
    

    API

    https://svg.bookmark.style/api?url=<URL>&fromColor=<FROM_COLOR>&viaColor=<VIA_COLOR>&toColor=<TO_COLOR>)
    

    范例

    # without viaColor
    https://svg.bookmark.style/api?url=https://bookmark.style&fromColor=f4a&toColor=4fa
    # or with viaColor
    https://svg.bookmark.style/api?url=https://bookmark.style&fromColor=f4a&viaColor=a4f&toColor=4fa
    

    支持两种展示风格 Twitter/Notion

    定义了 style 参数,vertical 代表 Twitter Like ,horizontal 代表 Notion Like

    API

    https://svg.bookmark.style/api?url=<URL>&style=<vertical|horizontal>)
    

    范例

    https://svg.bookmark.style/api?url=https://bookmark.style&style=vertical
    

    参考

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   930 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:56 · PVG 04:56 · LAX 12:56 · JFK 15:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.