RunCross/dsh-simple-background ↗★ 0
@runcross/dsh-simple-background
通过设置页动态修改 DSH 网页端 CSS、背景图与 JS 的插件
AI 分析
核心用途是允许用户在设置中直接编辑自定义 CSS 样式、设置背景图片(支持本地目录映射)以及注入自定义 JS 脚本并即时生效。适合有前端定制需求、想美化界面的用户。
安装
$
npx -p @deepseek-ai/dsh dsh plugin --profile web add github:RunCross/dsh-simple-background说明文档
阅读完整 README ↗使用
- 打开 DSH Web 右上/左下「设置」。
- 进入「自定义样式 / Custom CSS」。
- 编辑 CSS、背景图、本地图片目录或 JS 代码,点击「保存」,立即生效。
CSS 规则与默认规则
- 每条规则包含「选择器 / 样式声明 / 备注」,备注用于标注它影响哪里。
- 点「插入默认规则」会生成一份带中文(或英文)说明的常用模板,例如:
| 选择器 | 备注 |
|---|---|
body | 整个页面:全局字体/背景 |
[data-slot="sidebar"] | 左侧边栏容器 |
[data-slot="conversation"] | 中间对话主区域 |
[data-slot="details"] | 右侧详情面板 |
[data-slot="conversation"] [class*="bubble"] | 聊天气泡 |
[data-slot="conversation"] [class*="input"] | 输入/编辑器区域 |
[class*="toolbar"] | 工具栏 |
默认规则写入草稿后仍需点「保存」才会生效。
本地图片
浏览器页面无法直接读取 file:// 或任意本地绝对路径,所以插件会把一个本地目录通过
HTTP 提供给页面:
- 把图片放到「本地图片目录」(默认
$DSH_HOME/custom-css/assets,即~/.dsh/custom-css/assets)。也可以在设置里把assetsPath改成任意本地文件夹。 - 在「背景图片地址」「左侧图片」或「右侧图片」里填:
/api/custom-css/assets/我的图片.png
- 保存即可。左侧 / 右侧图片会锚定在中间对话区域的左下 / 右下角(左图左边缘 贴合侧边栏右边界,右图右边缘贴合详情面板左边界),可在设置里调整高度、 底部偏移与不透明度。也可以在任何 CSS 里使用该地址,例如:
[data-slot="sidebar"] {
background-image: url("/api/custom-css/assets/sidebar-bg.png");
}
支持子目录:/api/custom-css/assets/sub/dir/pic.png(相对于 assetsPath)。