登录 注册

[css][js] 思源笔记使用体验增强方案分享

使用了比较久的思源笔记，特分享自己用到现在依旧保留的功能，供尚不熟悉思源笔记的朋友使用。

1 默认 midnight 主题 CSS 调整代码

修改原则是保持默认主题的基调并做适量简化，主要有：

  • 降低默认主题配色的对比度（light 主题没有调整，习惯明亮主题的朋友直接跳过该段）。
  • 微调基础样式，包括标题、特殊块（代码、引用、嵌入），使他们更加统一。
  • 简化了部分 ui，如面包屑和悬浮框的顶栏，可以通过鼠标悬浮重新显示，不影响功能。
  • 修复了一些不太协调的点，比如边框、窗口阴影等，详见代码页。

1.1 预览图

PixPin20250802173816.png

PixPin20250802175143.gif

1.2 代码

1.2.1 默认暗黑主题调整(整合)

:root {
  /* ================= 颜色主题 ================= */
  /* 主色调 */
  --b3-theme-primary: hsl(201, 17%, 60%);
  --b3-theme-primary-light: hsla(201, 17%, 60%, 0.72);
  --b3-theme-primary-lighter: hsla(201, 17%, 60%, 0.48);
  --b3-theme-primary-lightest: hsla(199, 18%, 59%, 0.24);
  --b3-theme-secondary: hsl(220, 47%, 30%);

  /* 背景色 */
  --b3-theme-background: hsl(0, 0%, 12%);
  --b3-theme-editor-background: hsl(0, 0%, 10%);
  --b3-theme-background-light: hsl(0, 0%, 16%);
  --b3-theme-background-lighter: hsl(0, 0%, 28%);

  /* 表面色（侧边栏/工具栏等） */
  --b3-theme-surface: hsl(0, 0%, 13%);
  --b3-toolbar-background: var(--b3-theme-surface);
  --b3-toolbar-blur-background: var(--b3-theme-surface);
  --b3-menu-background: var(--b3-theme-surface);

  /* 文字色 */
  --b3-theme-on-background: hsl(0, 0%, 78%);
  --b3-theme-on-surface: hsl(0, 0%, 75%);
  --b3-protyle-inline-fileref-color: #60e8a0; /* 文件引用颜色 */

  /* 边框色 */
  --b3-border-color: hsl(0, 0%, 16%);
  --b3-border-color-light: hsl(0, 0%, 21%);
  --b3-border-color-lighter: hsl(0, 0%, 30%);
  --b3-theme-in-field-border: hsl(0, 0%, 20%);

  /* 交互状态色 */
  --b3-list-hover: hsla(0, 0%, 55%, 0.12);
  --b3-switch-checked-background: var(--b3-theme-primary-light);

  /* ================= 排版相关 ================= */
  /* 标题字号 */
  --b3-h1-size: 1.25em;
  --b3-h2-size: 1.15em;
  --b3-h3-size: 1.1em;
  --b3-h4-size: 1.05em;
  --b3-h5-size: 1em;
  --b3-h6-size: 1em;

  /* 标题字重 */
  --b3-h1-weight: 600;
  --b3-h2-weight: 600;
  --b3-h3-weight: 500;
  --b3-h4-weight: 500;
  --b3-h5-weight: 500;
  --b3-h6-weight: 400;

  /* 圆角 */
  --b3-border-radius: 6px;
  --b3-border-radius-b: 15px;

  /* ================= 特殊元素样式 ================= */
  /* 代码块 */
  --b3-protyle-code-background: hsl(0, 0%, 10%);

  /* 链接 */
  --b3-protyle-inline-link-color: hsl(201, 17%, 60%);

  /* 引用块 */
  --b3-protyle-inline-blockref-color: hsl(201, 17%, 60%);
  --b3-protyle-inline-blockref-color-hover: hsl(201, 17%, 68%);

  /* 标记 */
  --b3-protyle-inline-mark-background: hsla(33, 100%, 66%, 0.3);
  --b3-protyle-inline-mark-color: var(--b3-theme-on-background);
  --b3-protyle-inline-tag-color: var(--b3-theme-on-surface);

  /* ================= 视觉效果 ================= */
  /* 阴影 */
  --b3-dialog-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.5),
    0 4px 12px hsla(0, 0%, 0%, 0.75);
  --b3-button-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1);

  /* ================= 字体设置 ================= */
  --b3-font-family: "Microsoft Yahei UI", "Microsoft Yahei", "Helvetica Neue",
    "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "sans-serif",
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol",
    "Android Emoji", "EmojiSymbols", system-ui;
  --b3-font-family-protyle: "Microsoft Yahei UI", "Microsoft Yahei", sans-serif;
  --b3-font-family-code: "Cascadia Code", "Microsoft Yahei UI", "mononoki",
    "Consolas", "Liberation Mono", "Menlo", "Courier", "monospace",
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol",
    "Android Emoji", "EmojiSymbols", monospace;
  --b3-font-family-math: "KaTeX_Math", "KaTeX_Main", math;
  --b3-font-family-emoji: "Twemoji Mozilla", "Segoe UI Emoji", "Segoe UI Symbol",
    "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", emoji;
}

/* ================= 基础样式 ================= */
.fn__flex-1 {
  font-size: 15px;
} /* 侧边栏、标签页字体基本大小 */

.b3-list-item__text {
  color: var(--b3-theme-on-surface) !important;
  font-size: 1em !important;
} /* 侧边栏列表文字颜色 */

/* ================= 图片处理 ================= */
.img .protyle-action__title {
  font-size: 0.8em !important;
} /* 图片名称字体减小 */
.protyle-wysiwyg .img {
  opacity: 0.65;
  transition: opacity 0.25s linear;
} /* 降低图片的亮度 */
.protyle-wysiwyg .img:hover {
  opacity: 1;
} /* 鼠标指向图片的时候变亮 */

/* ================= 块元素样式 ================= */
/* 引用块 */
.protyle-wysiwyg
  [data-node-id]
  span[data-type~="block-ref"]:not(.av__celltext) {
  color: var(--b3-protyle-inline-blockref-color);
  opacity: 1 !important;
} /* 引用块文字颜色 */
.protyle-wysiwyg
  [data-node-id]
  span[data-type~="block-ref"]:not(.av__celltext):hover {
  color: var(--b3-protyle-inline-blockref-color-hover);
  text-decoration: underline;
} /* 引用块鼠标悬停颜色 */
.protyle-wysiwyg [data-node-id] span[data-type~="block-ref"]::before,
.protyle-wysiwyg
  [data-node-id]
  span[data-type~="block-ref"][data-subtype="s"]::before {
  content: "｢";
} /* 引用块前缀 */
.protyle-wysiwyg [data-node-id] span[data-type~="block-ref"]::after,
.protyle-wysiwyg
  [data-node-id]
  span[data-type~="block-ref"][data-subtype="s"]::after {
  content: "｣";
} /* 引用块后缀 */

/* 嵌入块 */
.render-node[data-type="NodeBlockQueryEmbed"] {
  background-color: var(--b3-theme-editor-background) !important;
  border: 1px solid var(--b3-border-color) !important;
  border-radius: var(--b3-border-radius) !important;
  box-shadow: var(--b3-button-shadow) !important;
} /* 嵌入块背景色、边框、圆角、阴影 */
.protyle-wysiwyg
  [data-node-id].render-node[data-type="NodeBlockQueryEmbed"]
  > .protyle-wysiwyg__embed {
  -webkit-user-modify: read-only;
  border-top: 2px dashed transparent;
  border-image: repeating-linear-gradient(
      to right,
      var(--b3-border-color-lighter) 0,
      var(--b3-border-color-lighter) 4px,
      transparent 4px,
      transparent 8px
    )
    1;
  position: relative;
} /* 嵌入块内容样式 */
.render-node[data-type="NodeBlockQueryEmbed"]::before {
  content: "";
  background-color: var(--b3-border-color-lighter);
  width: 2px;
  border-radius: var(--b3-border-radius);
  position: absolute;
  left: 2px;
  top: 6px;
  bottom: 6px;
} /* 嵌入块左侧竖线 */

/* 代码块 */
.code-block {
  color: var(--b3-theme-on-surface) !important;
  background: var(--b3-theme-editor-background) !important;
  margin-bottom: 2px !important;
  border-radius: var(--b3-border-radius) !important;
  box-shadow: var(--b3-button-shadow) !important;
} /* 代码块背景色、边框、圆角、阴影 */
div:not(#preview) > .protyle-wysiwyg .code-block .hljs {
  max-height: 300px !important;
} /* 代码块最大高度 */
.protyle-icon {
  color: #ffffff !important;
  background: hsl(0, 0%, 2%) !important;
} /* 代码块图标颜色、背景色 */

/* 引述块 */
.protyle-wysiwyg .bq:before {
  background-color: var(--b3-theme-background-lighter) !important;
} /* 引用块背景色 */
.protyle-wysiwyg .bq {
  color: var(--b3-theme-on-surface) !important;
  background-color: var(--b3-theme-editor-background) !important;
  font-size: 0.9em;
  box-shadow: var(--b3-button-shadow) !important;
} /* 引用块文字颜色、背景色、字号、阴影 */

/* ================= 行内元素样式 ================= */
/* 行内代码 */
.protyle-wysiwyg span[data-type~="code"] {
  border-radius: var(--b3-border-radius);
  background-color: var(--b3-protyle-code-background);
  border: 1px solid var(--b3-border-color-light);
} /* 行内代码背景色、边框、圆角 */

/* 链接 */
.protyle-wysiwyg [data-node-id] span[data-type~="a"]:hover {
  color: var(--b3-protyle-inline-blockref-color-hover) !important;
} /* 链接鼠标悬停颜色 */
.protyle-wysiwyg [data-node-id] span[data-type~="a"]::before {
  content: "<";
} /* 链接前缀 */
.protyle-wysiwyg [data-node-id] span[data-type~="a"]::after {
  content: ">";
} /* 链接后缀 */

/* 标签 */
.protyle-wysiwyg [data-node-id] span[data-type~="tag"]::before {
  content: "#" !important;
} /* 标签前缀 */
.protyle-wysiwyg [data-node-id] span[data-type~="tag"] {
  border: unset !important;
  color: var(--b3-protyle-inline-tag-color);
  background-color: var(--b3-border-color-light) !important;
} /* 标签背景色、边框 */

/* 快捷键 */
.protyle-wysiwyg span[data-type~="kbd"] {
  font: var(--b3-font-family-code);
  color: var(--b3-theme-on-background);
  background-color: var(--b3-theme-surface);
  border: var(--b3-border-color-light) solid 1px !important;
  border-radius: var(--b3-border-radius);
} /* 快捷键背景色、边框、圆角 */

/* 下划线 */
.protyle-wysiwyg span[data-type~="u"] {
  border-bottom: unset;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #bc1c1c;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
} /* 下划线样式 */

/* ================= 表格样式 ================= */
table {
  background-color: var(--b3-theme-surface) !important;
  border: 1px solid var(--b3-border-color) !important;
  font-size: var(--b3-h6-size) !important;
  font-weight: var(--b3-h6-weight) !important;
} /* 表格背景色、边框、字号、字重 */
thead {
  background-color: var(--b3-theme-editor-background) !important;
  font-size: var(--b3-h3-size) !important;
  font-weight: var(--b3-h3-weight) !important;
} /* 表头背景色、字号、字重 */

/* ================= 表单元素 ================= */
/* 输入框 */
.b3-text-field {
  box-shadow: var(--b3-button-shadow) !important;
  border: 1px solid var(--b3-border-color-light) !important;
  background-color: var(--b3-theme-editor-background) !important;
} /* 输入框背景色、边框、阴影 */
.b3-text-field:not(.b3-text-field--text):focus {
  border: 1px solid var(--b3-theme-background-lighter) !important;
} /* 输入框聚焦时边框颜色 */
textarea {
  min-height: auto;
} /* 文本区域最小高度 */
.b3-dialog__container textarea {
  min-height: 288px;
} /* 对话框文本区域最小高度 */

/* 下拉菜单 */
.b3-select {
  box-shadow: var(--b3-button-shadow) !important;
  background-color: var(--b3-theme-background-light) !important;
  color: var(--b3-theme-on-surface) !important;
} /* 下拉菜单背景色、阴影、文字颜色 */
.b3-select:focus {
  background-color: var(--b3-theme-surface-lighter) !important;
} /* 下拉菜单聚焦时背景色 */
.b3-select:hover {
  box-shadow: var(--b3-button-shadow) !important;
  background-color: var(--b3-theme-surface-lighter) !important;
} /* 下拉菜单悬停时背景色 */

/* 按钮 */
.b3-button {
  box-shadow: var(--b3-button-shadow) !important;
  background-color: var(--b3-theme-background-light) !important;
  color: var(--b3-theme-on-surface) !important;
} /* 按钮背景色、阴影、文字颜色 */
.b3-button:hover {
  box-shadow: var(--b3-button-shadow) !important;
  background-color: var(--b3-theme-surface-lighter) !important;
  color: var(--b3-theme-on-background) !important;
} /* 按钮悬停时背景色、文字颜色 */
.b3-button:focus {
  background-color: var(--b3-theme-surface-lighter) !important;
} /* 按钮聚焦时背景色 */
.b3-button--outline {
  background-color: var(--b3-theme-surface) !important;
} /* 按钮轮廓样式背景色 */

/* ================= 标题样式 ================= */
.protyle-title__input {
  font-size: calc(var(--b3-h1-size) * 1.4) !important;
  font-weight: var(--b3-h1-weight) !important;
} /* 文档标题字体大小、字重 */
.h1 {
  font-size: var(--b3-h1-size) !important;
  font-weight: var(--b3-h1-weight) !important;
}
.h2 {
  font-size: var(--b3-h2-size) !important;
  font-weight: var(--b3-h2-weight) !important;
}
.h3 {
  font-size: var(--b3-h3-size) !important;
  font-weight: var(--b3-h3-weight) !important;
}
.h4 {
  font-size: var(--b3-h4-size) !important;
  font-weight: var(--b3-h4-weight) !important;
}
.h5 {
  font-size: var(--b3-h5-size) !important;
  font-weight: var(--b3-h5-weight) !important;
}
.h6 {
  font-size: var(--b3-h6-size) !important;
  font-weight: var(--b3-h6-weight) !important;
}

/* 标题级别标记 */
div[data-subtype^="h1"]:not([type]) > div:first-child:after,
div[data-subtype^="h2"] > div:first-child:after,
div[data-subtype^="h3"] > div:first-child:after,
div[data-subtype^="h4"] > div:first-child:after,
div[data-subtype^="h5"] > div:first-child:after,
div[data-subtype^="h6"] > div:first-child:after {
  font-size: 0.65em;
  opacity: 0.4;
} /* 标题级别标记字体大小、透明度 */
div[data-subtype^="h1"]:not([type]) > div:first-child:after {
  content: " 1";
}
div[data-subtype^="h2"] > div:first-child:after {
  content: " 2";
}
div[data-subtype^="h3"] > div:first-child:after {
  content: " 3";
}
div[data-subtype^="h4"] > div:first-child:after {
  content: " 4";
}
div[data-subtype^="h5"] > div:first-child:after {
  content: " 5";
}
div[data-subtype^="h6"] > div:first-child:after {
  content: " 6";
}

/* ================= 界面元素 ================= */
/* 标签页 */
.item--focus {
  background-color: var(--b3-theme-background) !important;
} /* 标签页选中时背景色 */
.layout-tab-bar .item--unupdate:not(.item--pin),
.layout-tab-bar .item--readonly {
  background-color: var(--b3-theme-surface) !important;
} /* 标签页未更新或只读时背景色 */

/* 文件树 */
.b3-list-item__icon {
  display: none;
} /* 文件树图标隐藏 */
.b3-list-item--focus {
  background-color: var(--b3-theme-background-lighter) !important;
  color: var(--b3-theme-on-background) !important;
} /* 文件树选中时背景色、文字颜色 */
.b3-list-item__text:hover {
  color: #ffffff !important;
} /* 文件树鼠标悬停时文字颜色 */
.b3-list-item__graphic {
  display: none;
} /* 文件树图标隐藏 */

/* 侧边栏 */
.layout--float {
  min-height: auto;
  max-height: auto;
  min-width: 360px;
} /* 侧边栏最小高度、最大高度、最小宽度 */
.layout--float.layout__dockr,
.layout--float.layout__dockl {
  box-shadow: var(--b3-dialog-shadow);
} /* 侧边栏阴影 */
.dock__item--active {
  background-color: var(--b3-theme-background-lighter) !important;
} /* 侧边栏选中项背景色 */

/* 设置面板 */
.config__panel > .b3-tab-bar {
  color: var(--b3-theme-on-surface) !important;
  background-color: var(--b3-theme-surface) !important;
  border-right: 1px solid var(--b3-border-color) !important;
} /* 设置面板标签栏颜色、背景色、边框 */
.b3-label__text {
  color: hsl(0, 0%, 60%) !important;
} /* 设置面板标签文字颜色 */

/* ================= 功能增强 ================= */

/* 搜索筛选按钮简化 */
.b3-chip--middle .b3-chip__close {
  opacity: 0;
  transition: opacity 0.3s ease;
} /* 搜索筛选按钮关闭图标隐藏 */
.b3-chip--middle:hover .b3-chip__close {
  opacity: 1;
} /* 鼠标悬停时显示关闭图标 */

/* 分隔线样式 */
.protyle-wysiwyg [data-node-id].hr > div::after {
  background-color: var(--b3-theme-background-lighter);
} /* 分隔线色 */

/* ================= 问题修复 ================= */
/* 标注栏修复 */
.protyle-font > *:not(:nth-child(6), :nth-child(7)):not(:last-child) {
  display: none;
} /* 隐藏标注栏中不必要的元素 */

/* 让文档的浏览体验更加顺滑 */
/* .protyle-wysiwyg {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  overflow-y: auto;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
} */ /* 防止滚动条跳动 */

/* 滚动条修复 */
.protyle-scroll {
  position: unset;
  display: none;
} /* 隐藏块定位滚动条 */
::-webkit-scrollbar-thumb {
  cursor: default;
} /* 编辑区滚动条样式 */
::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
} /* 鼠标悬停时编辑区滚动条变为手指光标 */

/* 列表块修复 */
.protyle-wysiwyg
  [data-node-id].li
  > .protyle-action
  ~ [data-type="NodeHeading"] {
  line-height: calc(var(--b3-font-size-editor) * 1.625) !important;
} /* 列表块标题行高 */
.protyle-wysiwyg [data-node-id].li > [data-node-id] {
  margin-left: 24px;
} /* 列表块子元素左边距 */

/* 集市搜索栏修复 */
.config-bazaar__title {
  backdrop-filter: unset;
  background: var(--b3-theme-background);
} /* 集市搜索栏背景色 */

/* 滑动按钮隐藏 */
.b3-slider {
  display: none !important;
} /* 隐藏滑动按钮 */

下面是一些过于个性化的功能:

1.2.2 顶栏合并, 推荐 3.1 的 js 版顶栏融合.

:root {
    --QYL-wnd-border-none: none; 
    --QYL-wnd-container-border-flat: 1px solid var(--b3-theme-surface-lighter); 
    --QYL-wnd-container-border-ink: 1.5px solid var(--b3-theme-primary);
}
#toolbar {
    background-color: transparent;
    border-bottom-color: transparent;
    margin-bottom: -38px;
    pointer-events: none;
    z-index: 5;
    -webkit-app-region: drag;
    app-region: drag;
}
#toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
#drag {
    opacity: 0;
}
:root {
    --QYL-FusionOn-Top-Transform: translateY(-1.5px);
    --QYL-FusionOn-Not-Top-Transform: translateY(-2.5px);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"] > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Top-Transform);
}
.layout__center :is(.fn__flex-1, .fn__flex, .fn__flex-column) [data-type="wnd"]:not(.QYLFusionTop) > .fn__flex:first-child {
    transform: var(--QYL-FusionOn-Not-Top-Transform);
}
.layout__center {
    padding-top: 3.75px;
    box-sizing: border-box;
    &#layouts {
        padding-top: 3.75px;
    }
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar {
    background-color: transparent;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar [data-type="tab-header"] {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly {
    max-width: 80px;
    -webkit-app-region: drag;
    app-region: drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly :is([data-type="new"], [data-type="more"]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child + .layout-tab-container {
    border-radius: var(--b3-border-radius);
}
#layouts.layout__center [data-type="wnd"] > :is(.fn__flex-column, .fn__flex-1, .fn__flex):first-child {
    -webkit-app-region: drag;
    app-region: drag;
    & > .layout-tab-bar.layout-tab-bar--readonly {
        max-width: 80px;
    }
}
.toolbar__window {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child.fn__none + .layout-tab-container {
    height: calc(100% - 34px);
    margin-top: 34px;
}
#dockLeft {
    padding-top: 38px;
}
#dockRight {
    padding-top: 38px;
}
:is(.layout__dockl, .layout__dockr):not(.layout--float)  {
    padding-top: 38px;
    min-height: 50%;
}
#layouts .layout__resize.layout__resize--lr {
    clip-path: inset(38px 0 0 0 round var(--b3-border-radius));
}
#layouts .layout--float.layout__dockb .layout__resize.layout__resize--lr {
    clip-path: none;
}
.QYLFusionTop > .fn__flex:first-child {
    transition: 0.45s cubic-bezier(0.33, 1.42, 0.69, 0.99);
}

/* 修复占据左右两边的空间 */
#toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
    opacity: 0;
    transition: opacity 0.3s ease;
} /* 默认隐藏 */
#toolbar:hover .toolbar__item {
    opacity: 1;
} /* 鼠标移到 toolbar 区域时显示 */


作者：HugZephyr
链接：https://ld246.com/article/1754653136440/comment/1754668885006#comments](https://ld246.com/article/1754653136440/comment/1754668885006#comments

1.2.3 隐藏面包屑, 鼠标指向面包屑区域的时候自动展开, 不影响其功能.


/*面包屑*/
.protyle-breadcrumb {
  background-color: var(--b3-theme-surface);
  opacity: 0;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out,
    min-height 0.5s ease-in-out;
} /* 面包屑背景色、透明度、最小高度 */
.protyle-breadcrumb:hover {
  opacity: 1;
  height: auto;
  min-height: auto;
  overflow: visible;
} /* 鼠标悬停时面包屑显示 */

PixPin20250813115253.gif

1.2.4 引用块悬浮窗口顶栏优化

/* 引用块悬浮面板顶栏 */
.block__popover > .block__icons {
  opacity: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out,
    min-height 0.5s ease-in-out;
} /* 引用块悬浮面板图标隐藏 */
.block__popover:hover > .block__icons {
  opacity: 1;
  height: auto;
  min-height: auto;
  overflow: visible;
} /* 鼠标悬停时显示图标 */
.block__popover {
  box-shadow: var(--b3-dialog-shadow) !important;
  border-radius: var(--b3-border-radius-b) !important;
  max-height: 550px !important;
  max-width: 670px !important;
} /* 引用块悬浮面板阴影、圆角、最大高度、最大宽度 */

PixPin20250813115137.gif

2 链滴论坛暗黑主题

图片.png

3 增强使用体验的 JS 代码

这部分功能为其他作者开发，故提供帖子链接。

先推荐一个大佬做的脚本: 点击打开脚本集链接.

3.1 顶栏融合 js 版

PixPin20250813104426.gif

3.2 窗口宽度自适应变化

PixPin20250802165012.gif

3.3 双击隐藏侧边栏

PixPin20250813104629.gif

3.4 alt+ 单击图片打开本地图片编辑器

可修改启动的应用为其他编辑器: 如 Photoshop\Paint.NET

PixPin20250802170201.gif

3.5 shift + click 使用默认的图片查看器打开图片

PixPin20250813105302.gif

3.6 在顶栏添加按钮，快捷打开代码片段界面

PixPin20250802170707.gif

3.6.1 更推荐使用集市插件_代码片段管理器

PixPin20250809172823.gif

3.7 打开思源后默认折叠文档树

3.8 文档树 shift+click 多选文档

3.9 彻底解决引用失效的问题

必装的功能，可以放心剪切移动被引用过的块，不用再担心失效的问题。

PixPin20250802184742.gif

3.10 一键查看引用块：点击反链即可跳转

配套 3.9 使用, 引用功能的体验大大增强.

4 生成链接的工具

4.1 生成电脑文件链接：思源笔记 +everything 链接本地文件

PixPin20250802171314.gif

4.2 生成视频精准空降链接： 一键添加视频时间节点到笔记软件中：markdown2potplayer

图片.png

4.3 生成 PDF 标注链接：和思源实现双向链接的 pdf 阅读器：BOOKXNOTE

目前发现的唯一能和思源实现双向链接的 pdf 阅读器，即可在思源笔记中插入 bookxnote 中 pdf 的标记链接，也可在 bookxnote 中插入思源笔记的链接（会员功能）。

PixPin20250802173236.gif

  • 思源笔记

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

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

    28442 引用 • 119756 回帖
  • 代码片段

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

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

    285 引用 • 1984 回帖
3 引用
求外观分隔线的加粗代码，亦或者 qyl 主题的墨水屏代码 • ldzh
如何能隐藏页签和面包屑？将 QYL 主题的功能单独提取出来 • Adaxi
请教本地 PDF 链接如何指向具体的页码 • Adaxi
16 操作
Adaxi 在 2025-08-13 11:56:32 更新了该帖
Adaxi 在 2025-08-13 11:55:09 更新了该帖
Adaxi 在 2025-08-12 00:29:44 更新了该帖
Adaxi 在 2025-08-09 17:43:24 置顶了该帖 Adaxi 在 2025-08-09 17:28:55 更新了该帖 Adaxi 在 2025-08-09 17:22:19 更新了该帖 Adaxi 在 2025-08-02 18:55:32 更新了该帖 Adaxi 在 2025-08-02 18:48:34 更新了该帖 Adaxi 在 2025-08-02 18:00:26 更新了该帖 Adaxi 在 2025-08-02 17:56:21 更新了该帖 Adaxi 在 2025-08-02 17:40:42 更新了该帖 Adaxi 在 2025-08-02 17:35:39 更新了该帖 Adaxi 在 2025-08-02 15:34:52 更新了该帖 Adaxi 在 2025-08-02 13:54:03 更新了该帖 Adaxi 在 2025-07-29 15:05:24 更新了该帖 JeffreyChen 在 2025-07-28 12:23:40 更新了该帖
6 感谢
2 关注
12 收藏
1 赞同
3 引用
16 操作
5 回帖
625 459 2 2 162

相关帖子

5 回帖
[css][js] 思源笔记使用体验增强方案分享

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
Adaxi
回帖
239
 帖子
76
 积分
1875