桌面应用【免费下载链接】SabakiAn elegant Go board and SGF editor for a more civilized age.项目地址https://gitcode.com/gh_mirrors/sa/Sabaki点击查看免费下载本篇基于 Sabaki 仓库内的 Userstyle Tutorial 展开讲解如何在不替换任何程序文件、且升级后不会被覆盖的前提下通过一个名为styles.css的自定义样式文件改变 Sabaki 的棋盘、棋子与整体外观。读完本篇你将能够定位各平台下的styles.css实际路径理解它在渲染进程中的注入位置与 CSS 层叠优先级并利用开发者工具DevTools结合 Shudan 组件的选择器完成纹理定制。什么是 userstyle它为什么比改文件更可靠Sabaki 的界面基于 HTML、CSS 与 JavaScript 构建Electron 应用。官方默认的棋盘与棋子纹理是内置样式的一部分但并非不可更改。原文档给出的核心观点是userstyle 是改变 Sabaki 外观的最简单方式你只需维护一个纯 CSS 文件无需替换任何重要文件important files由于样式文件存放在用户数据目录而非程序安装目录Sabaki 下一次更新更新只替换程序本体不会回滚你的修改。从源码结构看这个“不被覆盖”的承诺有明确的机制支撑styles.css由主进程在首次启动时于用户数据目录中自动创建程序自带的样式见 index.html 中加载的 style/app.css、style/index.css、style/comments.css全部位于打包后的应用内部两者物理隔离。第一步确定 styles.css 的位置原文档列出了三个平台下的配置设置目录平台目录Windows%APPDATA%\SabakiLinux$XDG_CONFIG_HOME/Sabaki未设置该环境变量时为~/.config/SabakimacOS~/Library/Application Support/Sabaki该目录内存在一个名为styles.css的文件其中任何 CSS 声明都会在 Sabaki 启动时被加载。源码印证路径如何被计算上述路径并非文档凭空约定而是主进程启动时确定的。见 src/setting.jsexports.userDataDirectory portableDir ? path.join(portableDir, Sabaki) : app.getPath(userData) // ... exports.stylesPath path.join(exports.userDataDirectory, styles.css)这里有两个值得注意的实现细节默认情况app.getPath(userData)是 Electron API返回的就是文档中列出的三个平台标准目录。便携模式可从源码看出的补充信息当环境变量PORTABLE_EXECUTABLE_DIR存在时即从压缩包直接运行的便携版构建userDataDirectory会变为便携版根目录/Sabakistyles.css也随之落在该目录内。也就是说便携版用户的 userstyle 文件不在上述三个位置而在便携版文件夹里的Sabaki/子目录中。启动时自动创建 styles.csssrc/setting.js 在模块加载阶段就检查并创建该文件if (!fs.existsSync(exports.stylesPath)) { fs.writeFileSync( exports.stylesPath, /* This stylesheet is loaded when ${app.name} starts up. */, ) }因此即使你从未手动创建过它第一次启动 Sabaki 后该文件就已经存在内容是一条自述注释。你可以直接用任意文本编辑器打开它开始写 CSS。渲染进程如何拿到 stylesPathElectron 主进程与渲染进程之间的路径传递链路如下均可在源码中验证主进程通过 IPC 同步接口暴露路径见 src/main.jsipcMain.on(setting:getPathsSync, (e) { try { e.returnValue { themesDirectory: setting.themesDirectory, stylesPath: setting.stylesPath, userDataDirectory: setting.userDataDirectory, themes: setting.getThemes(), } } catch (err) { // 出错时回退为空字符串避免渲染进程崩溃 } })预加载脚本在渲染进程加载之前同步取回并缓存见 src/preload.jslet pathsCache try { pathsCache ipcRenderer.sendSync(setting:getPathsSync) } catch (e) { pathsCache { themesDirectory: , stylesPath: , /* ... */ } }并在 src/preload.js 中挂到window.sabaki.setting上stylesPath、themesDirectory、userDataDirectory三者一并暴露给渲染层。CSS 的注入顺序与优先级这是理解 userstyle 生效方式的关键。渲染入口 index.html 先加载三张内置样式表link relstylesheet typetext/css href./style/app.css / link relstylesheet typetext/css href./style/index.css / link relstylesheet typetext/css href./style/comments.css /之后React此处为 Preact应用启动src/components/App.js 挂载了ThemeManager组件。src/components/ThemeManager.js 的render按以下顺序插入link标签当前主题theme的样式表currentTheme.main || styles.css指向themes 目录/主题名/package.json中声明的主 CSS用户自定义样式href: setting.stylesPath即你编辑的那个styles.css。// Theme stylesheet currentTheme ! null h(link, { rel: stylesheet, type: text/css, href: join(currentTheme.path, currentTheme.main || styles.css), }), // ... // Userstyles h(link, { rel: stylesheet, type: text/css, href: setting.stylesPath, }),由注入顺序可以推断出实际优先级userstyle 始终排在主题样式之后同源、同优先级时后声明者胜出因此你可以用styles.css覆盖已安装主题的任意规则而不必重新打包主题。反过来主题的 CSS 也会覆盖内置的app.css等样式表。主题本身的发现逻辑在 src/setting.js 的loadThemes主进程扫描userData/themes目录见 src/setting.js 中themesDirectory的定义把每个子目录当作一个主题候选并读取其package.json在 src/components/drawers/PreferencesDrawer.js 中偏好设置页选择主题时使用的文件过滤器正是extensions: [asar]即安装主题 把一个.asar包放入themes目录。userstyle 与 theme 的关系可概括为theme 是一个 userstyle 加资源文件的再分发打包格式详见 Create Themes。如何修改棋盘与棋子Shudan 的选择器钩子Sabaki 的棋盘 UI 并非自绘 DOM而是复用了 Shudan 组件库。从源码看棋盘组件直接引入自该库src/components/Goban.jsimport {BoundedGoban} from sabaki/shudanSabaki 自身在 src/components/ThemeManager.js 中给出的自定义图片样式就是典型的 Shudan 选择器用法你可以把这些类名与 CSS 变量当作 userstyle 的主要攻击面/* 替换黑子/白子图片sign_1 黑子、sign_-1 白子 */ .shudan-stone-image.shudan-sign_1 { background-image: url(...); } .shudan-stone-image.shudan-sign_-1 { background-image: url(...); } /* 棋盘图片 */ .shudan-goban-image { background-image: url(...); } /* 相关 CSS 变量Sabaki 在启用自定义图片时会自动写入 */ .shudan-goban { --shudan-board-background-color: ...; --shudan-black-background-color: ...; --shudan-white-foreground-color: ...; }原文档建议若要系统地了解如何更换 board/stone 图片应阅读 Shudan 项目的 styling 文档Shudan 是该组件的维护者仓库可查阅其 Styling 章节。此外Sabaki 自身的通用样式如字体、#busy遮罩、#main布局等可以在 style/app.css 中查阅选择器与默认值为你的 userstyle 提供参考——注意它是打包进应用的你只应阅读它而不是修改它。用开发者工具检查 DOM原文档提示排查选择器时打开开发者工具查看 DOM 会有帮助。具体步骤参照仓库内的 Debugging 指南必要时先关闭 Sabaki打开上节所述的设置目录中的settings.json找到键debug.dev_tools其默认值为false可在 src/setting.js 的默认设置表中确认将其改为true并保存重新启动 Sabaki主菜单会多出 Developer 项点击 Toggle Developer Tools。在 Elements 面板中定位.shudan-goban、.shudan-stone-image等节点在 Console/Styles 面板验证你的styles.css规则是否命中、是否被更高优先级的规则压制例如是否需要!important或更具体的选择器。实战示例一段可复用的 userstyle 骨架将以下内容写入styles.css路径见前文并重启 Sabaki可看到自定义生效。图片文件建议放在用户数据目录下的子目录中CSS 中引用相对路径即可渲染页从file://加载绝对路径亦可/* 1. 更换棋盘纹理图片与 sabaki 用户目录同级或任意可达位置 */ .shudan-goban-image { background-image: url(my-theme/board.png); } /* 2. 更换黑白棋子纹理 */ .shudan-stone-image.shudan-sign_1 { background-image: url(my-theme/black.png); } .shudan-stone-image.shudan-sign_-1 { background-image: url(my-theme/white.png); } /* 3. 通过 Shudan 的 CSS 变量微调棋盘背景/前景色 */ .shudan-goban { --shudan-board-background-color: #e8c882; }注意事项需要重启生效styles.css是以link静态注入的见 ThemeManager 实现Sabaki 启动时加载该文件编辑后请重启应用验证不要修改settings.json以外的程序内部文件userstyle 的全部意义就在于只维护这一个 CSS 文件版本兼容性Sabaki 在不同大版本中调整过 DOM 结构旧版主题/userstyle 的选择器可能失效——同仓库的 theme-directory.md 就明确指出v0.40.0 对 DOM 结构做过变更v0.30.x 时代的主题在 v0.40.0 及以后可能不再适用。升级 Sabaki 后若 userstyle 失效优先用 DevTools 重新核对类名。进阶从 userstyle 到可分发的 theme当你的 userstyle 稳定后可以按 Create Themes 的流程把它和素材打包成.asar主题目录内放styles.css与图片资源另加一个仅含name、version、main等字段的package.json用asar pack打包即可在 Sabaki 偏好设置中安装并分发给他人。此时它会被 src/setting.js 的loadThemes扫描到并由 src/components/ThemeManager.js 以main字段指定的样式表加载。小结styles.css位于各平台的 Sabaki 用户数据目录Windows%APPDATA%\Sabaki、Linux~/.config/Sabaki、macOS~/Library/Application Support/Sabaki便携版则位于便携目录下的Sabaki/子目录由主进程在首次启动时自动创建src/setting.js它经 IPC 路径缓存传入渲染进程src/main.js、src/preload.js由 src/components/ThemeManager.js 以link形式注入且位于主题样式之后因而拥有最高的覆盖优先级定制棋盘/棋子的核心是 Shudan 组件的选择器.shudan-goban-image、.shudan-stone-image.shudan-sign_±1及一组--shudan-*CSS 变量必要时按 Debugging 打开开发者工具核对 DOM想分享给他人时按 create-themes.md 用asar将 userstyle 打包为正式 theme 即可。赞分享桌面应用【免费下载链接】SabakiAn elegant Go board and SGF editor for a more civilized age.项目地址https://gitcode.com/gh_mirrors/sa/Sabaki点击查看免费下载相关推荐Sabaki围棋软件专业级棋盘与棋谱编辑完整指南Sabaki围棋软件专业级棋盘与棋谱编辑完整指南 在围棋爱好者的数字工具库中Sabaki凭借其优雅的界面设计和强大的SGF编辑功能脱颖而出。这款跨平台围棋软桌面应用Rust类型系统强化Frunk库的高级特性与最佳实践Rust类型系统强化Frunk库的高级特性与最佳实践 Frunk是Rust生态中专注于类型级编程的强大库提供了HList、Coproduct、Generic如何快速掌握Sabaki围棋对弈与棋谱编辑的完整使用指南如何快速掌握Sabaki围棋对弈与棋谱编辑的完整使用指南 在当今数字化围棋时代拥有一款功能全面且界面优雅的围棋软件至关重要。Sabaki作为一款跨平台的围棋桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考