【Savor 写味主题】记录应是简单且真实的,值得细细品味

本贴最后更新于 366 天前,其中的信息可能已经天翻地覆

12023120919260620bp0o6.jpg

经历长时间重构,新版写味主题跟大家见面啦,优化大量细节,大幅提升编辑流畅度。在此感谢小伙伴们的支持,也感谢社区大佬们提供技术支持。

👑 简介

这款主题旨在降低界面上一些冗余信息的表达强度,结合了一些优秀软件外观参考和个人对极简美学的诠释。

五种配色随心切换

主题右上角即可切换,明亮模式 3 种配色,暗黑模式 2 种配色

220231209194500v0t1zcy.jpg

🍩 主题特性功能

挖空

主题右上角开启,开启后文档中被标记的文字将会被下划线替换,鼠标悬浮显示,可用于复习。

320231209195458i9pfa9b.jpg

垂直页签

主题右上角开启,开启后页签垂直显示在编辑器左侧,可以展示更多页签。

420231209200006639nd6c.jpg

隐藏顶栏

主题右上角开启,开启后顶栏上浮隐藏,鼠标悬浮在顶部可显示顶栏。

520231209200620b18qosv.jpg

列表子弹线

主题右上角开启,列表以高亮辅助线的形式展现父子关系。(长列表使用可能会有卡顿)

620231209200907z394ajk.jpg

列表折叠悬浮显示

列表折叠后后方出现省略号,鼠标悬浮可以显示折叠内容。

7202312092013533005mub.jpg

鼠标中键折叠展开

鼠标中键点击快速折叠展开【列表】和【标题】。

表格转换

表格 - 块标 - 视图选择切换

820231209202013fj8d23p.jpg

自动宽度换行【默认状态】:表格宽度到达编辑器边缘后不再延伸,单元格内容自动换行。

自动宽度不换行:表格宽度到达编辑器边缘后继续延伸,单元格内容不换行。

页面宽度:表格宽度与编辑器宽度一致,单元格内容换行。

竖向表头:表格表头切换为左侧竖向。

空白表头:表格默认的表头样式跟单元格一致。

列表转换

无序列表、有序列表、任务列表 - 块标 - 视图选择切换

【导图】:简单的的树形导图视图,可满足基础导图使用。

9202312092030535l0xmvr.jpg

【表格】:列表转为表格后,方便引用和搜索定位。

10202312092034508mzd98h.jpg

【看板】:做简单的任务管理。

1120231209203933fbteq4h.jpg

【进度条任务】:仅用于任务列表(无序列表、有序列表无效)

1220231209204247r2ig5ii.jpg

引述转换

引述 - 块标 - 视图选择切换

提供 11 种 callout 样式选择

13202312092054091nxnjvl.jpg

🍵 更多主题外观细节优化

标题提示

每级标题后面都有浅色标记代表该标题的层级。

标题间距

更适合阅读的分段间距,减少信息压力。

文字配色

配色更加柔和,降低页面对比度。

链接图标

增加超链接前小图标。

隐藏底栏

隐藏底部状态栏后依然显示隐藏停靠栏按钮。

搜索页

搜索结果展现所有内容,便于分辨关键信息。

💌 建议反馈

如主题存在一些样式问题,或者对主题有其他想法建议,可在此贴回复反馈,或者通过 github 建 issue 反馈,后面若有新特性也会在本贴更新。

【如果只是点缀,愿当皎洁明月】

  • 思源笔记

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

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

    22721 引用 • 91202 回帖
  • Savor
    20 引用 • 169 回帖 • 1 关注
1 操作
royc1 在 2023-12-09 21:16:50 更新了该帖

相关帖子

优质回帖
  • null1 3 赞同

    引述转换的功能,callout 样式我感觉可以做的更好一点。提点建议:

    1. 图标如果可以选中更换,或者可以自定义颜色和图标
    2. 文本内容样式最好不要有默认标题。有时候引述就是没标题,又不想画蛇添足写一个标题,因为图标完全可以表示我这个引述代表什么意思。毕竟引述本身可以用标题的,现在默认的这个标题压根取消不了。。。
  • leanzhuang 1 赞同

    确实是我心中的最美主题,但是还是比官方主题略卡一些,希望可以继续优化流畅度

  • qianink 1

    image.png这些双链下的虚线与普通文本区分度太低了,复习的时候很不直观,可否增加下辨识度,大佬能不能告诉我怎么自己修改下 😭

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • yre 1 评论

    @royc1 暗黑模式下的四周圆角都有明显的白边,用 CSS 铺满的效果也不太好,希望后续能优化下

    image.png

    应该是不兼容背景插件的问题,后面我优化下
    royc1
  • coder123
    .fn__code,
    .b3-typography code:not(.hljs),
    .b3-typography span[data-type~="code"],
    .protyle-wysiwyg code:not(.hljs),
    .protyle-wysiwyg span[data-type~="code"] {
      padding: 3px 6px;
      color: #3451b2;
      font-size: 0.875em;
      font-family: Consolas, var(--b3-font-family-code);
      transition: color 0.25s, background-color 0.5s;
      vertical-align: 1px;
    }
    
  • tanghexuan

    06-08-24-151835.png

    底栏的框和上面的编辑器分开了,是主题的问题

    1 回复
  • 最近重构部分代码了,等后续更新适配吧

  • GWNLP 1 评论

    你好,很感谢您的主题,但是我在使用的时候有些问题——移动端和 win 的标注配色不一样,因为我会用到移动端查看笔记,但是我在 win 端标注会在移动端改变(比如 红色变成空白), 我该如何调整?

    移动端也使用相同的主题才可以,手机伺服可以打开集市下载
    royc1
  • cocytus

    谢谢

  • shuojie 1 评论

    和“(伪)文档面包屑”插件好像有点冲突……(试了下默认主题没有这个问题

    image.png

    下个版本优化,感谢反馈
    royc1 1
  • shuojie 2 评论

    Savor 的 Emoji 是优化了吗,看了一下默认的,和 Asri 一样,感觉 Asri 的效果更好一些,而且鼠标划过的 emoji 都会变大。(只是感觉 Asri Emoji 的效果更好一点,提议一下

    image.png

    image.png

    Asri 效果 👇

    recording.gif

    新版本内置了 twemoji,其他应该没改,后续再优化吧
    royc1
    @royc1 好的 😊
    shuojie
  • SCHa1 1 评论

    顶栏功能非常新颖!但可惜的是它的易用性还是不足以让它成为一个非常好用的功能。

    • 如图 ①。打开顶栏功能后,放在页面中间的页签,包括页签所在的一整行全部变成了顶栏的形制,看起来过于粗放了。如果在顶栏功能的基础上,使中间的页签像图 ② 统一风格,或使其拥有更纤细的顶栏式风格想必会更好看。

    未命名 SCHa1 思源笔记 v3.1.0202471501540.png

    未命名 SCHa1 思源笔记 v3.1.0202471501828.png

    • 如下图,顶栏合并后页签的宽度是不一样的,页签与页签之间也没有明确的分隔,导致多页签管理的时候会让人很头疼。可以模仿现在的主流浏览器,固定页签长度并使不超出某数量的页签动态调整宽度(如下图 ②)。

    未命名 SCHa1 思源笔记 v3.1.0202471501622.png

    image.png

    • 我注意到顶栏合并开启的同时还有个“展开插件”的小功能。在下载插件之后,某些插件的设置按钮也会作为插件按钮显示在顶栏上,它们用得少却会长久占地方。这个小功能如果能让特定插件显示在顶栏,而其他插件缩进这个小菜单里,想必会非常好用。

    image.png

    我不清楚这些功能的实现难度,只希望作者在开发时能考虑下我的建议。总之感谢作者分享的主题。

    感谢您的反馈,① 为确保页签的一致性,这个暂时先不动了。② 这个宽度后续看看怎么优化一波。③ 可以通过右上角插件图标-取消钉住来隐藏不常用的插件图标,这个收缩插件按钮的功能主要是收缩常用的图标以节省顶栏空间。
    royc1 1
  • ncywq1002 1 评论

    大佬,我使用 css 代码设置了不同级标题的颜色,但是复制 pdf 的标注到标题只能改变大小,颜色没有改变,这个有办法让我设置的标题颜色也生效吗,还有目前的展开插件功能收起插件的时候也显示展开插件

    1、这个只能学相关的 css 知识,跟选择器有关 2、这个文字只能统一了,或者改成收缩/展开
    royc1
  • Afterglow 1 评论

    作者好,Salt 配色在开启顶栏合并之后,额头变成了黑色的字体,白色的填充,看起来很压抑。

    其实我觉得这种配色就还行,鼠标放上去,字体变成了白色的,填充是黑色的;其他页签的字体就比较淡一些。但是现在就是把鼠标移走,当前打开的页签就变成了白色,这个对比真的太明显了,可以恳请作者再修改一下吗?实在是喜欢 Salt 的配色。

    Clip20240720231457.png

    个人认为 Light 那种全白色的额头配色就很好的。

    官方之前也是黑色的额头配白色的页面,后来也改成了白色的额头。这个黑色额头配白色的页签实在是太明显了。
    Afterglow
  • 您好,想请问一下您移动端最底下有一部分灰色,不显示,感觉有点像没有适配全面屏的感觉,官方主题没有这个问题,能找时间优化下吗?谢谢!

  • lisontowind 1 评论

    image

    image

    大大,页签多的时候和插件互相之间会有遮挡,

    这个 issue 我看到的,只是暂时没方法优化,我再研究一下,感谢反馈
    royc1
  • 1668945438 1 评论

    callout 的视图转换好像不见了

    这特性已经取消内置了,插件市场有相关的插件
    royc1
  • sunjs 1 评论

    image.png请问,在 salt 配色下侧边栏怎么像以前一样是黑色的啊?

    这个结构改得比较多,做不了之前的样式
    royc1
  • TGnorman 1 评论

    image.png

    上面是更新后的 emoji 图标,想用以前的老版本,就这个image.png

    因为图标都和文档深入排过版,改变后整个文档都乱糟糟的。

    请问该如何操作恢复?谢谢

    可以把主题文件里面的字体删了
    royc1 1 赞同
  • xiangkun 1 评论

    用了好几年了,有码吗,我想请你喝杯咖啡

    感谢支持,后续版本会更新码
    royc1
  • alishan1010 1 评论

    没有视图选择这个功能该怎么解决

    点击指定的块标才会出现
    royc1
  • alishan1010 1 评论

    已经是列表块,框选右键依然没有视图选择功能

    直接点击块标,右键没有的
    royc1
  • Matttttt 1 赞同

    请问可以修改一下链接的配色吗?链接的配色和正文颜色差不多,看起来不够明显呢 😳

  • 1076002852 4 评论

    image.png

    作者大大你好,想请问下,代码块的颜色没有跟随主题要怎么解决?

    更新到最新版本的软件和主题,检查一下是否有其他代码片段影响
    royc1
    @royc1 都更新到最新了,也没有其他代码片段。目前还是没解决
    1076002852
    @1076002852 或者看看是不是插件影响了?一般全部更新完重启思源就正常
    royc1
    @royc1 我重新安装了一下,现在没问题了
    1076002852
  • TracyQi 1 评论

    作者大大您好,更新到最新版本后,发现了如下 emoji 的显示问题。切换到原生主题后可以正常显示。我又随机测试了几个其它的图标,发现⁉也有同样的问题。不是很想全部替换多篇笔记中使用的该 emoji,所以期待此显示问题可以被解决。十分感谢!

    image.png

    image.png

    感谢反馈,新版本 emoji 默认使用 twemoji,应该是字符顺序出错,下个版本修复
    royc1
  • zwyyy456 9 评论

    主题使用着很舒服,喜欢 sugar 配色,但还是碰到几个小问题:

    1. 双链与普通文本区分度有点低,对于 sugar 配色,只是简单加了下划虚线,不知能否考虑加上背景色?
    2. 我使用的是霞鹜文楷而非主题的默认字体,sugar 配色下,感觉字重似乎略低,且字体加粗很不明显,本身系统中有 regular 字体与对应的 bold 字体的;
    3. dark 配色下,左侧边栏是白色的,看着非常别扭;

    希望作者有空可以调整一下。

    1 回复
    这个 3.左侧边栏白色是啥意思?
    royc1
    @royc1 请问下,sugar 配色下,我怎么才能用回之前的那个,现在这个背景色看这好不习惯啊
    yanyu67
    @royc1 可能是 bug,后面正常了。。。
    zwyyy456 1
    @yanyu67 不太明白,sugar 的配色应该没改过
    royc1 1
    @royc1 就是那个引用,以前是没有背景色的,和链接一样,区别是一个虚线,一个直线
    yanyu67
    @yanyu67 那个是 bug。。现在才是正常的 😅
    royc1 1
    @royc1 我喜欢之前的那个 bug 的显示,请问我怎么才能调回去呢?
    yanyu67
    @yanyu67 .protyle-wysiwyg [data-node-id] span[data-type*="block-ref"]:not([data-type="virtual-block-ref"]):not([data-type*="sup"]):not([data-type*="sub"]):not(.av__celltext--ref) { background-color: transparent; } 加入代码片段
    royc1 1
    @royc1 感谢大佬,可以了
    yanyu67
  • zuohaoyu

    确实,双链与普通文本区分度很低,也是我不用的原因。根本区分不开

  • zwyyy456 1 评论

    图片.png

    请问这个是 bug 了吗?

    浏览器版本还没适配,下个版本修复
    royc1
  • CongSec 1 评论

    这个应该是写味的一个 bug,希望可以修复一下
    为什么我的思源变得怎么丑 - CongSec 的回帖 - 链滴 (ld246.com)

    感谢反馈,这个应该是新版还没适配背景插件,下个版本看能不能适配上
    royc1
  • someone156944 1 评论

    作者你好,我看原版的标签并没有前面的#号,这是这个主题特别加的吗?

    image.png

    还有集市的鼠标悬浮效果的字体是白色,似乎很难看清。

    image.png

    感谢反馈,1、是特意加的,因为突出是标签 2、下个版本修复一下
    royc1
  • 4HSCC 2 评论

    可以把 sugar 的“笔记目录与标题颜色一致”设置为这 5 个主体的通用功能吗?就是可以设置开启“颜色一致”或者不开启,之前卡 bug 卡出来过暗黑主题下也能使目录与标题颜色一致,感觉很好用,对考研知识点整理、复习很有帮助

    但是前两天更新了一次就卡不出来了,所以希望大佬修改一下

    考研复习要长时间盯着电脑屏幕,暗黑模式更加适合友好,并且考研笔记有许多图片和公式需要整理,暗黑模式可读性也更高一些,如果暗黑模式也加入“目录与标题颜色一致”,会使得知识点的逻辑更加清晰

    球球大佬,学生真的很需要这个功能 😭 😭

    你好,请问你指的是大纲前面图标颜色跟标题文字颜色一致么?
    royc1 1
    @royc1 它意思应该是暗黑模式下标题也是跟明亮模式的颜色一致,现在暗黑模式下标题的颜色都是白色的
    keyiming
  • 非常佩服你的更新速度,刚反馈就将问题解决了,👍👍 👍

    为什么我的思源变得怎么丑 - 链滴 (ld246.com)

    但是好像还有一个问题没完善,就是代码块的间隔有点大比较占据笔记空间,我已经关闭所有的插件然后退出思源重新进入还是老样子,希望改善下,期待您的下次更新

    image.png

    image.png

    1 回复
  • 你看看是否有什么代码片段影响了?image.png我这边显示间距没问题

    2 回复
  • 已解决,解决方法是将思源删了重新下载,使用原来的插件也不影响了

    image.png

  • CongSec 1 评论

    image.png之前思源删除在下回来就没有,但是用了几天又出现了

    你看看是不是有什么插件或者代码片段影响吧
    royc1
  • 8F71 1 评论

    能对暗色主题的标题添加颜色区分吗?便于一眼在文中看出各标题的层级

    下面是 dark blue 的文档树,合各级标题在文中的样式:

    image.png

    image.png

    .protyle-wysiwyg .h1{ color:var(--h1-list-graphic); } .protyle-wysiwyg .h2{ color:var(--h2-list-graphic); } .protyle-wysiwyg .h3{ color:var(--h3-list-graphic); } .protyle-wysiwyg .h4{ color:var(--h4-list-graphic); } .protyle-wysiwyg .h5{ color:#b6a277; } .protyle-wysiwyg .h6{ color:var(--h6-list-graphic); } 把上面这些代码加入代码片段就可以
    royc1 1 赞同
  • aleegreat 1 评论

    您好,有两个问题请教一下,麻烦看看是不是 BUG 哈,感谢感谢

    1. 如下图,其他插件的图表显示在最小化、最大化按钮的下方,且与最小化、最大化按钮有一定重叠。禁用插件后现象消失,暂未能定位出是否插件与主题冲突导致
    2. 鼠标移动到关闭按钮上面,关闭按钮没有高亮为红色,且鼠标点击关闭按钮无效(感觉关闭按钮上面有一层遮挡),禁用插件后此现象仍存在

    环境信息:思源版本 3.1.6 Savor 版本 v4.1.9, 无自定义 CSS 和 JS

    插件见截图 2

    图片.png

    图片.png

    1、这是正常的,这个是合并顶栏的样式,因为按钮太多,只能放下面了,还没想到更好的方案。 2、点击多次钉住侧栏会导致下面停靠栏挡住顶栏
    royc1 1
  • ImmortalityGu 1 评论

    请问旧版的 emoji 能换回来吗?不太喜欢新版的那个 twemoji😭

    不换了,我现在只用这个,可以把主题 font 文件夹里面 Twemoji 文件删了。
    royc1
  • Aaron6fl 1 评论

    image.png

    这两滚动条的间距能不能调大点、粗点,想预览 pdf 的时候好费劲,根本点不到最外面的滚动条 🙏

    好的,感谢反馈
    royc1
  • niukou 1 评论

    很喜欢 salt 配色!但是应用之后顶栏一片空白,字体也是白色的,有点难受。翻了翻大家的回帖,好像没有提到这个问题,是不是我这里的问题呢?

    屏幕截图 20241009163255.png

    你好,可以看看是否有代码片段等影响了。
    royc1
  • sy369 1 评论

    image.png

    列表子弹线

    好的,我这边测一下看看能不能复现,感谢反馈
    royc1
  • Floria233

    在这里求助一个 css

    如图,这是 savor 主题现在悬浮框里的引用样式,被引用块虽说有个 logo 标志,但是内容本身和背景色还是挺混,总体有点不清晰。

    希望路过的大佬可以帮忙写个 css,将这个悬浮框的引用样式修改一下——

    引用链接的下划线变成蓝色虚线,引用链接的高亮背景色变成透明蓝色。

    ps:请大大注意,这里不是修改双链样式(如果是这种代码,就会连正向引用链接的样式也被修改)

    而是修改引用悬浮框里的“引用链接”样式。

    image.png

  • tianxia704 1 评论

    建议把顶栏空间利用起来,有些还空着。页签如果多可以挤压

    image.png

    比如 arsi 主题的这种个人觉得美观实用,image.png

    你好,多页签或者窄屏的情况下不好实现,后续想到了其他方案再改进
    royc1
  • Pegasus1zz 1 评论

    你好,非常感解你开发的插件。目前在开启垂直页签功能后,当左右或者上下分屏时,会在重复出现垂直页签栏,请问能否实现合并,只保留一个页签栏呢?最好能够提供一个隐藏的选项,提高分屏时的可视空间。再次感谢!

    刚刚试了下,发现只需要自定义下快捷键把想分屏显示的标签页移到新窗口中就可以了。编辑浏览体验完全没问题,整个操作过程的摩擦不会很大,所以就不用麻烦跟进这个需求了。
    Pegasus1zz 1
  • YunYa 1 评论

    大大您好!非常喜欢这款主题。
    最近使用发现引用的网页链接,没有了 logo,比如 B 站那个蓝色小电视。
    只在此设备上出现,更新、重下都未解决,请问有解决办法嘛?

    你好,这个功能已经取消内置了,集市有插件可以实现
    royc1
  • T1Zi 1 评论

    image.png

    image.png

    麻烦问一下,如果我想修改这个部分的颜色,我应该在哪里修改,第一次用这个软件

    royc1 1
  • Rem15 1 评论

    您好,表格的表头样式似乎出现了显示异常,背景色没有明显的区分

    image.png

    你好,这是默认主题的样式,未作更改,感谢反馈。
    royc1
  • Eponine 1 评论

    喜欢引述转换,但是我的菜单里怎么没有“视图选择”呢?

    1730858177080.png

    你好,callout 功能已经取消内置,但可以从集市插件里下载哦
    royc1
  • charlieshang 1 评论

    请教一下,我这里有一个逻辑符号,应该是 image.png
    这个样子的,但实际在 Savor 中变成了 image.png 这样的了,请问如何修改,这是字体的问题,还是 emoji 的问题?

    是 emoji 字体问题,如果不需要这个字体可以从主题 font 文件夹里面删除
    royc1 1 赞同
  • qingxueqiling

    你好,写味主题最近几个版本的软件提示信息颜色在深色模式下有问题,软件默认主题没有问题,麻烦看一下,以下分别为写味主题的浅色、深色和默认主题的深色截图:20241107215842.png

    20241107215800.png
    20241107215944.png

  • spj888 1 评论

    暗色主题字体纯白色太亮了,有些刺眼,能不能改成灰色的字体

    这个暂时不改了,可以用 css 代码片段自行修改
    royc1
  • zhipianjun

    问问能把把引用的字体改淡一些,不然引用的字体跟正文基本没有差别。比如:这两段根本分不清

    截屏 2024120208.34.44.png

    1 回复
  • YUNSUO

    前面不是有一个竖线么

请输入回帖内容 ...