常用服务入口太分散？用Dashlet搭一个自己的私有导航仪表盘

前言

常用服务越来越多以后，真正麻烦的不是打不开，而是入口太分散。GitHub、网盘、邮箱、后台系统、监控页面、NAS应用和各种自建服务，每个都能单独收藏，但时间一长，浏览器书签栏和收藏夹就会变得越来越乱。

Dashlet适合解决这类问题。它不是复杂的数据大屏，也不是重型监控系统，而是一个轻量级、自托管的个人仪表盘。你可以把常用网站和服务入口集中放到一个页面里，通过图标、名称、描述和链接进行管理，打开浏览器就能看到自己的常用工作台。

它的部署方式也比较适合NAS用户。通过Docker运行后，只需要把配置文件挂载到指定目录，就能管理页面内容。服务列表、主题模式、标题、背景、排序方式等，都可以通过配置文件或页面导入方式完成，不需要为了改几个入口去修改项目代码。

对于极空间这类支持Docker的设备来说，Dashlet可以承担"统一入口页"的角色。无论是放开发工具、影音服务、家庭NAS应用，还是办公常用网站，都能整理到一个更清爽的页面中，减少到处找链接的时间。

本文将从极空间SSH连接和Docker环境检查开始，完成Dashlet容器部署、配置导入和本地访问测试。随后再通过 cpolar 创建公网访问地址，并配置固定二级子域名，让这个私有仪表盘不只在家里局域网中可用，也能在外出时随时打开。

1.Dashlet优势是什么？

轻量高效 ：基于原生 JavaScript 与 SCSS 构建，无重型框架依赖，确保极速加载与流畅运行。

玻璃磨砂美学 ：采用现代化视觉设计，搭配细腻的动态过渡与交互动画，带来沉浸式用户体验。

配置驱动架构 ：所有服务与设置均通过 public/config.json 文件集中管理，无需修改代码即可灵活调整。

多主题支持 ：内置系统自动、深色、浅色三种模式，并支持完全自定义配色方案；用户还可通过 URL 设置个性化背景壁纸。

智能排序机制 ：支持按名称、URL、描述自动排序，也允许手动拖拽自定义顺序，灵活组织你的服务列表。

直观拖放交互 ：通过简单的拖放操作，即可实时调整服务图标位置，所见即所得。

清爽布局设计 ：固定式控制面板与响应式网格布局相结合，界面整洁有序，信息一目了然。

深度自定义能力：支持上传自定义 CSS 与 JavaScript 文件，满足高级用户的个性化与功能扩展需求。

2.前提条件

2.1ssh远程连接到极空间

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

shell 复制代码

ssh root@IP

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

2.2验证docker是否开启

使用命令：

shell 复制代码

docker -v 
systemctl status -v

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

3.安装Dashlet

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

shell 复制代码

 mkdir Dashlet

docker命令安装：

shell 复制代码

docker run -d \
  --name dashlet \
  --restart unless-stopped \
  -p 8989:8989 \
  -v $(pwd)/data:/app/public \
  ghcr.io/jaberio/dashlet:latest

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

shell 复制代码

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

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

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

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

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

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

shell 复制代码

{
  "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"
  }
]
}