登录 注册

[已解决] 求 css 把 bookxnote 外链图标去掉

本贴最后更新于 284 天前，其中的信息可能已经斗转星移

原贴：目前我用 bookxnote 和思源联动，真的巨巨巨好用，但是这密密麻麻的外链图标（就是那个蓝蓝的圆圆的图标）看得人压力有点大了，主要是不好看，有没有 css 代码能把这个去掉呀

[已经解决啦，感谢评论区几位大佬，有相同困扰的可以看一下评论区，两种 css 都可以使用，全主题适配]

Clip20240306143318.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23019 引用 • 92593 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8448 引用 • 38488 回帖 • 155 关注
1 操作
yunyunyun 在 2024-03-13 14:59:39 更新了该帖
温州 位置
20 悬赏
1 关注
1 收藏
1 操作
25 回帖
13
5
2
2
663 180 9 454 15 1

相关帖子

被采纳的回答
  • JeffreyChen • • 1 赞同
    付费者 支持者 捐赠者

    试试用这个 CSS 代码片段能不能覆盖：

    /* bookxnote */
.protyle-wysiwyg [data-node-id] span[data-type~='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]::before,
.b3-typography a[href^="bookxnotepro://"]::before {
    content: "" !important;
    background-image: url('') !important;
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.b3-typography a[href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]:not(:empty)::before {
    display: initial !important;
    position: static !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    margin-right: 0 !important;
}

    备忘：

    https://github.com/royc01/notion-theme/blob/main/style/custom/link-icon.css#L565C1-L571C2

    https://github.com/royc01/notion-theme/blob/main/style/custom/link-icon.css#L2C1-L13C2

25 回帖
[已解决] 求 css 把 bookxnote 外链图标去掉

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • mozhu •
    订阅者 付费者 支持者 捐赠者

    主题或者插件的话直接去删了，默认应该没有的吧

    1 回复
  • yunyunyun •
    作者

    这个相当于链接，链接自带了图标，有些主题可以把这个图标去掉，有些还在，所以想求一下能够去掉的 css

  • cxg318 •

    bookxnote，是什么东西

    1 回复
  • temacc0531 •

    你这个是主题带的吧

    1 回复
  • yunyunyun •
    作者

    可以看一下这个：[思源笔记经验分享] 使用 Quicker 快速建立 BookxNote 与思源笔记之间的双向链接 - 链滴
    [思源笔记经验分享] 使用 Quicker 快速建立 BookxNote 与思源笔记之间的双向链接

  • yunyunyun •
    作者

    不是，默认就有的，有些主题会调整或去掉

  • JeffreyChen •
    付费者 支持者 捐赠者

    看着很像是这个插件的功能，如果是的话可以自己稍微改一下插件的代码：

    image.png

    1 回复
  • mark-j • • 1
    付费者

    如果你是 savor 这个主题，可以去主题文件夹image.png删除代码

    1 回复
  • mark-j •
    付费者

    image.png也可以输入一个 *，如图效果

  • yunyunyun •
    作者

    我没有下载这个插件呜呜，之前检查过了，没有下任何图标相关的插件

  • yunyunyun •
    作者

    好的好的谢谢我去试试看！我图上的确是写味主题，但是还有其他主题也会有这个效果，如果一个个改有点麻烦，每个主题的情况也不太一样，我就想着用 css 直接一键去掉，不知道能不能实现 TT

    1 回复
  • JeffreyChen • • 1 赞同
    付费者 支持者 捐赠者

    试试用这个 CSS 代码片段能不能覆盖：

    /* bookxnote */
.protyle-wysiwyg [data-node-id] span[data-type~='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]::before,
.b3-typography a[href^="bookxnotepro://"]::before {
    content: "" !important;
    background-image: url('') !important;
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.b3-typography a[href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]:not(:empty)::before {
    display: initial !important;
    position: static !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    margin-right: 0 !important;
}

    备忘：

    https://github.com/royc01/notion-theme/blob/main/style/custom/link-icon.css#L565C1-L571C2

    https://github.com/royc01/notion-theme/blob/main/style/custom/link-icon.css#L2C1-L13C2

    2 回复
    2 引用
    3 操作
    JeffreyChen 在 2024-03-13 14:48:23 更新了该回帖
    JeffreyChen 在 2024-03-13 14:26:06 更新了该回帖
    JeffreyChen 在 2024-03-13 13:45:21 更新了该回帖
  • yunyunyun •
    作者

    好的非常感谢！我去试试看！

  • yunyunyun •
    作者

    非常感谢，图标已经顺利被隐藏了！！我还想问一下，隐藏过后中间原本图标的地方是被空出来的，请问有没有办法把空格去掉呢？就跟其他主题一样Clip20240313132605.png

    1 回复
  • pakeh2866 •
    付费者

    提供一个.sy 我试试

    2 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    我更新了原先的回帖，你再试试新的代码片段

    1 回复
  • yunyunyun • • 1 评论
    作者

    我试了一下，好像还是不行诶

    你上传文档我看看
    JeffreyChen •
  • yunyunyun •
    作者

    不好意思我是个小白，不太明白意思，可以具体说一下提供什么，如何提供嘛 😭 😭

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    在文档树上点击文档右边的三个点「更多」，然后导出.sy.zip

    image.png

    1 回复
  • yunyunyun •
    作者

    感谢，已导出任意一页，里面包含 bookxnote 链接，麻烦你了！🙏 传播过程模式.sy.zip

    1 回复
  • yunyunyun •
    作者

    你好，我已导出任意一页，里面包含 bookxnote 链接，麻烦你了！🙏 传播过程模式.sy.zip

  • JeffreyChen •
    付费者 支持者 捐赠者

    我又更新了原先的回帖，现在的代码片段应该可以了。（之前的漏了几个字母）

    1 回复
  • pakeh2866 • • 2 • 1 赞同 • 1 评论
    付费者 
    /* bookxnote */
.protyle-wysiwyg [data-node-id] span[data-type~='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]::before,
.b3-typography a[href^="bookxnotepro://"]::before {
    content: none;
    background-image: none;
}
    1 回复
    这个更好
    JeffreyChen •
  • yunyunyun •
    作者

    非常感谢！我试了一下效果非常好，而且所有主题都适配，非常感谢！！

  • yunyunyun •
    作者

    谢谢大佬，我刚刚试了一下非常有用！！

请输入回帖内容 ...
yunyunyun
温州
回帖
20
 帖子
4
 积分
378

近期热议

推荐标签 标签

  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    288 引用 • 4485 回帖 • 663 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 483 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 4 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 101 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 370 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 394 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1737 回帖 • 1 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 5 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖
  • sts
    2 引用 • 2 回帖 • 196 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    30 引用 • 96 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 49 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖 • 1 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 3 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 158 关注
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 491 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    27 引用 • 225 回帖 • 162 关注

最新标签