在妙笔中使用自定义样式 (2)

之前我们介绍过使用自定义样式(CSS)来调整 WonderPen 界面的方法,这次我们又准备了一些新的用例,希望能给有自行调整界面需求的用户一些启发。

关于测试版

在开始之前,先介绍一下测试版(Beta 版)。近期我们注意到在某些版本的系统上,WonderPen 运行时可能存在一些问题,比如编辑器内容滚动时卡顿甚至失去响应等等,如果你遇到了类似的问题,可以试一试最新的测试版。

测试版可在官网下载页面下载,具体入口见下面的截图所示。

下载好测试版后,直接覆盖安装即可。如果你暂未遇到相关问题,可继续使用当前稳定版,等到下一个版本正式发布再进行升级。

关于自定义样式

我们再回顾一下自定义样式功能的基本用法,如果你已经了解这个功能,可以跳过本段直接阅读后面的实例。

自定义样式功能在软件内的名称是“自定义 CSS”,入口位于设置窗口 → 高级 → 自定义 CSS,如下图所示。

这里的 CSS 就是层叠样式表(Cascading Style Sheets),是一种通常用于设置网页样式的语言,如果你有一定编程基础,你会发现它很容易上手。

使用自定义 CSS,只需在这个界面添加方案、输入对应的 CSS 代码,再保存并启动即可,其中代码输入界面如下图所示。

自定义 CSS 理论上可以调整主窗口界面上任意元素的样式,当然,要调整的内容越多,代码也会越复杂。

改进版的编辑器虚线背景

之前的自定义样式示例中,我们介绍了在编辑器使用虚线背景的例子。那个例子在明亮主题下表现良好,但在另外几个主题下却有一些问题,下面是一个改进版的编辑器虚线背景样式:

.CodeMirror-code {
  background-image: linear-gradient(var(--wp-paper-bg) calc(var(--wp-editor-line-height) - 1px), transparent 0), linear-gradient(90deg, var(--wp-fg-25a) 50%, transparent 0);
  background-size: 10px var(--wp-editor-line-height);
  background-position: 0 0, 0 0;
}

效果如下所示:

明亮主题 + 虚线背景
夜间主题 + 虚线背景
浅绿主题 + 虚线背景
淡黄主题 + 虚线背景
深灰主题 + 虚线背景
暗紫主题 + 虚线背景

调整标题栏高度

默认状态下,文档标题栏的高度是 26px,如果需要,你可以使用自定义样式来调整这个高度以及标题字号的大小。

相应代码:

#root {
  --wp-editor-nav-bar-height: 40px;
  --wp-nav-bar-height: 40px;
}

[data-role="editor-nav-bar-title"] {
  font-size: 16px;
}

效果如下:

标题栏(默认)
标题栏(增高)

调整底部状态栏高度

同样地,也可以使用自定义样式调整底部状态栏的高度。

代码如下:

#root {
  --wp-status-bar-height: 40px;
  --wp-editor-status-bar-height: 40px;
}

[data-role="left-panel-bottom-bar"],
[data-role="editor-status-bar"] {
  font-size: 1.2em;
}

效果如下:

状态栏(默认)
状态栏(增高)

调整右侧备注栏背景色

默认的明亮主题中,右侧备注栏的背景色为浅黄色,如下图所示:

你可以使用自定义代码来调整备注的背景色,代码类似下面这样:

[data-role="frame-body-right"] {
  --wp-memo-bg: #eeffee;
}

效果如下图所示:

小结

以上就是本次为大家分享的自定义 CSS 案例,自定义 CSS 是个性化设置的一个强大补充,如果你熟悉 CSS 语法,会发妙笔(WonderPen)界面的大部分细节都可以通过几行或者十几行代码进行调整。有关 CSS 的选择器,可以通过点击顶部【视图】菜单栏中的【开发者工具】进行查看。

当然,需要注意的是,妙笔(WonderPen)的界面仍在迭代调整中,因此一些原来有效的 CSS 个性化代码可能会在新版本中失效。使用 CSS 选择器时,建议尽量使用 id[data-...] 等较为稳定的选择器,而不要使用变化可能较为频繁的 class 选择器。

最后,祝各位作者文思泉涌、妙笔生花!🌷

微信公众号
扫码关注官方微信公众号
分类:产品标签:WonderPen使用技巧
妙笔 2.3.2 版更新
妙笔 2.3.4 版更新

相关文章