不知道大家有没有同样的感受：每当家里逢年过节或者周末来一波亲朋好友，进门寒暄完后的第一句话往往惊人的一致——“哎，你家WiFi密码多少来着？（请看9月9日文章，访客wifi卡片已经更新，请用新方案）”
这时候，如果没有提前准备，场面往往会有一丝小尴尬。有的时候是密码太复杂自己都记不清了，有的时候还得跑去翻箱倒柜找路由器背面的贴纸，手忙脚乱的一顿折腾，体验实在是不怎么优雅。
其实这个问题，早在几年前我刚开始“入坑”Home Assistant（简称HA）智能家居系统的时候，就构思过一个解决方案，就是把访客wifi整合到HA的仪表盘里，因为HA的UI界面是可以加载网页文件的，我的思路就在设计个网页文件放HA目录做本地加载。那时候我正痴迷于折腾平板中控上墙，看着墙上那块屏幕，我就在想：既然都是家里的智能中控了，为什么不专门给客人留一个高大上的WiFi展示看板呢？
今天就给大家分享一下这个能让你在朋友面前“优雅装X”的HA访客WiFi方案。
第一步：建立路由器后台的专属访客网络
为了安全和隐私起见，首先强烈建议大家在路由器的后台，专门开启一个“访客网络”。这个网络和我们家里的主网络是隔离的，隔离局域网（现在的路由器基本上都支持设置访客wifi），单独设置一个好记又或者有趣的WiFi名称（比如：fangke_wifi），这样既方便客人连接，又能保护家里的内网设备。
第二步：极简的前端三剑客
有了访客网络，接下来就是中控屏上的展示界面了。其实完全不需要什么复杂的编程，只需要最基础的前端三剑客：一个 HTML 文件、一个 CSS 文件，再加上一张透明背景的路由器图片，就可以全部搞定。
为了方便管理，我们在电脑上新建一个名为 wifi 的文件夹，把这些素材统统丢进去。
然后，打开HA的配置目录，找到根目录下的 www 文件夹（如果没有就新建一个），把刚刚的 wifi 文件夹整个放进去。这样一来，我们在HA里访问这个网页的本地路径就是：/local/wifi/。
第三步：配置HA仪表盘
素材就位后，我们就把它请上仪表盘：
- 在HA顶部的导航栏，点击编辑，新建一个“单卡片视图”（Panel View）。
- 视图名称可以写“访客WiFi”，网址路径填
wifi。
- 在这个新建的视图里，添加一张“网页卡片”（Webpage Card / iframe）。
- 网址（URL）一栏，填入我们刚才提到的路径：
/local/wifi/。
- 点击保存，大功告成！
大致效果如下面GIF图片所示，路由器和wifi信标是动态展示的，大家也可以发挥自己的创意，在此基础上增加一些上网相关的功能（比如网速展示、家长控制按钮等），这里只是提供一个思路。
我的UI界面设计
这个访客界面的UI，我是花了一些小心思的，主要由以下几个部分构成：
- 当前设备数：实时显示目前路由器上当前联网的设备总数量（需要路由器接入ha，获得上网设备数量的实体）。
- 动态WiFi图标：让整个页面看起来生动不死板。
- 3D路由器视效：家里真实路由器照片的缓缓旋转效果，科技感拉满。
- 直观的账号密码展示：超大号字体显示WiFi名称和密码，一目了然。
💡 备注避坑：
想要在纯静态的网页端实时显示路由器连接设备的总数量，我们需要调用HA的API。这就需要在HA后台创建一个“长期访问令牌”（Long-Lived Access Token）。拿到令牌后，回到我们的 wifi 文件夹，打开 HTML 源代码，把令牌替换进去即可。
这里预留一下访客WiFi界面的核心 HTML 代码框架，大家拿回去根据自己的情况替换里面的令牌、上网设备数量的实体、wifi账号和密码就行（html代码被转义了，大家下载附件压缩包）：
源代码已经删除，请用我新开发的ha原生卡片
终极体验：人来亮屏，优雅从容
当这一切配置妥当，下次家里再来客人的时候，你再也不用翻箱倒柜找密码了。
你可以头也不抬，非常优雅且随意地指着墙上的中控屏说：“WiFi在那边，自己连一下哈。”
由于我的HA中控平板配合了人体存在传感器，做了“人来亮屏、人走灭屏”的自动化。当朋友好奇地走向那块原本黑息屏的平板时，屏幕瞬间亮起，充满科技感的动态访客WiFi界面映入眼帘……
那一刻，看着朋友惊讶又羡慕的眼神，我只能说：这波啊，属实是装到了！😎
写在最后
总结一下，本方案主要是提供一个HA系统结合访客WiFi的思路。大家完全可以根据实际情况，利用AI辅助设计一个更漂亮的Web页面，放入HA的www目录即可；当然，直接“抄作业”用我这套也没问题！
发表于 2026-9-1 15:21:26
