在ui界面中配置仪表盘 - Markdown Card的介绍与使用

在上一篇中，我展示了目前正在使用的Dashboard的样式以及大致的配置方法，这一篇着重介绍其中的一个卡片：Markdown Card

介绍

Markdown Card现在最新版本的hass中，是默认自带的卡片，无需额外安装即可使用

ps：这个是我很喜欢用的卡片，在我的Dashboard中有很多地方用到了

比如下图

使用

想要用好这个卡片，首先要了解markdown语法，Markdown是一个很常用的语法格式，也比较简单，网上有很多教程，在这就不水字数了

在hass中Markdown Card支持模板，所以可以通过模板获取实体的各种状态、属性等，达到想要的效果。

上图中的三个卡片都是通过Markdown Card完成的。其中，左边最长的这个，是每天推送一个故宫文物，以此举例

1 添加卡片

1. 在仪表盘中，点击右上角三个点，选择编辑仪表盘
   

2. 点击添加卡片

3. 选择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 %}