分享一个平时自用的思源笔记埃及主题

文件

主题文件在这里

起源

我有一个平时自用的思源笔记埃及主题,最近一段时间都没有怎么改动过,感觉可以拿出来分享一下了。

image.png

我做这个思源笔记主题主要是出于以下原因:

1、各类编辑器和笔记软件我用了个遍,大部分笔记软件的大部分主题做来做去还是在复刻代码编辑器那一套东西,比如 Dracula、Solarized 之类的,这些主题确实经典,但笔记类软件上没有发展出笔记独有的主题风格。我想做一套稍微有点人文气息的主题,让笔记软件自成一派、不要一直活在代码编辑器的阴影里。

2、我在思源笔记上实践 daily notes 流程,而现有的思源三方主题都不是特别注重这个场景。为了在使用思源笔记的时候用得更舒服,也为了不被三方集市卡脖子,我觉得需要自己做一个专门为 daily notes 设计的主题。

所以就做了这个埃及主题,毕竟我比较喜欢埃及元素。

虽然做主题的时候也从其它集市主题里抄了很多现成的东西,但是这种风格应该是独有的,而且在全世界所有笔记软件上都找不到类似物,将来估计也很难会有模仿者。

这个主题没有上架到思源集市,因为我不想承担为别人服务的责任,这也是思源集市里的三方贡献者们比我强的地方。

接下来大致介绍一下我设计这个主题时的一些考虑。

颜色

这个主题用到的颜色都是一些古代技术能调配出的颜色(比如朱砂)或者自然界里有的颜色(绿松石) :

    --emerald: #12674A; /* 祖母绿 */
    --emerald-rgba: rgba(18,103,74, 0.5);
    --cinnabar: #F75431; /* 朱砂 */
    --egyptian-blue: #1034A6; /* 埃及蓝 */
    --papyrus: #f5edd6; /* 莎草纸色 */
    --wood: #DEB887; /* 原木色 */
    --wood-rgba: rgba(222,184,135, 0.15);
    --lead-white: #dcdbd6; /* 铅白色 */
    --gold: #FFD700; /* 黄金色 */
    --sky-blue: #87CEEB; /* 天蓝色 */
    --turquoise: #30d5c8; /* 绿松石色 */
    --ocher: #845A33;  /* 赭石色 */

整个界面的主体基调是莎草纸色和原木色,重要元素的颜色都选用了比较鲜艳的颜色来强调,比如一些滑块和按钮用了祖母绿增强实体感,一些无实体的界面元素(比如被引用数字提示)用了朱砂。

点阵纸背景

编辑器的主色是莎草纸色,比纯白背景和绝大部分暗色背景更护眼,同时加上了不太明显的点阵。

我猜这里的绝大部分人不太了解手账圈,其实现在重度玩家基本没人用横线本,方格本有一部分人用,而点阵纸是显学。

究其原因,束缚性太强的横线本与方格本并不利于自由发挥,而且个人笔记并不需要规整的排版。对个人手账来说,点阵本在规整与自由之间达到了一个比较好的平衡,所以被更多人喜爱,BUJO 的官方示例也是点阵纸。(话虽如此,平时在文具店里还是很少见到点阵纸)

image.png

字体相关

试了很多字体,感觉还是霞鹜文楷的综合效果最好。但是我在上传文件的时候还是在 src 目录里保留了别的字体文件,可以改成别的字体试试效果。

我最喜欢的墨水是百利金的土耳其蓝和皇家蓝墨水,但是在这个埃及主题里那两个颜色和莎草纸色不是很搭,而且它们太抢眼会干扰其它软件元素的显示,所以字体颜色使用了暗岩灰。(其实我还从来没买过暗岩灰的墨水)

另外这个主题缩小了行高,让同样的屏幕高度能展示更多的内容。思源集市里的主题好像都没做这件事,反正我个人感觉默认行高太大了。

隐藏题头图和顶部标题

在思源笔记的默认主题下,就算不添加题头图,题头图区域依然会占用一段屏幕高度,再加上我本来就不需要题头图,所以就把它彻底隐藏了。

image.png

另外,我还隐藏了文档顶部的文档标题, 因为它也跟题头图一样很占地方且用处不大。重命名之类的操作我都是按 F2,偶尔也会需要打开文档树操作(比如设置别名),但那些都是低频操作,我觉得应该优先保障大部分时间的体验。如果实在不想隐藏这个标题,也可以把 .protyle-title__input 的 display: none 去掉,我虽然隐藏了标题但还是给它加了点样式,应该比默认主题科学一点。

image.png

编辑器与左右侧栏的分隔线

中央主编辑区跟左右侧栏的分割线故意用了虚线,暗示思源笔记打通了正文与文档树、正文与反链这两层壁障,能同时做到这两点的文档型笔记软件目前只有这一个。

image.png

页签栏

在页签上添加了一个符号:埃及神话中代表灵魂的人头鸟身怪——Ba

image.png

无序列表

由于这个主题主要针对 daily notes 流程设计,所以对无序列表小圆点使用了比较明显的样式

  1. 无序列表常态颜色:金色的中心小圆点 + 透明金色外圈
  2. 无序列表折叠颜色:金色的中心小圆点 + 填充朱砂外圈
  3. 无序列表鼠标 hover 颜色:金色的中心小圆点 + 填充淡朱砂外圈

image.png

内部双链锚文本

内链锚文本也是 daily notes 中最重要的元素,常用作传递型双链,为了让整个 daily note 页面看起来更错落有致,内链锚文本也使用了比较显眼的样式。

首先添加了符号:生命之符 𓋹,通过添加这个符号,可以更直观地意识到双链覆盖了标签的功能。

在 daily notes 中使用大量传递型双链时如果锚文本的样式不显眼很容易让人看得头晕眼花,所以埃及主题给内链锚文本添加了大块的祖母绿背景,表现出一种“宝石感”。

image.png

其它锚文本

块引锚文本之外的其它几类锚文本也添加了各种埃及符号,同时给符号增加了一个小小的原木色卡片背景与不同的字体颜色,致敬 YGO。

块超链接锚文本: 添加了“生命之符与房屋”符号 𓉑 ,选中这个符号是因为思源笔记的块超链接可以跟块引锚文本互相转化,所以选了比较接近的符号。

image.png

普通网页链接:添加了“埃及不死鸟 Bennu”符号 𓅣

image.png

附件链接:添加了“圣甲虫”符号 𓆣

image.png

zotero url scheme 链接:zotero 的 url scheme 比别的软件更常用,所以单独给它加了“眼镜蛇”符号 𓆗

image.png

超级块的边框

在 daily notes 流程中经常会在一个列表项块中写很多内容,如果没有边框的话视觉效果不是很明显,所以我的做法是选中它们创建垂直超级块,再配合这个主题给超级块添加的边框样式达成比较显眼易区分的视觉效果。

image.png

如果有谁不在口头上把一个装载了很多内容的列表项块称作「卡片」就浑身难受的话,这个边框就更有存在的必要了。

SQL 块的分隔线

在思源笔记中实践 daily notes 流程一定离不开这个重要技巧:使用 SQL 块来模拟反链。

所以 SQL 块的样式必须要有所优化,每条查询结果之间的分隔线一定要加。

虽然修改一下这个样式只要一分钟,但是不重视 daily notes 流程的思源主题一般懒得去做。

image.png

其它编辑器元素

标题块旁边加了绳结符号来表示标题块层级:

image.png

表格去掉表头样式和奇偶行比较好:

image.png

代码块样式(Borland 时代):

image.png

折叠的代码块:
image.png

文本标签:添加了“玳瑁”符号 𓆉 和绿松石背景

image.png

暂时去掉的内容

1、以前空白行使用了阿拉伯谚语作为提示语,但是现在思源的空白行提示有点问题,暂时去掉了

image.png
2、标题块自动编号:因为思源笔记对长文档采用动态加载,所以 css 自动编号的数字往往不准确,这种功能还是得由官方来做
3、custom.js:因为实在没发现什么必须定制才能满足使用需求的地方,所以就没添加

1 操作
deerain 在 2022-06-12 10:49:32 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • pipa
    捐赠者 订阅者

    哈桑出手,八成精品 😉

    1 回复
  • pipa
    捐赠者 订阅者

    咋一用,这些感受

    字体很好

    无序列表有子项时,图标很明显

  • deerain
    支持者 订阅者 作者

    image.png

    1 回复
    2 操作
    deerain 在 2022-06-12 16:38:09 更新了该回帖
    deerain 在 2022-06-12 10:19:13 更新了该回帖
  • youngerruan
    支持者 订阅者

    感谢分享,看起来不错 ~

  • yuyuyuyu
    订阅者

    不错、不错,味道好极了

  • pipa
    捐赠者 订阅者

    剩下的两成要上架才有 🤣

  • OneChildME
    订阅者

    coooooooooooooooool!😄

请输入回帖内容 ...