登录 注册

思源笔记主题 Notion

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

参考 Notion 写的一个明亮模式的主题。

才发现明亮模式的主题好难写，暗黑模式下我写的那个主题哐哐哐两三种黑色 + 阴影就成了，剩下的都是编辑器内部样式；而明亮模式光 UI 就需要调好久，十几种白色排在一起晃得人眼晕（可能是我太菜了）。

已经发布，可直接从社区集市下载安装。具体简介见仓库。

重点 ：

  • 如果有什么样式相关的改进建议，可以在这个帖子下告诉我
  • 我的另一个主题帖同样如此

preview.png

  • 思源笔记

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

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

    22340 引用 • 89396 回帖 • 1 关注
1 引用
Notion 主题 题头图（Cover） • svchord
抚州 位置
5 感谢
1 收藏
1 引用
13 回帖
5
4
3.1k 386 528 278 188 54 1 1.7k

相关帖子

13 回帖
思源笔记主题 Notion

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • fangly •
    订阅者 先知

    写得太好了，感谢！

    一点小建议：悬浮窗没有边框，颜色也和背景一样，和背景融为一体了，有点难区分出悬浮窗的边界

    1 回复
  • svchord •
    捐赠者 作者

    你是指哪个悬浮窗呢？

    1 回复
  • fangly •
    订阅者 先知

    不好意思，是我弄错了，我不想要图片有阴影，所以注释了阴影部分的代码，导致块引用的悬浮窗阴影也没了。

    我想问一下，如果我想图片没有阴影，块引用悬浮窗有阴影或边界要怎么调整呢。谢谢！

    1 回复
  • svchord •
    捐赠者 作者

    你可以用 --b3-dialog-shadow 作为搜索条件，找到含有 span[data-type="img"] img, 的这一行代码，注释掉就可以了。我看了下也觉得图片用这个阴影有点问题，我试试换一个。

  • Yotsuba • • 1
    订阅者 支持者 勇士

    很好看！

  • fangly • • 1 评论
    订阅者 先知

    image.png

    社区集市按钮看不见了

    刚刚改好了，你可以更新看看
    svchord •
  • Achuan-2 • • 4 评论
    订阅者 先知

    支持支持！

    Light 和 Dark 主题两个一起维护真的蛮累的，真的改不动了……自己的笔记都没写多少，全花在门面上了……
    Achuan-2 •
    @Achuan-2 哈哈哈我是在写笔记的过程中看到哪个不顺眼就改掉了
    svchord •
    @zqhjl 我也这样啊，然而打字半小时，修改主题 4 小时，不过现在亮色主题已经是我满意的样子了（至少今天是，苦笑），也不想再花太多时间改了
    Achuan-2 •
    @Achuan-2 哈哈哈哈一样一样，我也已经基本上满意了，不想主动找 bug，所以才想着发到论坛里收集下别人找到的 bug
    svchord •
  • fangly •
    订阅者 先知

    image.png

    分屏的时候看不见分界线

    顺带再问一个问题，如果我想要上方的编辑工具栏不要隐藏，无论我鼠标移不移上去都一直显示的话，代码要怎么改呢？谢谢

    1 回复
    1 操作
    fangly 在 2021-03-05 16:38:54 更新了该回帖
  • Yzg100 •
    订阅者 支持者 勇士

    感谢大佬，辛苦了。之前一直在用 Atom One Dark!

    1 回复
  • svchord •
    捐赠者 作者

    哈哈哈哈谢谢

  • svchord •
    捐赠者 作者

    分屏这个是我一直以来的设计了，因为把内定的 border 颜色改成和背景颜色相同了，如果要修改的话整体 UI 就不好看了。

    如果是想要不隐藏的话，可以以 富文本工具栏 为搜索条件找到如下代码：

    .vditor-toolbar__item {
  transition: opacity 400ms ease 0s;
  opacity: 0;
  margin: 0 2px;
  margin-bottom: 4px;
}

.vditor-toolbar:not(.vditor-toolbar--hide):hover .vditor-toolbar__item {
  opacity: 1;
}

    把其中的 transition: opacity 400ms ease 0s; 和 opacity: 0; 以及

    .vditor-toolbar:not(.vditor-toolbar--hide):hover .vditor-toolbar__item {
  opacity: 1;
}

    都注释掉就可以了

  • crowds21 •
    订阅者 付费者

    一个改进的小点,不知道能不能实现,当我的块引用锚文本设置为代码时,如下.

    ((20210403014754-acq594t "{{.text}}")), 显示出来的效果 锚文本,能够再锚文本类型为代码时,也给该锚文本加一个下划线或其他方便区分的样式,方便区分,而非只有鼠标移上去的时候,才显示下划线.

    image.png

    image.png

    1 回复
  • svchord •
    捐赠者 作者

    我去看了下，好像 {{.text}} 没有被设置特定的选择器，所以你的这个想法应该是实现不了…你可以试试发个帖子看看 D 大 V 姐会不会采纳这个建议

请输入回帖内容 ...
svchord
抚州
回帖
78
 帖子
41
 积分
35

近期热议

推荐标签 标签

  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • OnlyOffice
    4 引用 • 3 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖 • 1 关注
  • Log4j

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

    20 引用 • 18 回帖 • 31 关注
  • Hexo

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

    21 引用 • 140 回帖 • 1 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    75 引用 • 1737 回帖 • 5 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • BAE

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

    19 引用 • 75 回帖 • 642 关注
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    179 引用 • 995 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    543 引用 • 672 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • FreeMarker

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

    23 引用 • 20 回帖 • 463 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    47 引用 • 25 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 禅道

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

    6 引用 • 15 回帖 • 114 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1114 回帖 • 124 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注

最新标签