当前位置：首页 > news >正文

自用超顺手的私有仪表盘：Dashlet 使用体验与部署分享

news 2026/8/18 20:06:30

前言

作为一个常年和各类服务器、应用打交道的运维人，日常总需要在不同网址、不同监控面板之间来回切换，既费时间又容易遗漏关键信息。直到用上 Dashlet，才真切感受到 “一站式掌控” 的便捷 —— 它就像为我量身打造的数字驾驶舱，轻巧又实用。

最打动我的是它的轻量化，几十 MB 内存就能稳稳运行，完全不占用服务器资源，而且全程自托管，所有数据都留在本地，不用担心隐私泄露的问题。操作上也特别友好，不用改一行代码，只靠配置文件就能自定义服务列表、调整主题样式，拖拽几下就能把常用的网址、监控项排好序，界面是那种带磨砂质感的设计，看着舒服，用着也丝滑。用了一段时间后，原本杂乱的数字管理场景变得井井有条，每天打开电脑只要看这一个面板，就能快速定位所有需要的服务，效率提了不止一点。

好东西当然要和大家分享，下面就把 Dashlet 的详细部署和配置方法整理出来，亲测步骤清晰，新手也能轻松上手：

1.Dashlet优势是什么？

轻量高效：基于原生 JavaScript 与 SCSS 构建，无重型框架依赖，确保极速加载与流畅运行。
玻璃磨砂美学：采用现代化视觉设计，搭配细腻的动态过渡与交互动画，带来沉浸式用户体验。
配置驱动架构：所有服务与设置均通过 public/config.json 文件集中管理，无需修改代码即可灵活调整。
多主题支持：内置系统自动、深色、浅色三种模式，并支持完全自定义配色方案；用户还可通过 URL 设置个性化背景壁纸。
智能排序机制：支持按名称、URL、描述自动排序，也允许手动拖拽自定义顺序，灵活组织你的服务列表。
直观拖放交互：通过简单的拖放操作，即可实时调整服务图标位置，所见即所得。
清爽布局设计：固定式控制面板与响应式网格布局相结合，界面整洁有序，信息一目了然。
深度自定义能力：支持上传自定义 CSS 与 JavaScript 文件，满足高级用户的个性化与功能扩展需求。

2.前提条件

2.1ssh远程连接到极空间

开启【SSH 服务】
使用终端（Windows PowerShell / Mac Terminal）登录：

sshroot@IP

没有ssh的小伙伴可以参考cpolar官网这篇教程：《极空间别再吃灰了！开启SSH，秒变全能服务器！》

2.2验证docker是否开启

使用命令：

docker-vsystemctl status-v

没有docker的小伙伴可以参考cpolar官网这篇文章：《极空间开箱实录：从拆箱到远程访问保姆级教程，30分钟上手！》

3.安装Portainer

新建文件夹dashlet目录并进入:

mkdirDashlet

docker命令安装：

dockerrun-d\--namedashlet\--restartunless-stopped\-p8989:8989\-v$(pwd)/data:/app/public\ghcr.io/jaberio/dashlet:latest

也可以使用Docker Compose（本文使用）:

services: dashlet: image: ghcr.io/jaberio/dashlet:latest container_name: dashlet restart: unless-stopped ports: -"8989:8989"volumes: - ./data:/app/public

在浏览器中输入http://极空间IP:8989就能看到登录界面：

点击设置，点击导入按键：

点击打开文件，就可以看到如下啦：

编辑后，点击导入配置文件：

编辑内容（自定义，仅参考）：

{"settings":{"theme":"system","appTitle":"Dashlet","greeting":"Welcome","accentColor":"#3b82f6","blur":true,"animations":true,"openNewTab":true,"layout":"list","wallpaper":"","searchProvider":"https://duckduckgo.com/?q=","customCSS":"","disableDragDrop":false,"dragDelay":0,"searchEnabled":true,"footerText":"Powered by","footerColor":"","sortBy":"manual"},"services":[{"id":"1","name":"GitHub","description":"Code hosting","url":"https://github.com","icon":"https://github.githubassets.com/favicons/favicon.png"},{"id":"2","name":"YouTube","description":"Watch videos","url":"https://youtube.com","icon":"https://www.youtube.com/s/desktop/10c3d9b4/img/favicon_144x144.png"},{"id":"3","name":"Google","description":"Search engine","url":"https://www.google.com","icon":"https://www.google.com/favicon.ico"},{"id":"4","name":"Gmail","description":"Email service","url":"https://mail.google.com","icon":"https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico"},{"id":"5","name":"Notion","description":"All-in-one workspace","url":"https://notion.so","icon":"https://www.notion.so/images/favicon.ico"},{"id":"6","name":"Reddit","description":"Social news & discussion","url":"https://reddit.com","icon":"https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png"},{"id":"7","name":"Twitter / X","description":"Social media","url":"https://twitter.com","icon":"https://abs.twimg.com/favicons/twitter.3.ico"},{"id":"8","name":"Stack Overflow","description":"Developer Q&A","url":"https://stackoverflow.com","icon":"https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"},{"id":"9","name":"Wikipedia","description":"Free encyclopedia","url":"https://en.wikipedia.org","icon":"https://en.wikipedia.org/static/favicon/wikipedia.ico"},{"id":"10","name":"Netflix","description":"Streaming movies & shows","url":"https://netflix.com","icon":"https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico"},{"id":"11","name":"Spotify","description":"Music streaming","url":"https://open.spotify.com","icon":"https://open.scdn.co/cdn/images/favicon32.c6a9e59d8375a83e22c7b79e9b7a3e3d.png"},{"id":"12","name":"Weather","description":"Check local forecast","url":"https://weather.com","icon":"https://weather.com/favicon.ico"}]}