Members

members 숏코드는 팀 멤버나 기여자를 시각적으로 매력적인 카드 레이아웃으로 표시합니다. 각 멤버는 이름, 사진, 역할, 그리고 마크다운을 지원하는 설명을 가질 수 있습니다. 이 숏코드는 그리드(카드 뷰)와 라인(가로 카드) 레이아웃을 모두 지원합니다.

사용법

{% members() %}
이름 | 역할 | 이미지 경로 | 설명
김철수 | 프론트엔드 개발자 | ./member1.svg | **반응형** 웹 앱에 열정적
이영희 | 백엔드 엔지니어 | ./member2.svg | *확장 가능한* 아키텍처 전문가
{% end %}

매개변수

멤버 데이터 형식

각 멤버는 파이프(|) 구분자를 사용하여 한 줄로 정의됩니다:

이름 | 역할 | 이미지 경로 | 설명

• 이름 (필수): 멤버 이름
• 역할 (선택): 멤버의 역할 또는 직함
• 이미지 경로 (선택): 멤버 사진 경로 (상대 또는 절대 URL)
• 설명 (선택): 간략한 설명 (마크다운 지원)

예제

기본 그리드 레이아웃

멤버를 3열 그리드 카드로 표시합니다:

{% members() %}
김철수 | 프론트엔드 개발자 | ./member1.svg | **반응형**이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다.
이영희 | 백엔드 엔지니어 | ./member2.svg | *확장 가능한* 마이크로서비스 아키텍처를 전문으로 합니다.
박민수 | DevOps 리드 | ./member3.svg | CI/CD 파이프라인으로 모든 것을 자동화합니다.
{% end %}

김철수

프론트엔드 개발자

반응형이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다.

이영희

백엔드 엔지니어

확장 가능한 마이크로서비스 아키텍처를 전문으로 합니다.

박민수

DevOps 리드

CI/CD 파이프라인으로 모든 것을 자동화합니다.

2열 그리드

멤버를 2열 레이아웃으로 표시합니다:

{% members(cols=2) %}
김철수 | 프론트엔드 개발자 | ./member1.svg | **반응형**이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다.
이영희 | 백엔드 엔지니어 | ./member2.svg | *확장 가능한* 마이크로서비스 아키텍처를 전문으로 합니다.
{% end %}

김철수

프론트엔드 개발자

반응형이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다.

이영희

백엔드 엔지니어

확장 가능한 마이크로서비스 아키텍처를 전문으로 합니다.

라인 레이아웃

멤버를 가로 카드로 표시합니다 (한 줄에 하나씩):

{% members(layout="line") %}
김철수 | 프론트엔드 개발자 | ./member1.svg | **반응형**이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다. 5년 이상의 경험을 보유하고 있으며, 소규모 스타트업부터 대기업까지 다양한 프로젝트를 진행했습니다.
이영희 | 백엔드 엔지니어 | ./member2.svg | *확장 가능한* 마이크로서비스 아키텍처를 전문으로 합니다. 분산 시스템에 대한 깊은 전문 지식을 보유하고 있으며, 수백만 건의 요청을 처리하는 고성능 API를 구축했습니다.
박민수 | DevOps 리드 | ./member3.svg | CI/CD 파이프라인으로 모든 것을 자동화합니다. 원활한 배포를 보장하고 여러 클라우드 제공업체에서 인프라를 유지 관리합니다.
{% end %}

김철수

프론트엔드 개발자

반응형이고 접근 가능한 웹 애플리케이션을 만드는 데 열정적입니다. 5년 이상의 경험을 보유하고 있으며, 소규모 스타트업부터 대기업까지 다양한 프로젝트를 진행했습니다.

이영희

백엔드 엔지니어

확장 가능한 마이크로서비스 아키텍처를 전문으로 합니다. 분산 시스템에 대한 깊은 전문 지식을 보유하고 있으며, 수백만 건의 요청을 처리하는 고성능 API를 구축했습니다.

박민수

DevOps 리드

CI/CD 파이프라인으로 모든 것을 자동화합니다. 원활한 배포를 보장하고 여러 클라우드 제공업체에서 인프라를 유지 관리합니다.

이미지 없이

이미지 경로가 없는 멤버는 기본 아바타 플레이스홀더를 표시합니다:

{% members() %}
최지훈 | 보안 전문가 | | 애플리케이션 보안과 규정 준수를 보장합니다.
정수연 | 기술 작가 | | 명확하고 포괄적인 문서를 작성합니다.
{% end %}

최소 정보

이름만으로 멤버를 표시할 수 있습니다:

{% members(cols=4) %}
강태우
윤서아
장민호
한유진
{% end %}

디자인 특징

• 반응형: 모바일에서는 단일 열, 큰 화면에서는 다중 열로 자동 조정
• 테마 지원: 다크 및 라이트 테마와 완벽하게 통합
• 호버 효과: 카드가 호버 시 올라가고 외관이 변경되어 더 나은 상호작용 제공
• 마크다운 지원: 멤버 설명이 마크다운 포맷팅 지원 (볼드, 이탤릭, 링크 등)
• 유연한 레이아웃: 필요에 따라 그리드 또는 라인 레이아웃 선택 가능
• 기본 아바타: 이미지가 제공되지 않으면 깔끔한 플레이스홀더 아이콘 표시