Skip to Content
IoT 대시보드리치 콘텐츠

리치 콘텐츠

Markdown 위젯을 사용하면 보드에 서식 있는 텍스트, 이미지, 라이브 값을 추가할 수 있습니다. 도움말 섹션 만들기, 상태 메시지 표시, 문서 페이지 구축, 또는 데이터에 컨텍스트 추가에 사용합니다 — 모두 간단한 마크다운으로 가능합니다.

서식 있는 텍스트, 라이브 데이터 변수, 제목, 목록, 링크, 코드 예시가 있는 Markdown 위젯을 보여주는 리치 콘텐츠 데모

추가 가능한 것

  • 서식 있는 텍스트 — 제목, 굵게, 기울임꼴, 목록
  • 링크 및 이미지 — 외부 리소스에 연결하거나 비주얼 표시
  • 테이블 — 정보를 명확하게 구성
  • 동적 변수 — 텍스트에 라이브 데이터를 인라인으로 표시, 예: 실시간으로 업데이트되는 센서 23°C
  • 커스텀 HTML — 마크다운만으로는 충분하지 않을 때 커스텀 레이아웃, 색상, 스타일을 위해 원시 HTML 혼합

기본 서식

마크다운은 간단한 문자를 사용하여 텍스트 서식을 지정합니다:

  • # 제목 — 큰 헤더
  • **굵은 텍스트** — 굵게
  • *기울임꼴 텍스트* — 기울임꼴
  • - 또는 숫자 — 목록

링크: 대괄호 안에 텍스트, 괄호 안에 URL — [IronFlock](https://www.ironflock.com)

이미지: 링크와 동일하지만 !로 시작 — ![대체 텍스트](https://example.com/image.png)

테이블: 세로 막대 |로 컬럼 구분.

이 모든 것을 외울 필요는 없습니다 — 마크다운은 직관적이며 사용하면서 빠르게 익힐 수 있습니다. 전체 레퍼런스는 공식 Markdown 가이드를 참조하십시오.

동적 변수

이곳에서 마크다운 위젯이 강력해집니다: 텍스트에 라이브 데이터를 직접 주입할 수 있습니다.

마크다운 콘텐츠에서 변수 이름을 이중 중괄호로 감쌉니다: {{variableName}}

그런 다음 위젯의 변수 구성에서 다음 항목을 추가합니다:

  • 레이블 — 변수 이름(텍스트에 작성한 내용과 정확히 일치해야 함)
  • 값 — 앱의 라이브 데이터 컬럼에 연결

예: 마크다운 필드에 현재 온도: {{temp}}°C를 작성하고, 디바이스의 온도 컬럼에 연결된 레이블 temp로 변수를 추가합니다. 위젯은 현재 온도: 23°C로 렌더링되고 새 데이터가 도착하면 실시간으로 업데이트됩니다.

사용 사례

  • 환영 페이지 — 컨텍스트와 지침으로 사용자를 보드에 소개
  • 상태 요약 — 설명 텍스트에 임베드된 핵심 메트릭 표시
  • 도움말 문서 — 보드에 직접 사용 방법 가이드 임베드
  • 동적 메시지 — 현재 상황에 맞게 조정되는 라이브 값과 정적 텍스트 결합
Last updated on