导读：
好的外观，会使人心情愉悦，合适的分布，能够方便操作，提高使用率和操作效率。
说了很多关于服务器架设，传感器链接，自动化处理，才想起来还没聊过外观的问题。虽然嫁接了Homebridge之后，大部分的操作可以通过喊Siri来操作，便利了很大，加上自动化处理的本身就是为了减少主动操作，然后终究有些时候还是要打开管理页面，不论是查看各个部件设备的状态也好，还是需要临时操作也好。
外观的问题完全见仁见智，我自己觉得很好的布局，我太太就不喜欢。正如我不喜欢“奶油小生”，但这并不阻碍别人喜欢。所以我只说如何的范畴。
基础操作
新版的Homeassistant提供了可视化模板，很多的部件的设计也非常的好看，所以基础的设定可以直接点点选选就能完成。同时也提供了横向排版和纵向排版，熟悉了之后还是蛮好操作的。 打开HA管理页网址比如：https://192.168.1.2:8321之后，点击右上角的三个点，选择配置UI
比如历史图表
可以添加各种传感器，并将历史数据展示出来，当然也可以使用显示实时数据
表盘显示实时数据
这时候问题就来了，太大块了，对不对，所以要用到横向平铺，也就是
水平堆叠选择
水平堆叠，并输入第一个传感器实体，然后点+添加第二张卡片。
加了三个之后就成了这样，感觉好很多，当然可以加更多，主要看使用的设备上的展示效果来决定加几个。还可以同时混合其他卡片类型，比如
按钮
所有的文字行使用Name可以自定义修改，部分卡片支持不显示名字，显示状态，图标等设定，都可以在设定卡片时的选项中设定。
toggle是开关的意思，就是按一下切换一次开或者关，
more-info是详细信息，长按显示该项实体的详情。
水平堆叠和垂直堆叠结合可以做成纵横结构，这个需要可以通过慢慢尝试来大致想要的效果，就不一一列举了。总之图像化之后，比起最初大部分时候要通过写code来设计方便了很多。门槛也降低了很多。
自定义卡片
HA还提供了对定义卡片的支持，外站有很多共享资源，搜索
homeassistant custom ui就会出现很多，。之前版本的HA添加自定义卡片是通过在Lovelace(也就是HA现在的管理界面)里面添加相应的js文件来实现，现在统一通过
配置页面的
资源选项卡来管理。而且，github上有高人把很多很多的资源整理到了一起，开发了HACS这个东西，里面搜罗了许许多多的集成和前端等资源，安装便捷，强烈推荐。
01
HACS链接:https://pan.baidu.com/s/125V78A3pCk0s2RnKBOpMnA提取码: ur51 下载上述文件，解压并放置于HA目录里
custom_components目录下，文件结构如下，注意外层目录为hacs，里面是其他子文件夹及文件。
02
注册github，并获取token，具体链接地址在：
https://github.com/settings/tokens创建新的token(Generate new token)
将得到的token保存备用。
03
回到HA，清除浏览器缓存，并刷新页面。最稳妥的自然是重启HA。然后侧边栏-配置-集成-添加，搜索hacs
添加后，在对应的位置粘贴刚才保存的github tokens。一路到完成，侧边栏会出现HACS，选择它，耐心等待几分钟加载资源，就可以看到许许多多的资源。
集成里面有许多可用的资源，而前端就是对应管理页面的自定义卡片啦，需要添加bar-card，就搜索它，添加，完成。相关的详情中有对应资源的使用说明，不再赘述。
