Code Monkey home page Code Monkey logo

rem-craft-pro's Introduction

Rem Craft

GitHub release (latest by date including pre-releases) GitHub GitHub last commit GitHub repo size jsDelivr hits (GitHub)

一款思源笔记软件的自用主题

——的草稿

最后一天订阅了,我的推荐码是CpyERae

preview

参考样式

以下是主要样式设计来源:

  • 参考了Semi Design的设计系统,统一了颜色、线条、圆角等变量
  • 参考了Windows 11的设计,修改了主色、边栏、滑条、开关、输入框
  • VS Code 的顶栏
  • Craft 的呼出菜单、引述块
  • Rem Note 的文档树
  • Logseq 的页签
  • Notion 的题头图、面包屑、编辑器各类块

参考项目

更改日志

CHANGELOG


以下内容仅与自定义主题有关,建议有兴趣的朋友在Github仓库地址浏览,而非主题集市详情页内。

❗注意:激进变更

该主题是自用,因此有部分对其他用户来说可能过于激进的变更,如果你希望取消以下更改,需要了解自定义步骤后进行取消更改操作

  1. 设置、搜索、笔记本设置等大宽度菜单的关闭键被隐藏(点击菜单四周的空白处即可关闭)
  2. 超链接的锚文本编辑功能被隐藏(可直接在编辑器内编辑)
  3. 编辑器输入区域的宽度写死了,目前为49vw

自定义步骤

  1. Node.js官网下载并安装
  2. 克隆本仓库到本地,并更换到dev分支(此步骤建议使用 Github Desktop)
  3. 在该仓库的根目录路径下,打开命令行工具,运行npm i
  4. 等待依赖安装完成后,运行npm run build
  5. 不关闭命令行工具,查看_variables.scss文件,其中包含了所有更改样式的相关颜色和部分共用样式,请按照自己的需求自行修改

取消更改操作

以下相关操作与激进变更按序号对应:

  1. 相关代码在_dialog.scss文件中,结构如下所示,注释后编译即可取消
    .b3-dialog__close {
     display: none;
    }
  2. 相关代码在_util.scss文件中,结构如下所示,注释后编译即可取消
    &[style*="width"] {
      ...
    }
  3. 可通过修改_variables.scss文件中的$rc-editor-width变量调整

以上就是本菜鸡摸索出来的流程,也许之后我会开发一个主题自定义挂件,应该就不需要这么多复杂的步骤了…不过估计使用该主题的人不多,所以应该会鸽很久

rem-craft-pro's People

Contributors

oianthony avatar svchord avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.