homeassistant 篇三:在ui界面中配置仪表盘 - Markdown Card的介绍与使用
在上一篇中,我展示了目前正在使用的Dashboard的样式以及大致的配置方法,这一篇着重介绍其中的一个卡片:Markdown Card
介绍
Markdown Card现在最新版本的hass中,是默认自带的卡片,无需额外安装即可使用
ps:这个是我很喜欢用的卡片,在我的Dashboard中有很多地方用到了
比如下图
使用
想要用好这个卡片,首先要了解markdown语法,Markdown是一个很常用的语法格式,也比较简单,网上有很多教程,在这就不水字数了
在hass中Markdown Card支持模板,所以可以通过模板获取实体的各种状态、属性等,达到想要的效果。
上图中的三个卡片都是通过Markdown Card完成的。其中,左边最长的这个,是每天推送一个故宫文物,以此举例
1 添加卡片
在仪表盘中,点击右上角三个点,选择编辑仪表盘
点击添加卡片
选择markdown卡片即可
2 文本内容
刚添加了markdown card后,默认会带有如下内容
The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more.
For more information see the [Markdown Cheatsheet](https://commonmark.org/help).
这个演示了文字的加粗、斜体、删除、超链接等等最基础的markdown语法,我们删掉即可
3 获取实体状态
比如可以通过模板来获取指定实体的状态
{{states('fan.broan')}}
显示为风扇的状态
off
4 获取实体属性
比如通过属性名来获取指定实体的属性值
{{state_attr('fan.broan', 'icon')}}
显示为风扇所用的icon
mdi:air-conditioner
5 使用icon
Markdown Card中可以使用hass的icon,具体格式为
<ha-icon icon="mdi:script-text-outline"></ha-icon>
如上图,mdi:script-text-outline是我想使用的图标,配合# 我把图标成功放到了标题中
同样的还有 朝代、作者我放在同一行显示,作为副标题
# <ha-icon icon="mdi:script-text-outline"></ha-icon> 诗词
## {{ state_attr('sensor.mei_ri_shi_ci', 'origin')['dynasty'] }} {{ state_attr('sensor.mei_ri_shi_ci', 'origin')['author'] }}
6 使用循环
当某些想要的属性太长时,可能会影响卡片的排版,导致整个Dashboard变得很难看,这时,要么增加样式,限制卡片的高度(ps.我搞不定),要不就控制输出
如上的实体中,为想要取content的内容,那么通过循环来控制取的行数
首先,将content属性取出,作为一个列表,再循环这个列表到指定次数即可
{% set content_list = state_attr('sensor.mei_ri_shi_ci', 'origin')['content'] | list %} # content取出当作列表
{% for content in content_list[0:10] %} # 控制取列表中的0-10行
*{{ content }}*
{% endfor %}
这样,通过markdown完整的显示出一个每日诗词的卡片了
附上完整代码
## <ha-icon icon="mdi:script-text-outline"></ha-icon> 诗词
### {{ state_attr('sensor.mei_ri_shi_ci', 'origin')['title'] }}
#### {{ state_attr('sensor.mei_ri_shi_ci', 'origin')['dynasty'] }} {{ state_attr('sensor.mei_ri_shi_ci', 'origin')['author'] }}
{% set content_list = state_attr('sensor.mei_ri_shi_ci', 'origin')['content'] | list %}
{% for content in content_list[0:10] %}
*{{ content }}*
{% endfor %}
xins134
校验提示文案
即墨烟花笑
校验提示文案
即墨烟花笑
校验提示文案
xins134
校验提示文案