登录 注册

[css] 显示钉住文档名并在页签右下角添加一个钉子图标

本贴最后更新于 231 天前，其中的信息可能已经时移俗易

效果如下：

image.png

CSS 代码片段：

/* 显示钉住文档名并在页签右下角添加一个钉子图标 CSS片段 */
/* author by JeffreyChen https://ld246.com/article/1728392178095 */
.layout-tab-bar .item.item--pin .item__text {
    width: auto;
    display: flex !important;
}
.layout-tab-bar .item--pin .item__graphic, .layout-tab-bar .item--pin .item__icon {
    padding: 4px 0 4px 8px;
}
/* 添加一个钉子图标 */
#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly) .item--pin::before {
    content: "📌";
    font-size: 0.8em;
    position: absolute;
    right: 0;
    bottom: 0;
}
​

其他相关

[js] 阻止中键关闭任何页签或钉住的页签

  • 思源笔记

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

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

    25701 引用 • 106322 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    173 引用 • 1202 回帖
2 引用
[css] [js] 思源代码片段插件分享（CongSec 版） • CongSec
[js] 阻止中键关闭任何页签或钉住的页签 • JeffreyChen
8 感谢
3 收藏
1 赞同
2 引用
7 回帖
2
451 147 205 5 94

相关帖子

7 回帖
[css] 显示钉住文档名并在页签右下角添加一个钉子图标

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons • • 1
    付费者 捐赠者

    我改到了左侧

    .layout-tab-bar .item.item--pin .item__text {
    padding-left: 15px;
}
/* 添加一个钉子图标 */
#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly) .item--pin::before {
    content: "📌";
    font-size: 0.8em;
    position: absolute;
    left: 0;
    transform: rotate(-45deg);
}
​

    image.png

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

    你不觉得样式怪怪的吗？

    image.png

    2 回复
  • wilsons •
    付费者 捐赠者

    我一般标题不加图标

  • kikkawa • via macOS
    付费者

    image.png

    感觉小一点就好看了，稍微调小了一点

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

    感觉如果不是用 emoji 而是 svg 的话可以 PR 到思源本体

  • Floria233 • via Android
    付费者

    大大最近真是高产似那个啥 😁，这个很有用

  • HugZephyr •
    付费者

    我该到了右侧

    .layout-tab-bar .item.item--pin .item__text {
    padding-right: 20px;
}
/* 添加一个钉子图标 */
#layouts .layout__center div:not(.fn__none) > .layout-tab-bar:not(.layout-tab-bar--readonly) .item--pin::before {
    content: "📌";
    font-size: 0.8em;
    right: 4px;
    position: absolute;
    transform: rotate(-45deg);
}
​
请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：https://ld246.com/article/1692089679062 爱发电：https://afdian.com/a/JeffreyChen
回帖
9081
 帖子
136
 积分
2130

近期热议

推荐标签 标签

  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖 • 1 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1708 回帖
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 596 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 674 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    229 引用 • 1432 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 34 关注
  • TGIF

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

    291 引用 • 4495 回帖 • 656 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • V2Ray
    1 引用 • 15 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 10 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • 30Seconds

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

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

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 552 关注
  • 禅道

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

    8 引用 • 15 回帖 • 9 关注
  • OpenCV
    15 引用 • 36 回帖 • 5 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 2 关注
  • Q&A

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

    9847 引用 • 44747 回帖 • 83 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 708 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 27 关注
  • React

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

    216 引用 • 291 回帖 • 368 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • Ant-Design

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

    17 引用 • 23 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注

最新标签