极空间部署 Dashlet：搭建自托管导航页并实现远程访问

TechWJ

21652人浏览 · 2026-08-12 09:19:37

TechWJ · 2026-08-12 09:19:37 发布

前言

NAS里的服务装得越来越多以后，一个很现实的问题就是入口开始记不住了。一个应用用8989，另一个应用又是其他端口，再加上路由器后台、代码仓库和各种常用网站，浏览器书签很快也会堆得越来越乱。

如果只是需要一个统一入口，可以单独搭一张运行在自己服务器上的导航页，把常用服务按照名称、说明和图标集中整理起来。

Dashlet就是这样一类轻量的自托管Web导航工具。页面的主题、布局、搜索入口以及服务列表都可以通过配置进行调整，还可以直接导入JSON文件，一次加入多个常用网站。

本文将在极空间中通过Docker Compose部署Dashlet，并实际导入一份包含12个网站入口的配置文件，完成主题、搜索、布局和服务列表等基础设置。

局域网中的导航页配置完成后，还会通过cpolar为8989端口创建公网入口，让其他网络中的电脑和手机也可以打开这张Dashlet页面。

1.Dashlet优势是什么？

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

2.前提条件

2.1ssh远程连接到极空间

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

ssh root@IP

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

957c00e3b3f0ce8aa95df96aa41b8715

2.2验证docker是否开启

使用命令：

docker -v 
systemctl status -v

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

3.安装Dashlet

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

 mkdir Dashlet

docker命令安装：

docker run -d \
  --name dashlet \
  --restart unless-stopped \
  -p 8989: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"
  }
]
}