轻量级自托管仪表盘Dashlet

简介

什么是 Dashlet ？

Dashlet 是一个轻量级的自托管仪表板，专为小型应用设计。它提供了一个现代、模块化的用户界面，允许用户快速访问和管理各种服务。Dashlet 使用原生 JavaScript 和 SCSS 开发，无需重型框架，注重代码简洁和性能。

主要特点

轻量级设计 ：基于原生 JavaScript 和 SCSS，确保快速加载和运行。
玻璃磨砂风格 (Glassmorphism UI)：现代化的界面设计，具有动态动画效果，增强用户体验。
配置驱动 ：用户可以通过 public/config.json 文件加载设置和服务，方便管理。
主题定制 ：
- 提供多种主题选项，包括系统、暗色、亮色和自定义色彩。
- 用户可以为背景设置自定义壁纸 URL。
动态排序：支持按名称、URL、描述或手动顺序进行排序，增强服务组织能力。
拖放功能：用户可以轻松通过拖放方式调整服务的顺序。
整洁的布局：固定的控制面板，使用户界面干净整洁。
自定义文件支持 ：允许用户上传自定义 CSS 和 JavaScript，以满足特定需求。

应用场景

小型个人项目：适合开发者为自己的小型应用设置简单、有效的仪表板。
家庭实验室：技术爱好者可以将其用于管理家庭服务器、应用和服务。
开发和测试：开发者可以快速创建用于展示项目和服务的临时仪表板。

Dashlet 非常适合为你的家庭服务器或个人云环境创建一个统一的导航入口。你可以将所有自托管服务（如NAS、路由器、下载器、媒体服务器等）的链接都集中到 Dashlet 中，形成一个美观、便捷的启动页。

安装

在群晖上以 Docker 方式安装。

docker cli 安装

如果你熟悉命令行，可能用 docker cli 更快捷。

bash 复制代码

# 新建文件夹 dashlet 和 子目录
mkdir -p /volume1/docker/dashlet/data

# 进入 dashlet 目录
cd /volume1/docker/dashlet

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

docker-compose 安装

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件。

yaml 复制代码

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

然后通过 SSH 登录到您的群晖，执行下面的命令：

bash 复制代码

# 新建文件夹 dashlet 和 子目录
mkdir -p /volume1/docker/dashlet/data

# 进入 dashlet 目录
cd /volume1/docker/dashlet

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:8989 就能看到仪表盘界面

你可以通过界面右上角的设置按钮导出 config.json 文件

修改后再导入，或者上传到 docker/dashlet/data/ 目录

config.json

示例如下：

json 复制代码

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

下面是老苏整理的 config.json 的参数说明

参数	类型	示例值	说明
settings			包含应用程序的配置信息
`theme`	字符串	`"system"`	主题模式，可以选择 `"system"`、`"dark"`、`"light"` 或自定义主题。
`appTitle`	字符串	`"Dashlet"`	应用程序的标题，会显示在仪表板的顶部。
`greeting`	字符串	`"Welcome"`	用户在仪表板登录后看到的欢迎信息。
`accentColor`	字符串	`"#3b82f6"`	应用程序的主色调，影响按钮和链接等元素的颜色。
`blur`	布尔值	`true`	是否启用背景模糊效果。
`animations`	布尔值	`true`	是否启用动态动画效果。
`openNewTab`	布尔值	`true`	点击服务链接时是否在新标签页中打开。
`layout`	字符串	`"list"`	服务的布局方式，可以选择 `"list"` 或 `"grid"`。
`wallpaper`	字符串	`""`	自定义壁纸的 URL，可以设置背景图像。
`searchProvider`	字符串	`"https://duckduckgo.com/?q="`	搜索提供商的 URL，用户在搜索框中输入内容后将调用此链接。
`customCSS`	字符串	`""`	自定义 CSS 文件的路径，允许用户添加额外样式。
`disableDragDrop`	布尔值	`false`	是否禁用拖放功能。
`dragDelay`	数字	`0`	拖动元素时的延迟，以毫秒为单位。
`searchEnabled`	布尔值	`true`	是否启用搜索功能。
`footerText`	字符串	`"Powered by"`	页脚文本。
`footerColor`	字符串	`""`	页脚文本的颜色。
`sortBy`	字符串	`"manual"`	服务的排序方式，可以选择 `"manual"`、`"name"`、`"url"` 或 `"description"`。
services			包含服务的数组，每个服务都是一个对象。
`id`	字符串	`"1"`	服务的唯一标识符。
`name`	字符串	`"GitHub"`	服务的名称，显示在仪表板中。
`description`	字符串	`"Code hosting"`	服务的简短描述。
`url`	字符串	`"https://github.com"`	服务的访问链接。
`icon`	字符串	`"https://github.githubassets.com/favicons/favicon.png"`	服务图标的 URL，用于在仪表板上显示。

其中 settings 部分可以在设置界面修改，我们一般只要改 services 部分即可；

通过 Import Config 导入的设置，不会保存到服务器；

如果想保存到服务器，可以替换 /data 目录中的文件；

参考文档

jaberio/dashlet: Lightweight dashboard for small apps

地址：https://github.com/jaberio/dashlet
Dashlet

地址：https://jaberio.github.io/dashlet/