登录 注册

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

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

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

Clip20240306143318.png

  • 思源笔记

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

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

    19839 引用 • 76035 回帖
  • Q&A

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

    6897 引用 • 31121 回帖 • 227 关注
1 操作
yunyunyun 在 2024-03-13 14:59:39 更新了该帖
温州 位置
20 悬赏
1 关注
1 收藏
1 操作
25 回帖
13
5
2
2
414 160 9 226 15

相关帖子

被采纳的回答
  • 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

近期热议

推荐标签 标签

  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 437 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 147 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 383 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 25 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 16 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    379 引用 • 1221 回帖 • 589 关注
  • Q&A

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

    6897 引用 • 31121 回帖 • 227 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 531 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 工具

    子曰：“工欲善其事，必先利其器。”

    280 引用 • 715 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 608 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 195 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 431 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 444 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 442 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    324 引用 • 1395 回帖 • 2 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 699 关注
  • Ant-Design

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

    17 引用 • 23 回帖 • 6 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 59 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 142 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 355 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    25 引用 • 83 回帖 • 2 关注

最新标签