用NAS跑个私有化导航页：Dashlet把常用服务聚合在一个界面里

前言

平时要用的服务一多，找起来就麻烦------浏览器书签越堆越乱、书签栏不够放、各种标签页开一大堆，每次要找某个常用链接都要在好几个文件夹里翻。这种场景在有多台设备的人身上特别明显，电脑上整理好的书签到手机上完全不是一个体系，手机浏览器又不愿意装太多东西，结果就是常用的那几个来回切换，不常用的干脆记不住域名。

Dashlet解决的是把常用服务集中在一个起始页里的问题，部署在NAS上跑，配置好之后浏览器打开就是自己的导航面板，图标、链接、搜索框全在一个界面，不用再在标签页里翻来翻去。本质上是一个本地的导航页替代品，对标的是浏览器起始页或者某些hao123类的聚合平台，但所有数据存在自己NAS上，不经过任何第三方。

这个工具配置逻辑比较直接，所有要显示的服务都在config.json里定义，图标、名称、URL、描述都是自己填，改完刷新页面就生效。主题和配色也在这个文件里统一管，深色浅色系统自动三选一，也可以自己定义配色和壁纸。排序支持手动拖拽，也可以按名称字母排，不强求一致。适合自己用或者小团队内部搭一个共享起始页，不依赖任何第三方账号体系，NAS关机就不可访问，开机就能用。

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.安装Portainer

新建文件夹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"
  }
]
}