Hi，大家好我是天马。为了防止没看过我视频直接看我文案的小伙伴，我强烈建议你们先去看一下我视频比较好。因为我文案是没有配图的。

视频传送们：

1、网络部署和内网穿透：网页链接​

2、Docker安装和基础设置：网页链接​

3、Home Assistant 安装和基础设置：网页链接​

4、NAS和路由器接入Home Assistant：网页链接​

5、Home Assistant的UI设计的基础讲解网页链接​

6、Home Assistant自定义组件的基础讲解：网页链接​

文字版本主要也是两个目的：

1、方便大家二次查看和定位

2、方便大家复制代码和链接（因为代码会很多）

如果大家需要我github也同步，请务必留言告诉我哦！

1，网络部署和内网穿透

首先介绍网络部署，是因为网络是之后教程的基础和保证。如果这块都没有做好，那么会影响到后面的稳定。

我建议大家家里的网络最好有两个层级，一个是方便管理，另一个是考虑到安全。

一般来说，光猫就是第一个层级，然而光猫配置比较低，功能比较少，并且考虑到安全问题，所以不建议设备连接到光猫上，建议光猫只是简简单单的把外面的光纤信号接入到家中的作用。

这里给大家多科普几句，因为我发现很多人，在计算机网络这块还是很薄弱。

关于路由器配置，小白用户的意识还停留在10年前，WiFi开始普及的时候，在他们眼里路由器200块足以，买一个1000多的是不是疯掉了。然而，撇开功能不说，10年前宽带才2M，如今已经100M起步（上海），2021年估计能到500M，数据处理量都是原来的250倍，然而如今低价的路由器cpu性能却没有跟上。这其实也要怪大部分用户又不懂，厂商当然能缩水就缩水。性能这块，可不仅仅是因为数据量的提升。如今家里的链接WIFI设备也更多了，需要更好的协议和算法进行通讯，这块也需要路由器拥有好的性能。其他内容就不展开了，如果大家有兴趣，弹幕发’1‘。多的话，我给大家把这块聊清楚。

路由器功能，这也是小白不知道的地方。很多用户把路由器配置好，发现能用WiFi上网了，就认为搞定了。在大部分眼里，WiFi就是路由器的唯一功能，然而路由器跟NAS和电脑操作系统一样，它拥有太多的功能能服务到我们。举个我觉得每个人都用得到功能，广告拦截和网络攻击拦截。设置好后，连在我路由器上的设备，都不会看到广告，恶心酷，流氓奇艺都不会显示广告。你们知道的加速器，VPN，端口转发，网络隔离等等都是路由器的基本功能，然而大部分低端路由器都全部没有（就算有，性能都不够用）。

总之，建议大家上网设备都交给我们自己的路由器，方便管理，这也就是二级网络。

之前NAS的视频其实已经讲过端口转发，实现内网穿透，建议小白用户先看一下这两期视频（其实都听不懂我说的名词是什么）。我这里就不重复了，我这边补充一下，具体的内容。之前之所以没有具体说，是因为每个人家里网络结构不一样，路由器，光猫都不一样，这样讲解意义不大。但是私信问我多了，我还是给大家以我的案例举例说明一下，大家举一反三！

第一步，按照我说的光纤连入光猫，光猫连接路由器，路由器连接你的设备。

第二步，你要知道你光猫和自己路由器的后台地址，和用户名、密码。

第三步，先登录路由器的后台地址，输入用户名和密码

第四步，找到你路由器的端口转发（每个路由器都不一样），也有叫端口映射、虚拟服务器

第五步，找到你设备的服务端口，将其转出去。你设备服务端口就是内部端口，转出去的端口就是外部端口

第六步，登录你的光猫，找到端口转发

第七步，同样设置端口转发，之前的外部端口就是现在的内部端口，转出去，在外网访问的端口就是外部端口，建议设置5位。

所以我们需要智能家居，传感器，NAS等等都在这个二级网络当中，所有的交互都交给Home Assistant，我们只需要把Home assistant的端口转出去就行了（这块在Home Assistant安装教程中会讲）

Ok，以上就是本期视频的全部内容了。我们下个视频见！

2、Docker安装和基础设置

首先给大家介绍Docker。

Docker大家可以理解成，管理多个虚拟系统环境的工具。大家可以理解成在同一个机器上，运行了多个系统，Win7，Win10，Mac等等。有了这个感觉，Docker就可以运行一些我们经常用的平台，例如Home Assistant，百度云同步，Plex等等。所以我们就需要先安装Docker，然后安装Home Assistant，通过Docker管理我们Home Assistant。

肯定有小伙伴会说，不是所有群晖都支持Docker。没错，但也不是完全对，因为Docker是有Arm版本的，但是对于小白来说还是放弃吧。所以大家先去查一下自己的CPU是x86架构，还是Arm架构的，如果是Arm的那么后面的教程与你无缘了。我不知道这部分的小伙伴有多少，不幸是Arm架构的小伙伴，把’绝情‘打在公屏上！

然后就算支持Docker，但是例如我的418Play在群辉套件中心里面仍然是找不到的（最新的系统），那么我们就需要去官网上下载，在最下面找打下载中心，产品类型选择NAS，型号这块选择带Plus的，选择套件中心，找到Docker下载。然后打开群辉的套件中心，选择手动安装，即可。

然后，打开Docker，左侧点击注册表，默认只有官方的和阿里的，现在阿里的必须要登陆后才能使用，官方这个可以用，就是网速比较感人，这块我在NAS中级教程会详细说明。大家可以先使用，163，腾讯和DaoCloud，但是以我个人经验来说还是用官方的算了，这些国内的网速快了，但是镜像时不时会失效。

然后以后下载好的镜像就会在映像当中，当启动映像后，就会出现在容器中。

Ok，意思就是本期视频内容了，下期视频就会讲解如何安装Home Assistant。

3、Home Assistant 安装和基础设置

Hi，大家好，我是天马。

在这个视频开始，我做个统计，就是问一下大家需要我出对应文字的版本吗？因为之前还是有粉丝希望提供一下，方便他们复制黏贴代码。想要的小伙伴扣’1‘，觉得没必要的发’大可不必‘在公屏上。

本期视频想要教会大家如何安装Home Assistant及其配置环境。大家先打开Docker，点击左侧’注册表‘，输入Home Assistant，双击选择第一个。然后在镜像中就能看到真正下载，大约300Mb，下载后会解压安装，估计1G左右。

好了之后，打开控制面板，点击共享文件，查看是否有Docker文件夹，如果没有的话，手动新建，然后配置权限，不知道如何配置权限的，请看我这期视频。然后打开File Station，在Docker文件中创建Home assistant，这是目录以后就用来存储Home assistant镜像的配置文件。

好了之后，我们回到下载好的镜像处，点击启动，设置一个名字建议就是Home assistant，不要使用中文。然后点击高级设置，启用自动重启，这是为了当NAS启动后，能自动启动这个镜像。

点击‘卷’，这里需要配置路径，这就是之前说过的，文件夹。我们将config文件夹映射到 我们的创建Home assistant文件里面，选择添加文件夹，找到你刚刚新建文件夹，点击选择，这时候装载路径填写/config.

然后点击‘网络’，选择，最下方的‘使用与Docker Host相同的网络’，这里意思就是使用跟Docker一样的网络配置环境，我建议小白还是选择一致。

端口这边就不设置了，默认是8123想改的可以设置。

然后在环境变量里面加两个，value和variable，他们值就是视频中的内容，这是用于配置时间的，Shanghai这个可以改成你们所在的地方，不改也没事后面再Home Assistant后台里面也能修改。好了之后点击应用，点击下一步，确认一下是不是都完成了，然后点击应用。这样Home Assistant就配置完成了。

然后在浏览器内，输入你的内网IP地址：8123就能进入Home Assistant。第一次打开需要创建一个用户名，默认是超级管理员，注册好后就可以登录进去了。然后小伙伴记得按照我P2和NAS教程讲解的内网穿透教程进行操作配置到外部端口。

OK，这就是Home Assistant安装的全部教程了，我们下期视频见~

4、NAS和路由器接入Home Assistant

Hi，大家好，我是天马！

终于到我们把第一个智能家居接入我们Home Assistant平台的教程了。然后我也不知道大家是不是对这个感兴趣，因为我看别的Up这方面视频播放量惨淡，所以如果大家真的想看，一定要多发弹幕哈~如果弹幕突破400的话，我就继续更新这一系列的教程哦。

在视频开始前，根据之前大家留言和提问，我在这里先补充说明一下。

首先，我还是给大家简单讲一下这个Home Assistant系列教程的知识框架，因为这样可以帮助大家能更容易的理解如何使用Home Assistant，方便将来大家举一反三。

其实我这部分教程主要是分成4类：介绍，准备工作，接入智能家居，Home Assistant操作。

介绍其实就是把你们拉入坑里，告诉你们这是好东西。在P1视频里面已经完成了

准备工作，是让大家准备好东西，知识点，和环境，需要都得配置好。毕竟巧妇难为无米之炊。我们准备工具里面肯定需要智能家具，但是如果我没有跟你们介绍好下面两个大板块，你们一定不知道智能家具应该怎么处理。所以这一块我会放到后面再说

然后就是你们入坑的第一步，如何接入Home Assistant，应该有小伙伴会认为应该先将讲一下Home Assistant这个界面和功能（操作），认为应该先讲后面一块比较好，但是如果你们Home Assistant里面一个设备都没有接入的话，那么讲解Home Assistant一些操作就会很空洞，所以第三个板块和第四个板块是交替教会你们的。针对于第三个板块，其实很简单分成两类，一种是自己做智能家居，第二个是买厂商现成的智能家居。现成的智能家居接入Home Assistant我总结下来就这三个思路，用别人写好的已有的库，接入我们的智能家居这个是最方便的，第二个自己写或者基于第一个自己改，其实到时候我会分享我写好的，大家在我大树下乘凉就好了！快刷一波，‘良心’！，第三个就是自己DIY一些控件来实现接入，或者将普通家电变成智能家电。比如说，很多人都会买小米的灯带吧，最便宜也要159吧，其实你自己买一个可编程的灯带才20，ESP8266的控制板子才15，35元的东西，小米要159元。其实很多粉丝问我智能家居太贵，究竟要多少钱？其实很多东西都可以自己做和改装，后面我会一个一个教会大家，其实就是正常家电的价格，加上wifi通讯的板子的价格15-40元就搞定了。自己DIY制作的内容其实也差不多，很多人买小米的传感器，emmm其实真的不如自己做一个。

最后一个版块Home Assistant操作的内容，这一块主要是从基础的UI界面，到配置文件，到最后硬核的编程控制，大家放心我一定保姆级别，幼儿园水平喂到你们嘴边。并且如果你们细心的就会发现为什么我的Home Assistant空空如也，那是因为为了尽可能的保证我教程的正确性，我将Home Assistant包括Docker全部都删掉了，重新操作，进我最大努力的做出最良心的教程。

第二个想跟你们说的内容是，我最近也是临时发现的。我这样把所有视频上传到一起，还有另外的两个好处。

一个就是找到我的真爱粉，或者理性、能知道我究竟在做什么教程的小伙伴们。因为有些人给我的评论和弹幕我真的不知道是怎么理解我的，我也不知道怎么回复他们。所以这样就能过滤掉很多人，大家的观看体验就会好很多，然后我在这里也可以分享一下我的讨论群，这个群也都是隐藏在我视频当中，并不会对外公开。因为我想保证群的质量，如果质量很差，我觉得跟别的Up散养就失去群的意义了，如果小伙伴有兴趣可以加一下~但是别对外公开哦！

第二个好处就是我能知道，我这个视频的完播率究竟是多少，这个其实对于UP来说很伤，这块我也不展开了，以后有机会聊~

好了不啰嗦了，快上车，幼儿园园长发车咯~

正如前面说的，为了不空洞让你们能真正实践一些智能家居，从而看懂我的教程。所以这期视频主要对于Home Assistant界面大概介绍一下，并且接入我们的NAS和路由器。

然后我这里NAS是群辉，如果是别的NAS系统，你这边需要举一反三了，路由器我这边是梅林固件的华硕路由器，软路由的系统基本上也都可以，如果跟我不一样，大家也记得举一反三。

我之所以先将这个接入主要是因为，这个是Home Assistant最新版本提供的自动识别的接入方法。也就是这是最简单的接入方式，大家要学会这个，千万不要还是用晚上过时的方法，写配置文件，走弯路。并且学会这个逻辑后，举一反三，这个太重要了。因为每个人的家居都不一样，我财力和精力有限真的没办法覆盖全部，所以大家原谅我哈，重要内容再说一次，学会后，举一反三！

ok大概介绍一下你们看到Home Assistant的界面。

左边就是我们的导航栏，以后还可以在导航栏DIY自己的菜单，再熟悉导航栏后我们也可以将其隐藏，只显示图标，右侧就是每一个导航栏对应的视图。

概览可以理解成Home assistant最主要的界面，也是所有智能家居状态和控制的页面。现在最新的版本，把LoveLace集成进去了，比以前配置UI方便多了，我现在是为了做教程所以全部删除了，后面会一个一个具体说。UI一些设置和配置下期视频会讲，这里大家就留个印象。

地图这边就是所有设备，人员，家庭的地理位置可视化的地方，这块还是属于所见即所得，你说有什么用，除了定位老人和家中宠物，其他意义是不大，但是地图性冷淡的UI我很喜欢。

日志，大家可以理解成Home Assistant每天写的日报，以后平台任何家具出现情况都会在这里显示，所以以后大家真的有什么情况，除了描述你的问题外，一定也要把对应的日志也提供出来，不然群里的小伙伴，总不能内存含在嘴里就开机了？

历史这一块就很Amazing，这里就会展示所有家电历史的运行状态。

然后开发者工具，这里有‘状态’、‘服务’、‘模板’、’事件‘这四个都很重要，大家也别被代码什么的吓退了，其实Home Assistant已经把很多东西都做成可视化的控件，也就是我们鼠标点一点，设置一下，对应的代码参数和代码模块就帮我们写好了。再简单点，这块就是我P1里面说的，将所有设备都联动起来，并且定制化自己的生活习惯，从而真正做到智能家居服务于我们。

这里的配置其实就是设置的意思，里面的内容，用到一个，介绍一个吧。通知和用户设置，这个大家应该看一眼都能懂，我也不花时间介绍了。系统的语言是跟着用户走的，所以需要在用户这边设置。

然后我们退回到配置，点击集成。现在版本的Home Assistant，会自动搜刮局域网内大部分的智能家居了，肯定有小伙伴说，Up你这个骗子，我米家设备一个也没有出来？那是因为很多设备接入需要Key或者token才能添加到Home Assistant，这两个大家可以理解成是通讯协议中的密码。物联网的通讯协议，目前大家都是用公开的，所以像小米这样一步一步不然用户去拿到key或者token无疑会让我们这样的爱好者产生反感，总之道高一尺，魔高一丈，后面视频我会将怎么添加。然后小伙伴疑惑为什么没有识别到其他设备，其实你们点击下方的加号就能看到清单了，选择你们对应的产品，再把IP地址和key或者token填入就添加到Home Assistant里面了。如果2年前折腾过Home Assistant的人，一定会羡慕现在配置的门槛有多低，我也相信用的人多了，后面简单操作的UI会越来越多。

然后看我视频的大部分小伙伴应该都有NAS吧，所以这期视频也已群晖NAS为例，如何添加。其实很简单，找到群晖，点击配置，就结束了。如果看到Synology这块有多个设备，和多少个实体就代表成功了。设备这个比较好理解，其实就是识别到传感器，控制器等等具体的物理设备。然后实体，大家可以理解成这些设备能有怎么样的功能。

最后你们添加的所有设备 和 实体就能在后面两个列表中找到，区域注册表是家庭的不同房间，不同位置的区域划分，然后大家可以把不同的设备归类到不同区域，方便后面智能控制或者界面管理。

Ok，以上就是本期视频的全部内容了，下期视频会讲解，基础的UI配置显示我们的智能家居。我们下个视频见~

5、Home Assistant的UI设计的基础讲解

Hi，大家好，我是天马。

我知道你们如果看了视频一定会来专栏找需要复制的代码，为了刷数据，我也把这期文案放到了最下面，小伙伴们别打我哈~我也想看看有多少人能看到这里的话，看到的话在评论区发’就这？菜鸡UP‘哈哈哈哈我看看有多少人能看到

然后对应需要复制的内容我都会红色高亮！

去吧去复制吧！

这期视频的信息量有点爆炸，因为要讲清UI基础设置涉及到太多内容了。但是大家放心我一定保姆级别，幼儿园水平教会你们！

然后这期视频的UI设置，我打算分成三个难度讲解，其中最后一个难度我就点到为止，因为涉及到编程和操作系统的知识了，大家直接复制我的代码即可，以后会出UI设计的进阶教程。

截止到目前视频时间，Home Assistant版本为0.115.2(大家版本不能低于0.111),大家配置完成后，建议别升级。如果有不错的新功能，我会先出视频，然后教大家操作。

这三个阶段是层层递进的，所以要到大佬级别也得从第一部设置开始哦，千万别跳过前面的基础设置。

ok，准备好了么？快发弹幕‘上车’！！

首先，我们需要先安装HACS（Home Assistant Community Store）这就是Home assistant 的应用插件商店，以后都需要用到这个。

首先，打开评论区第一个链接下载最新版本的hacs，点击hacs.zip。值得注意的是，最好使用win电脑去上传，不然会丢失隐藏文件，导致安装失败。

HACS下载链接：https://github.com/hacs/integration/releases/tag/1.6.0

然后我们在NAS中打开file station，找到P4视频中创建的文件夹Docker，打开你们自己设定的Home Assistant的文件夹，一般默认情况下是没有custom_components和www文件夹，需要手动在这个目录中创建，注意是英文的下划线链接两个单词，千万不能错。

然后将我们刚刚下载好的hacs.zip解压后，上传到custom_components文件夹（用WIN），上传完毕后，打开docker，选择容器，选择home assistant，点击操作，选择重新启动。

接下来我们需要打开评论区第二个链接，去申请Token才能使用HACS，打开后如果没有账号的话就注册一个

HACS的token：https://github.com/settings/tokens

登录后，点击‘Generate new token’，在Note中输入HACS，然后点击下方的‘Generate token’，然后就能获得我们自己的Token了（安装HACS的时候需要用到）。

然后我们回到Home Assistant当中，找到配置，点击集成，点击右下方的加号，搜索HACS，多说一句，有粉丝问我P5教程没找到NAS和路由器怎么办？如果网络配置已经按照我P2说的，Home Assistant仍然没找到的话，可以自己手动，在这里搜索添加的。然后我们点击HACS安装，这个过程3分钟左右，然后再输入刚才你获得的Token，最后点击完成。然后在左侧就可以看到HACS了。以后如果找到不到HACS，基本上Docker容器重启一下，等2-3分钟即可恢复。

然后我建议小白用户以后的集成，设备，应用，插件都通过HACS安装，省的配置文件出问题。因为这些内容都是从Github下载下来的，（刚刚你们注册的那个网站），所以国内网速比较感人，大家操作都稍安勿躁多等等。大家以后安装第三方的内容只需要分清楚intergration集合还是frontend前端UI即可。基本上插件、主题都是frontend；设备、卡片、API基本上都是intergation。我们随便进一个看一下，安装方式有两个，一个是最傻瓜式的，点击下方加号，输入你要的内容，然后点击右下方安装，即可。如果搜索不到，可以先找到这个插件的主页（github搜索），找到对应的链接，在HACS中，点击右上方的三个点，选择Custom repositories，粘贴刚刚的网址，选择对应的类别，点击Add，需要等一下，这个是没有UI反馈的，如果上方显示了，那么就说明可以安装。如果不对，说明网址不对，或者分类选错了，或者你网络问题。之后就是点击安装即可。如果是frontend那么还需要配置路径，大家可以理解成，告诉UI去加载你安装的插件。

回到主页，点击头像，找到高级模式，打开。然后点击配置，我们找到lovelace仪表盘，上方选择资源，左下方就可以添加插件对应的配置路径，如果是HACS安装的路径都以/hacsfiles开头，后面对应的路径，可以去www文件夹，打开community，找到你安装插件的名字，打开后里面有包含你插件名字的js后缀文件. 然后只需要这这个文件名字和js文件名字即可，例如air-visual-card/air-visual-card.js，然后再加上刚刚说的前缀， /hacsfiles/air-visual-card/air-visual-card.js即可。对了注意路径里面的斜杠‘/’,不是反斜杠‘\’,键盘倒数第二行的那个，不会吧，不会吧，讲那么清楚，大家应该都不会出错了吧;

然后资源类型选择JavaScript模块。这样我们插件如何安装和配置就讲完了，网上教程有一大堆，建议大家还是按我的来，因为我的方法是零代码，便于萌新管理。

然后就是如何设置我们智能家居的UI界面了。在Home Assistant里面控制显示智能家居的模块叫卡片Card，整个视图叫做View。我们点击概览，选择右边的三个点，点击配置UI，上面的导航栏的加号可以理解成新建一个视图View，标题和图标只能显示一个，标题可以写中文。图标的话，输入mdi:加你要的icon。评论区有Icon的网址，那么多总归能满足你们了吧。以mdi-home为例，把-换成英文的冒号就行，注意是英文的冒号！以后修改图标都是这样的格式，我就不赘述咯。

icon地址：https://cdn.materialdesignicons.com/4.3.95/

主题这块，装了插件就有，没装就没得选，后面会说。然后点击徽章，徽章将出现在整个页面的最上方，需要的话自己设置，实体entity可以无限添加，实体可以理解成我们智能家居的功能。意思是一个设备会有多个实体，它的每一个按钮，每一个传感器都是实体。这个大家也无需纠结，不是实体的，你想选也选不了。实体对应的英文就entity，为什么每一个内容我尽可能说了他们对应的英文，是因为坚持到后面的高级教程的小伙伴，需要找到对应修改的代码，方便大家一一对应。快刷一波良心！

可见性就是我们的权限了，如果看不到，说明你们Home Assistant就只注册了一个用户，需要其他用户的小伙伴，去配置找到用户，最后点击加号添加，千万别点错了，‘人员’这是另一个东西，之后用到再讲。可见性有什么用，例如家中重要电器的开关，怕老人误操作可以不给权限。或者可以根据不同用户配置不同风格的UI，大家举一反三，理解我意思就行！

视图View的UI设置就没有其他了，然后就是在这个视图中我们如何添加我们智能家居的卡片Card。稍微有点基础的小伙伴就知道，如今home assistant已经集成lovelace，萌新只需要知道，我们现在鼠标点点就可以添加我们的卡片card了并且DIY修改它。

我们点击加号，就能看到你支持的卡片了，如果你们没有显示效果图，那么就说明，目前连接到Home Assistant中的智能家居的实体，没有一个支持这个卡片，如果你们已经添加了路由器和NAS，应该还是有卡片可以添加的。一个一个卡片讲过去，就太流水账了，而且也没必要。一个是后面我会教你一步步接入小米、美的、homekit、安卓tv等等很多设备，还有自己DIY的传感器、控制器，回头肯定会涉及，第二个大家看到目前教程，可以自己手动选择几个添加玩玩看，基本都是所见即所得内容，效果点击确定就能看到了。

然后还是有内容需要讲解一下的。首先之前提到安装插件，有些插件安装好，并且添加好资源路径，会直接在这个视图内显示出来，会有‘自定义’这个标示。但是不是所有插件都支持直接可视化，这时候就需要用到代码，因为答应萌新零代码这块就，放到后面再讲。

完成好添加卡片之后，应该在视图view中就能够看到他们了，每一个卡片有上下移动的操作可以改变位置，你们可以根据需求改变，如果设置的好，花亿点点时间还是能很好看的。因为这些card会随着浏览器自己自适应适配的，所以大家想随心所欲的调整，必定需要用到插件。我也相信在没有插件的情况下，你们上下移动改变位置，怎么弄都不是自己想要的效果肯定会抓狂。我这里给你们一个思路。首先建议别只有一个视图View，最好有多个，主视图主要负责好看，可以监控智能家居的状态。毕竟都折腾这个了，弄得逼格不高，肯定小米用户要嘲讽你的。第二，按照同类型设备分类，新建不同的视图view，例如灯、插座、媒体、清洁这样方便你快速定位去使用，毕竟高效使用才是关键。我不太推荐大家视图view，按照房间分类，理由就是，房间分类建议作为二级视图。在实际使用过程中，我们脑子里想操作某样设备，第一反应肯定想的是设备，而不是位置。当然这只是我个人建议，大家完全可以自己定义自己需要的，举一反三！佛系！

ok，恭喜你们完成第一阶段，记下来就是第二难度的设置，坚持到现在的小伙伴快发‘不愧是我’让我知道你们还在哈~

首先，这个版块初衷也很简单，如何用少量的代码，来进一步美化自定义我们的UI。我们回到刚刚讲的卡片

细心你的一定会发现，除了这些鼠标点点就可以设置的内容外，左下方有一个显示代码编辑器，这样我们进一步的DIY我们的UI，例如我们只需要输入一些神秘代码就可以添加圆角，等等。（还有很多修改UI的插件，也是添加在这里）

并且提及未显示的安装插件的卡片card，可以最下面找到’手动模式‘，type后面输入插件调用的名字，具体写什么名字，后面用到一个讲解一个。然后再将你需要显示的内容，安装插件的要求书写对应的代码，这个是每个插件都不相同，但是在插件的主页上，作者都会写清楚，如何使用。看到这里大家千万别骂我，说我罗里吧嗦一大堆，你就告诉我代码复制到哪里，怎么操作就行。如果真的这样，我就算把成千上万的插件都一个一个介绍过去，但是回头插件升级了，调用方式都变了，作者的主页上其实说的清清楚楚，但是因为我做的教程视频，只是授之于鱼，而不是授之于渔。环境一变动，大家立马崩溃，这不是我想要的。所以之前关注我的小伙伴会发现，每次实现某各个功能或者技术，我都会生动形象，甚至啰嗦的给你们先科普，搭建知识框架，让你们脑子中有一个结构和基本概念。这样回头也能真正理解，举一反三。不知道大家怎么想的，认可扣’1‘，不喜欢这样发’0‘。我真心想看看大家的想法。

ok，我们继续，其实大家看到现在，脑子里对于Home assistant的UI配置已经有了一定概念了。我可以给大家不严谨的总结一下，其实可视化我们的智能家居，本质上就是通过卡片card去调用我们的一个或者多个实体entity。然后具体可视化效果，其实取决于我们的卡片，所以针对于卡片的插件无非就是卡片的样式、卡片的布局和卡片的功能。接下来就是要讲全新的内容了，其实每个实体entity有两个类别，分别为状态和属性，大家其实不用管状态和属性的区别，只需要知道我们监控或者操作智能家居，都是通过查看或者修改它们的值来实现的。所以我们只需要面临一个问题，我们的卡片能否读取修改我们需要的值，第二个修改和展示的UI是否是我们满意的。

为什么要提及这个，因为我们DIY是受限于已提供的卡片，大家可以直接理解成模板，解决办法不是没有。要么找别人已经做好的，要么就是自己写。但是还是有些内容可以修改的，适用于全部卡片。首先大家先把必要的配置文件都准备好，首先我们需要在Home Assistant文件中新建themes文件夹，这里面是用来存放主题的；第二个文件夹不是必须的，但是我还是建议你们新建一个，就是在www文件夹内新建images文件夹，专门用来存放图片，便于管理。然后在根目录里面有很多yaml文件，这个就是home assistant配置文件的格式，以后修改代码都是在这个文件夹内，这次只讲UI所以其他yaml我就不介绍了。重点还是在configuration、customize和ui-lovelace这三个，一般情况下后面两个yaml文件你们是没有的。你们只需要下载configuration文件，在本地改一下名字再上传回去就行。然后在群晖的套件中心安装‘文本编辑器’，记得分配好权限，然后双击打开customize和ui-lovelace，通过文本编辑器，清空里面的内容，点击保存！

我们先打开configuration，然后点击文件，选择编码，记得修改成UTF-8，一定要修改！千万别忘记！然后在右下方可以看到是否自己修改成功！configuration文件是home assistant最基础的配置文件，每次修改好后记得保存，需要重启home assistant才能生效。我这里补充两点，第一个网上很多人说其他配置文件不重启也可以生效，但是我建议大家全部重启，以为我遇到无数次反例了，大家修改好任何一个yaml文件，需要查看效果请务必重启！第二个就是，重启Home Assistant一定要去Docker中重启，别去home Assistant配置中重启或者重新加载配置文件，同理，我也是遇到过太多反例了，重启总能解决90%的问题！重启的方法就是，打开Docker，点击容器，选择Home Assistant，点击操作，点击重新启动。以后我视频里面就说重启home assistant，就不操作演示咯！

注意缩进

homeassistant:

  customize: !include customize.yaml

lovelace:

  mode: yaml

如果你需要加载customize就添加这两行代码，大家一定要注意代码要严格保持缩进对齐！并且缩进不可以用tab，一定需要手敲空格，home assistant，默认是两个空格为缩进单位，一定要严格遵循，否则就会报错！这里稍微科普一下缩进是什么意思，大家简单理解成缩进里面的是外面那个的子类，相当于包含它的意思，所以一旦你多个空格和少一个空格，或者偷懒用tab都会报错。

如果你需要加载ui-lovelace就输入一下这两行。如果以后使用主题记得修改对应的mode（后面会讲）。基本上配置文件就差不多了，接下来介绍一下customize和ui-lovelace到底有什么用。首先customize可以直接自定义所有实体的属性值，这样我们就可以设置每次启动home assistant启动后，你可以设定你需要的特定属性值。你只需要写一下你要修改的实体，然后缩进，一行行去写你需要修改的值，当中用冒号隔开即可。最常用的就是friendly_name，重新命名实体的名字，因为有时候卡片能定义卡片的名字和功能的名字，但是实体的名字却不能修改。我知道在配置里面的自定义可以修改，但是实体实在是太多了，这样修改不便于我们查看和管理，第二个就是当你使用主题的时候，需要你设定customize才能加载部分卡片（算模板的限制）所以我建议大家在customize当中修改！

然后就是ui-lovelace，这个就相当于自己推翻全部的视图，自己完全手动定义从视图View到卡片card。我建议初学者不要使用，之所以要讲，那是因为如果你需要全新的主题，其原理根本上是加载别人写好的ui-lovelace，比如说我这里的Homekit Infused，所以建议一般情况下注释掉我让你写lovelace的两行代码。注释就是选中你要注释的代码control/command + 斜杠！注释的意思就是让代码失去效果，万一以后需要用到，你删掉就不太方便了，还有注释还能批注代码省的你忘记这块代码是干嘛的了！

ok，第二部分结束了，理论上看完这个部分的小伙们，就知道如何代码调用我们的插件，实现更多定制化的卡片card，并且知道如何设置属性值和完全定制我们的UI界面。来，坚持到这里的小伙伴发送‘不愧是我’，让我看看还剩多少！我们接下来就进入最后的板块，其实这块就是教你们如何用我整理好的代码，加载全新UI的lovelace。这个主题我并非是原创，你们看到的github他们也不是原创，都是一群爱好者用爱发电一步步改出来的。可以说是智慧的结晶，也希望小伙伴别骂我UP不要脸，篡改别人的劳动成果作为自己的作品还洋洋得意。如果你们听懂我前面的意思，或者知道github的精神，其实这代码相当于知识迭代发展的结晶，每一个人的修改和添砖加瓦都是值得肯定的，更有甚者拿去商用都无可厚非。在此我自己承诺，我所有的代码都会公开（不公开你们怎么跟着我教程走下去），也欢迎鼓励大家一起来折腾，如果大家都有兴趣我们也可以像荷兰小哥他们几个一样，一起维护跟新！有兴趣的小伙伴可以私聊我，然后一起折腾。再开始第三部分前我还是说一下我做了哪些工作，首先是页面的汉化，英语就算了，原作者他们都出现荷兰语，我差点吐血。第二，我重新编辑了主页，让画面更有逼格。第三增加了多个视图view，快速定位我们需要的设备。第四，根据国内情况，修改部分传感器，不然使用原作者的代码，就会一路报错。原作者的升级链接和提示，我仍然保留，但是每次升级除非大佬不然我不建议自己升级，如果真的想折腾，一定要记得备份home assistant里面全部的文件夹，方便恢复！切记！最好大家等我视频更新，一般有重大突破的话，我就会同步更新，并且出教程。

ok，我们进入最后一部分。首先讲一下如何手动安装我们的插件，之前说过插件分成两类，集合intergration和frontend前端。这两个安装的目录分别对应的目录是custom_components文件夹，和www里面的community文件夹。intergaration的插件在github主页上找到release，下载最新版本，基本上都有一个文件夹叫custom_components，把他里面的内容对应复制过去即可。frontend的插件，同样在主页上找到release，下载最新版本，但是这里需要下载的是插件的js文件，然后在www里面的community文件夹里面新建一个文件夹，取一个英文名字，建议最好跟你js文件名字一致，最后拖入你的js文件。结束了？用我们刚刚学的幼儿园知识，还需要在配置一下资源路径，但是这里的路径可不能以/hacsfiles开头了，因为是手动安装，我们需要用/local/community/开头，这里的local是固定的，home assistant会自动去找到www文件夹。后面的路径就是你刚刚新建的文件夹名字和手动安装js文件。

然后开始导入我改良后的主题吧，首先是安装必要的插件，必须一个不拉哦。大家自己暂停自己一个一个去安装哦，可以在评论区复制。基本上都可以在hacs内安装。

注意名字不一定完全跟我写的一样，但是90%都是重合的

必须安装的插件 frontend

自动更新实体 

• auto entities

按钮 

• button-card

自定义书签、表头

• custom-header 

自定义卡片的位置，排列，大小 

• card-mod

• card-tools

• layout card

• mini graph card

• more-info-card

• state-switch

可滑动卡片 

• swipe card

天气 

• weather card;

• simple weather card

扫地机器人（米家）

• simple vacuum card

日历 

• calendar-card

播放器 

• mini media player;

• upcoming-media-card

搜索 

• search-card

空气质量 

• air-visual-card

空调卡片 

• Thermostat popup card（手动）https://github.com/DBuit/thermostat-popup-card

灯卡片 

• Light Entity; 

• light-popup-card （手动） https://github.com/DBuit/light-popup-card

必须安装的插件intergration

Lovelace Gen

browser_mod

小米电风扇 https://github.com/syssi/xiaomi_fan

• Xiaomi Mi Smart Pedestal Fan Integration（手动）

米家空调伴侣 https://github.com/syssi/xiaomi_airconditioningcompanion

• Xiaomi Mi and Aqara Air Conditioning Companion Integration（手动）

美的空调 

• Midea Smart Aircon

米家空气净化器/加湿器 https://github.com/syssi/xiaomi_airpurifier

• Xiaomi Mi Air Purifier and Xiaomi Mi Air Humidifier Integration（手动）

米家智能插座 https://github.com/syssi/xiaomiplug

• Xiaomi Smart WiFi Sockets and Power Strips（手动）

米家电饭煲 https://github.com/syssi/xiaomi_cooker

• Xiaomi cooker （手动）

大家安装好后，我还是给恶心云链接给大家下载，github网速太慢，我NAS的话我怕我家带宽爆炸，这里也问一下小伙伴们，你们希望我以后给恶心云链接的扣’1‘，github扣’2‘。下载好后，解压，上传homekit-infused文件夹，packages文件夹，comkit-infused.yaml文件到home assistant文件夹内，并且需要创建customize.yaml文件。然后打开themes文件，注意添加你下载themes文件夹中的内容，注意是添加别把你之前的主题给覆盖了。然后在打开www，打开images，同理添加对应文件夹内容，注意是添加！然后我们打开configuration.yaml文件，随便找一个位置粘贴进去，注意打开后先选择utf-8，然后粘贴往后，注意缩进是否是对的？对比我视频内容就行。好了后点击保存。

homeassistant:

  customize: !include customize.yaml

  packages: !include_dir_named packages/

frontend:

  themes: !include_dir_merge_named themes/

browser_mod:

alarm_control_panel:

  - platform: manual

    name: Home Alarm

    code: !secret alarm_code

    delay_time: 0

    trigger_time: 100

    disarmed:

      trigger_time: 0

    armed_home:

      delay_time: 0

    disarm_after_trigger: false

lovelace:

  mode: storage

  dashboards:

    homekit-infused:

      mode: yaml

      title: Homekit Infused

      icon: mdi:home-assistant

      show_in_sidebar: true

      filename: homekit-infused.yaml

sensor:

  - platform: time_date

    display_options:

      - 'time&#​39;

      - 'date&#​39;

      - 'date_time&#​39;

      - 'date_time_utc&#​39;

      - 'date_time_iso&#​39;

      - 'time_date&#​39;

      - 'time_utc&#​39;

      - 'beat&#​39;

然后打开www，打开images，打开person_image，里面的照片就是首页会展示的照片，大家记得替换，注意使用png，分辨率别超过400x400，其中除了人物照片，home.png就是你家的平面图，这个回头会单独视频讲解大家别慌。

然后我们打开homekit-infused文件夹里面的内容这里面就是ui-lovelace的高级模板！坚持住，快胜利了。basic文件夹里面就是最基础的UI控件设置，这次不讲了大家默认别动。basic.yaml是多个视图View的设置文件，建议也是别动了，如果你们想修改，弹幕告诉我，多的话我出进阶的UI教程（基础篇已经那么长了）。然后我们进入user文件夹，device_counters是统计所有设备的配置文件，这个我觉得还是挺鸡肋的回头我会改掉。 notifications主要是复制系统通知的文件，这个当我教会你们自动化控制后再教你们使用，目前这两个文件大家别动它就行。然后config文件当中，大家只需要修改head_config文件，这里面就是控制每一个页面显示的标题，大家可以根据自己需求修改。templates文件里面也都是UI控件的模板，你们不会定义card就别去修改哈，如果你们有兴趣我也会在进阶的UI设置里面教会你们。好了最后一部就是重头戏了，view文件就是每一个视图具体展现的内容的配置文件了，例如frontpage这个文件夹内就是首页展示的内容，同理有能力的小伙伴可以自行修改，大家看到里面的内容太多了一个一个讲过去不太现实，所以我打算之后接入一个一个智能家居后，在同步去讲解。你们操作到这里重启home assistant，然后进入homekit infused这个模板，等待2分钟，应该就能正常启动了。剩下的我觉得操作你们鼠标点一下就知道了，也无需我多讲了。我觉得你们看完，操作好后，肯定是迫不及待的需要接入我们的设备了，大家现在打开页面不是空空如也，要么就是因为跟我智能家居不一样导致调用报错，这块我会出一个智能家居讲解一个，大家别急哈TT虽然这样说了，估计你们还是会催跟我，我真的已经拼命了，最近也是开学我手头事情真的一堆TT我视频的质量对应需要花费的时间，小伙伴应该能看的出来的吧。细心的小伙伴会发现我home assistant录制画面时间都是在8月份，所以文案和资料准备的更早。然而这视频播放量，是有点惨的，毕竟也比较小众~但是正是坚持能看到这里的小伙伴的存在，我会继续保持更新的！坚持！勿忘初心！

ok以上就是本期视频全部内容了！我们下个视频见！