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/dashyDashy 是一个面向自托管用户的可高度定制的个人仪表盘项目其 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作者 cerealconyogurtRe: #74对应 docs/showcase/6-nas-home-dashboard.png将 NAS 相关服务、存储状态与常用工具集中到单一页面。Homelab VPS dashboard作者 shadowking001Re: #86对应 docs/showcase/8-shadowking001s-dashy.png混合了本地家庭网络与云上 VPS 两类资源。Yet Another Homelab对应 docs/showcase/9-home-lab-oblivion.png采用了名为 Oblivion 的深色主题风格。Raspberry PI Docker Dashboard作者 henkiewieRe: #622作者明确描述了自己的搭建方式——这个仪表盘我每天都在用里面甚至包含了一个通过 Logitech media server 和 icecast 配置的电台播放器我制作了一个缩小版 Grafana 仪表盘并放进 iframe 以 kiosk 模式显示用来监控树莓派最重要的指标仪表盘是 adventure 主题的一份副本改动保存到了/app/src/styles/user-defined-themes.scss。这段描述直接印证了 Dashy 的iframe 嵌入、外部图表集成与自定义主题覆盖三种能力的组合用法。Ground Control作者 dtctekRe: #83对应 docs/showcase/7-ground-control-dtctek.png。The Dragons Lair作者 dr460nf1r3Re: #684作者自述这是我的新起始页包含我最常使用的东西——当然还有龙对应 docs/showcase/13-dragons-lair.png。HomeLAb 3.0 / HomeLab 3.0作者 skoogeeRe: #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 为例讲解如何按子页面定向应用 CSShtml下最顶层元素会带上小写连字符形式的页面类名例如.cft-toolbox .item { border: 4px solid yellow; }说明这份展示作品本身就是文档中页面样式特性的范例。Project Management对应 docs/showcase/5-project-management.png展示了将项目管理工具、看板链接与团队资源聚合到一个页面的用法。Dipans Dash作者 DipanghoshRe: #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 章节。其余社区作品还包括MNDashboardmahrnetRe: #1491、Ratty222Re: #384、Hugalafutro DashyRe: #505、BrewhackbrpetersoRe: #680、First Week of Self-Hostingu/RickyCZ来自 Reddit r/selfhosted、EVO DashboardEVOTkRe: #316、The Private DashboardDylanBeMeRe: #419、Bookmarks对应 docs/showcase/4-bookmarks-colourful.png、Croco_Grievousu/Croco_Grievous、Stefantigrou/stefantigro等。从展示墙反推 Dashy 的核心能力清单把展示墙作品按技术特征归类可以得到以下能力对应表每项都能在仓库中找到实现依据展示案例体现的用法对应功能/组件仓库依据多页面与分组布局pageInfo/sections/itemsuser-data/conf.yml、docs/pages-and-sections.mdGrafana、Uptime Kuma、Home Assistant 嵌入iframe 小组件与弹窗IframeWidget.vue、IframeModal.vue加密货币行情面板Crypto 系列小组件CryptoWatchList.vue 等系统资源监控聚合SystemInfo 与 Glances/Netdata 系列SystemInfo.vue、docs/widgets.md深色/彩色的个性化观感内置 40 主题与自定义主题docs/theming.md、src/styles/color-themes.scss复制主题并改动user-defined-themes.scss覆盖src/styles/user-defined-themes.scss浏览器起始页Minimal 视图src/views/Minimal.vue服务在线状态状态指示Status Indicatorsdocs/status-indicators.md从源码结构看展示墙几乎覆盖了 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中追加你的条目后发起 PRPR 中的条目格式见下文模板。无论走哪条路径都需要在提交材料中附上你的仪表盘截图与标题便于维护者将作品合并进展示墙。需要包含的信息官方要求提交时提供以下内容一张高质量的仪表盘截图必需一个简短标题官方注明不需要多有想象力一段可选的描述可以写你仪表盘上有趣或独特的地方、你的使用方式以及它为什么很棒可选署名你的名字或用户名附上 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)  (required) ---模板要点标题为三级标题且必填署名引用块与描述段落均为可选截图使用 Markdown 图片语法且必填每个条目之间以---分隔符隔开与展示墙现有条目的排版保持一致。提交前的自查清单结合展示墙既有作品与 docs/contributing.md 的协作约定建议在提交前完成以下检查截图质量使用高清、横向比例适中的整页截图避免超长或模糊的图片可参考展示墙中 Home Lab 2.0、Dashy Live 等条目的取景方式。配置可复现如果你在描述中提到了小组件或 iframe 集成最好同时说明所用的服务与大致配置思路如 Crypto Dash 直接公开了完整配置方便他人复刻。无敏感信息截图可能暴露内网 IP、服务端口或私人书签提交前请检查画面内容。格式一致严格遵循上文的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考