Dashy 社区 Showcase 全景指南：从真实案例看自托管仪表盘的最佳实践与提交你的作品

Dashy 社区 Showcase 全景指南：从真实案例看自托管仪表盘的最佳实践与提交你的作品

【免费下载链接】dashy🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashy

Dashy 是一个面向自托管用户的可高度定制的个人仪表盘项目，其 docs/showcase.md 是一份由社区共同维护的"展示墙"，收录了来自全球用户基于真实需求搭建的仪表盘截图与使用心得。本文以这份展示墙为主体，逐类剖析其中体现的配置模式、功能用法与布局思路，并结合 docs/contributing.md、README.md 与仓库源码，说明如何复刻这些效果，以及如何按官方流程将你自己的仪表盘提交进展示墙，让更多同好获得灵感。

展示墙是什么

Showcase 是 Dashy 项目 README 中标注的核心社区入口（见 README.md 顶部导航的 "User Showcase" 与 docs/readme.md 的文档索引），其定位是"看看别人如何用 Dashy，并分享你自己的仪表盘"。与纯功能文档不同，它提供的是真实运行场景：每一份作品都对应一份 Dashy 的 YAML 配置、若干组件与主题的组合，是学习配置语法、探索功能边界的一手素材。

从展示墙的案例分布看，社区用户主要用 Dashy 解决以下几类问题，下文将分别展开。

家庭实验室（Home Lab）与 NAS 场景

家庭实验室是展示墙中占比最高的使用场景，代表作包括：

• Home Lab 2.0：展示在 docs/showcase/1-home-lab-material.png，是展示墙的第一份作品，采用了 Material 风格的深色主题，聚合了常用服务入口。
• NAS Home Dashboard（作者 @cerealconyogurt，Re: #74）：对应 docs/showcase/6-nas-home-dashboard.png，将 NAS 相关服务、存储状态与常用工具集中到单一页面。
• Homelab & VPS dashboard（作者 @shadowking001，Re: #86）：对应 docs/showcase/8-shadowking001s-dashy.png，混合了本地家庭网络与云上 VPS 两类资源。
• Yet Another Homelab：对应 docs/showcase/9-home-lab-oblivion.png，采用了名为 "Oblivion" 的深色主题风格。
• Raspberry PI Docker Dashboard（作者 @henkiewie，Re: #622）：作者明确描述了自己的搭建方式——"这个仪表盘我每天都在用，里面甚至包含了一个通过 Logitech media server 和 icecast 配置的电台播放器；我制作了一个缩小版 Grafana 仪表盘并放进 iframe 以 kiosk 模式显示，用来监控树莓派最重要的指标；仪表盘是 adventure 主题的一份副本，改动保存到了/app/src/styles/user-defined-themes.scss"。这段描述直接印证了 Dashy 的iframe 嵌入、外部图表集成与自定义主题覆盖三种能力的组合用法。
• Ground Control（作者 @dtctek，Re: #83）：对应 docs/showcase/7-ground-control-dtctek.png。
• The Dragons Lair（作者 dr460nf1r3，Re: #684）：作者自述"这是我的新起始页，包含我最常使用的东西——当然还有龙"，对应 docs/showcase/13-dragons-lair.png。
• HomeLAb 3.0 / HomeLab 3.0（作者 @skoogee，Re: #279 / #1999）：作者的评价是"Dashy 是我试过的最完整的仪表盘，拥有所有功能，并且与同类产品拉开了差距，它现在是我的默认主页"。

这类场景通常涉及两个关键配置维度：多页面结构（sections与items的 YAML 组织方式）与服务状态监控。多页面与节/项结构可参考 docs/pages-and-sections.md，状态指示功能（Status Indicators）的用法见 docs/status-indicators.md。仓库自带的示例配置 user-data/conf.yml 展示了最基础的骨架：pageInfo（标题、描述、导航链接）、appConfig（主题）与sections（分组与条目）三段式结构，所有展示墙作品都是在这一骨架上的延伸。

服务聚合、网络管理与项目协作

• Networking Services（作者 @Lissy93）：对应 docs/showcase/2-networking-services-minimal-dark.png，是官方作者本人的作品，采用 "minimal dark" 风格集中管理网络服务入口。
• CFT Toolbox：对应 docs/showcase/3-cft-toolbox.png，典型的"工具箱"式聚合页。值得注意，docs/theming.md 中"页面级样式"一节正是以 "CFT Toolbox" 为例讲解如何按子页面定向应用 CSS（html下最顶层元素会带上小写连字符形式的页面类名，例如.cft-toolbox .item { border: 4px solid yellow; }），说明这份展示作品本身就是文档中页面样式特性的范例。
• Project Management：对应 docs/showcase/5-project-management.png，展示了将项目管理工具、看板链接与团队资源聚合到一个页面的用法。
• Dipan's Dash（作者 @Dipanghosh，Re: #777）：作者详细描述了组合式用法——"借助 iframe 嵌入能力，可以实现'组合与征服'：我把 Grafana 的图表嵌进 Dashy 并让它们自动刷新，还加入了 Uptime Kuma 的在线监控面板，Home Assistant 的面板同样可以嵌入进来。Dashy 太棒了！"。这再次验证了 iframe 是打通异构自托管服务的关键能力，对应的实现组件见 src/components/Widgets/IframeWidget.vue 与 src/components/LinkItems/IframeModal.vue。

内容流、加密资产与浏览器起始页

• Dashy Live（作者 @Lissy93）：对应 docs/showcase/10-dashy-live.png，官方用于管理项目开发相关链接的工作台。
• Dashy Example：官方示例仪表盘，对应展示墙中名为 "Dashy Example" 的条目。
• Crypto Dash：官方给出的小组件组合示例，用于监控加密货币的新闻、价格与数据，其完整配置以独立 gist 形式提供。该案例与 docs/widgets.md 中列出的 CryptoWatchList、CryptoPriceChart、WalletBalance 等小组件一一对应，仓库中的实现位于 src/components/Widgets/CryptoWatchList.vue、src/components/Widgets/CryptoPriceChart.vue 与 src/components/Widgets/WalletBalance.vue。
• Browser Startpage与Morning Dashboard：前者是浏览器起始页用法（对应 Dashy 的 Minimal 视图，见 src/views/Minimal.vue 与 docs/alternate-views.md）；后者是智能屏场景——"在 05:00 到 08:00 之间显示在我的智能屏幕上，包含我出门上班前通常要检查的所有信息"。
• System Monitor：单页聚合系统资源占用监控的示例，这类页面通常组合 SystemInfo 与 Glances/Netdata 系列小组件（见 src/components/Widgets/SystemInfo.vue 与 docs/widgets.md 的 "System Resource Monitoring" 章节）。
• 其余社区作品还包括MNDashboard（@mahrnet，Re: #1491）、Ratty222（Re: #384）、Hugalafutro Dashy（Re: #505）、Brewhack（@brpeterso，Re: #680）、First Week of Self-Hosting（u/RickyCZ，来自 Reddit r/selfhosted）、EVO Dashboard（@EVOTk，Re: #316）、The Private Dashboard（@DylanBeMe，Re: #419）、Bookmarks（对应 docs/showcase/4-bookmarks-colourful.png）、Croco_Grievous（u/Croco_Grievous）、Stefantigro（u/stefantigro）等。

从展示墙反推 Dashy 的核心能力清单

把展示墙作品按技术特征归类，可以得到以下能力对应表，每项都能在仓库中找到实现依据：

从源码结构看，展示墙几乎覆盖了 Dashy 的全部核心模块：页面骨架由 src/views/Home.vue 渲染，小组件统一继承 src/components/Widgets/WidgetBase.vue，主题切换通过修改根元素data-theme属性并依赖 CSS 变量实现（详见 docs/theming.md）。因此，展示墙不只是一组截图，更是官方与社区共同沉淀的"配置最佳实践图鉴"。

如何提交你的仪表盘到 Showcase

展示墙是一个开放社区栏目，官方欢迎任何用户提交自己的作品（参见 docs/contributing.md 中 "Share your dashboard" 一节的引导）。

提交方式

• 打开一个 Issue：使用项目预置的 Showcase 模板提交。
• 打开一个 Pull Request：在docs/showcase.md中追加你的条目后发起 PR，PR 中的条目格式见下文模板。

无论走哪条路径，都需要在提交材料中附上你的仪表盘截图与标题，便于维护者将作品合并进展示墙。

需要包含的信息

官方要求提交时提供以下内容：

• 一张高质量的仪表盘截图（必需）；
• 一个简短标题（官方注明"不需要多有想象力"）；
• 一段可选的描述：可以写你仪表盘上有趣或独特的地方、你的使用方式，以及它为什么很棒；
• 可选署名：你的名字或用户名，附上 GitHub、Twitter 或个人网站链接。

提交模板

如果你通过 Pull Request 提交，请使用与下述格式一致的条目结构（对应 docs/showcase.md 的 "Template" 一节）：

### [Dashboard Name] (required) > Submitted by [@username](https://github.com/user) (optional) [An optional text description, or any interesting details] (optional) ![dashboard-screenshot](https://example.com/url-to-screenshot.png) (required) ---

模板要点：标题为三级标题且必填；署名引用块与描述段落均为可选；截图使用 Markdown 图片语法且必填；每个条目之间以---分隔符隔开，与展示墙现有条目的排版保持一致。

提交前的自查清单

结合展示墙既有作品与 docs/contributing.md 的协作约定，建议在提交前完成以下检查：

1. 截图质量：使用高清、横向比例适中的整页截图，避免超长或模糊的图片；可参考展示墙中 Home Lab 2.0、Dashy Live 等条目的取景方式。
2. 配置可复现：如果你在描述中提到了小组件或 iframe 集成，最好同时说明所用的服务与大致配置思路（如 Crypto Dash 直接公开了完整配置），方便他人复刻。
3. 无敏感信息：截图可能暴露内网 IP、服务端口或私人书签，提交前请检查画面内容。
4. 格式一致：严格遵循上文的 PR 模板，保持### 标题→ 引用块署名 → 描述 → 截图 →---的结构，便于维护者快速审核合并。

结语

Showcase 展示墙是 Dashy 社区生态中最直观的"活文档"：它既记录了真实用户如何用 iframe 打通 Grafana、Uptime Kuma、Home Assistant，也沉淀了从深色家庭实验室到加密货币行情面板的各类配置范式。读完本文后，你既可以按 docs/widgets.md、docs/theming.md、docs/pages-and-sections.md 等文档复刻任一展示案例，也可以按上述提交流程把属于自己的仪表盘加入展示墙，让社区看见你的作品。

【免费下载链接】dashy🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!项目地址: https://gitcode.com/GitHub_Trending/da/dashy