思源笔记启动界面修改

本贴最后更新于 452 天前,其中的信息可能已经时移世易

默认的黑红启动界面太压抑了,我想换点好看的图片上去,这样每次启动的时候都能有一点小愉悦(别小看启动那半秒闪过的界面能起到的影响力)

L39QKE6EJ792LANXP.jpg

方法:

找到思源的安装路径中的 SiYuan\resources\appearance\boot,使用代码编辑器打开 index.html

调整一下 html 部分的代码

把黑色背景色去掉,引用另外一张图片做为背景图,调整进度条颜色,以及字体大小和颜色

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"> <style> html { overflow: hidden; height: 100%; } body { height: 100%; margin: 0; /* background: #1e1e1e; */ background-image: url("./cloud.jpg"); background-size: cover; background-repeat: no-repeat; font-size: 12px; font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; } </style> </head> <body> <div id="bg" style="width: 100%;display: flex;justify-content: space-around;height: 100%;"> <img style="width:36vh;align-self: center; display: none;" src="icon.png"/> </div> <div style="position: absolute;bottom: 0;width: 100%;"> <div style="position: absolute;height: 0.2rem;background-color: #424f65;width: 100%;top:0"></div> <div id="progress" style="position: absolute;height: 0.2rem;background-color: #5ce1ea;transition: width 50ms cubic-bezier(0, 0, 0.2, 1);top:0"></div> <div id="details" style="color: #e7e9ea;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;padding: 14px; font-size: 1rem;"></div> </div>

image.png

背景图是在 PS 里制作好的,分辨率为 1920*1010(图里我没有直接删掉 logo 文件而是先改个名存着不用)

M057UXAM2QMBVBXY5ZP.jpg

不过最开始还是有一百多毫秒的默认界面才会变成我改过的界面,我忘记这部分是在哪改动了

  • 思源笔记

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

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

    25450 引用 • 105271 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • StarDustSheep 2 评论
    作者

    初始启动界面的文件是 resources\app\electronboot.html

    在初始加载界面后还一个全屏界面,是在 resources\stage\build\app 里的 index.html

    把那一百多毫秒的默认界面也解决掉吧,出个教程那就太酷了
    Liam2233
    一百多毫秒的那部分是 electron 文件夹里的 boot.html
    StarDustSheep
  • StarDustSheep 1 赞同
    作者

    image.png

    感觉不错

  • DataWealth 1 赞同

    上个插件吧,你这个想法很棒!

  • ethanyang 1 评论

    啥时候换图标啊。。。一起优化下

    出个图标替换教程
    Liam2233
  • FIX

    大佬,背景图片我已经替换了,但是图标即使改了文件名依然会显示,该怎么办

    @StarDustSheep

    1 回复
  • StarDustSheep
    作者

    我过几天写个详细的教程

    1 回复
  • cheng0620 1 评论

    这个详细教程还有吗?我照着改了一下,没成功 😭

    2 回复
    改的这个地方 /* background: #1e1e1e; */ background-image: url("./cloud.jpg"); background-size: cover; background-repeat: no-repeat;
    cheng0620
  • StarDustSheep
    作者

    等我什么时候提起兴趣我就再研究一下,倒时候告诉你

  • StarDustSheep
    作者

    不建议一般人修改安装目录下文件,我之前又改了一次又改出毛病,整个库都不让打开。最后是只拷贝 data 才好的。

请输入回帖内容 ...

推荐标签 标签

  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 176 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 110 关注
  • 禅道

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

    6 引用 • 15 回帖 • 12 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 741 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 93 关注
  • 代码片段

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

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

    167 引用 • 1130 回帖 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 74 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 707 关注
  • danl
    163 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 608 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 549 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 390 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 468 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 318 关注
  • AWS
    11 引用 • 28 回帖 • 8 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 648 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 547 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 597 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 158 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    174 引用 • 3852 回帖
  • Swagger

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

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

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

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

    133 引用 • 1124 回帖 • 108 关注