HTML은 태그와 웹 페이지 객체로 작성합니다. 웹 페이지 객체는 다음과 같이 작성하며 실행할 때 미리 정해진 HTML 코드로 바뀝니다.

${type: "search"}

템플릿

기본 템플릿은 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>고객 지원</title>
</head>
<body>
  <div id="header">
    <div><img src="/resource/image/app/logo.png?2.0.0_1467" />고객 지원</div> 1
  </div>
  <div id="main">
    ${type: "search"}  2
    ${subpage}  3
  </div>
  <div id="footer">
    <div>&copy; 2013 3Rabbitz, Inc. All rights reserved.</div>
  </div>
</body>
</html>

1로고와 웹 페이지 제목입니다. 로고는 <관리 | 환경 설정 | 일반 설정> 메뉴에서 설정합니다.

2검색 폼입니다. 웹에서는 다음과 같이 표시됩니다.

3실행할 때 대시보드, 내용, 검색 등의 결과물로 바뀝니다. 템플릿 페이지에 꼭 있어야 하는 웹 페이지 객체 선언입니다.

회사 또는 프로젝트 성격에 맞게 HTML을 구성합니다.

대시보드

대시보드에서는 다양한 방식으로 여러 문서를 보여줍니다.

문서 패널

기본 문서 목록

${type: "general",
  title: "윈도우 설치 가이드",
  src: "27d6572292e04937,c1de1fee1a04cc20,25294faefe19c541"
}

기본 문서 목록 속성
속성	설명	기본 값	필수 입력
type	general		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	쉼표를 구분자로 문서 또는 장 `UUID`를 입력한다.		예
title	제목
description	설명
ordered	순서 목록 사용 여부	false

기본 문서 목록 예제 1

description과 ordered 속성을 추가할 수 있다.

${type: "general",
  title: "윈도우 설치 가이드",
  description: "쓰리래빗츠 북을 윈도우 OS에 설치하는 방법입니다.",
  src: "27d6572292e04937,c1de1fee1a04cc20,25294faefe19c541",
  ordered: true
}

기본 문서 목록 예제 2

책 차례

책 차례를 표시합니다.

${type: "toc",
  src: "e0ebe04cfcece052",
  max: 5
}

책 차례 속성
속성	설명	기본 값	필수 입력
type	toc		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	책 UUID		예
title	제목	책 이름
description	설명
ordered	순서 목록 사용 여부	false
max	최대 문서 숫자	전체 문서

책 차례 예제

책 차례 예제 - 부가 있을 때

문서 제목 1 차례

장과 제목 1로 차례를 표시합니다.

${type: "document",
  src: "f37e8ae7e813a88d"
}

문서 제목 1 차례 예제

문서 객체 속성
속성	설명	필수 입력
type	document	예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	문서 `UUID`를 입력합니다.	예

프로젝트

프로젝트에 속한 문서를 표시한다.

${type: "project",
  src: "4dbc6d8e0170d55a"
}

프로젝트 속성
속성	설명	기본 값	필수 입력
type	project		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	프로젝트 UUID		예
user	사용자 아이디
title	제목	프로젝트 이름
description	설명
ordered	순서 목록 사용 여부	false
max	최대 문서 숫자	전체 문서

다음은 “쓰리래빗츠 외국어 매뉴얼” 프로젝트에 있는 문서 목록을 보여주는 예제입니다.

프로젝트 예제

라벨

라벨이 달린 문서를 표시한다.

${type: "label",
  src: "제품개발"
}

라벨 속성
속성	설명	기본 값	필수 입력
type	label		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	라벨 이름		예
title	제목	라벨 이름
description	설명
exclude	포함하지 않을 문서를 쉼표를 구분자로 설정한다.
ordered	순서 목록 사용 여부	false
max	최대 문서 숫자	전체 문서

다음은 “제품개발” 라벨이 달린 문서 목록을 보여주는 예제입니다.

라벨 예제

메뉴

문서를 메뉴로 표시합니다.

${type: "menu",
  src: "5333db62684a7257,3e03894dfe8234a1,336069bc4b574650",
  base: "FAQ"
}

메뉴 예제

메뉴 속성
속성	설명	기본 값	필수 입력
type	menu		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	쉼표를 구분자로 문서 또는 장 `UUID`를 입력합니다.		예
base	첫 페이지 이름	도움말 센터	아니오

그리드

프로젝트 그리드

프로젝트를 기준으로 임의의 사용자가 접근할 수 있는 문서를 그리드로 표시합니다.

${type: "project_grid",
  user: "admin",
  title: "주요 문서"
}

프로젝트 그리드 속성
속성	설명	기본 값	필수 입력
type	project_grid		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
user	사용자 아이디		예
title	제목	프로젝트 이름
description	설명
include	포함할 프로젝트를 쉼표를 구분자로 설정한다.	모든 프로젝트
exclude	포함하지 않을 프로젝트를 쉼표를 구분자로 설정한다.

프로젝트 그리드 예제

라벨 그리드

라벨을 기준으로 임의의 사용자가 접근할 수 있는 문서를 그리드로 표시합니다.

${type: "label_grid",
  user: "admin",
  title: "주요 문서",
  exclude: "제품데모,타사,타사 매뉴얼"
}

라벨 그리드 속성
속성	설명	기본 값	필수 입력
type	label_grid		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
user	사용자 아이디		예
title	제목
description	설명
include	포함할 라벨을 쉼표를 구분자로 설정한다.	모든 라벨
exclude	포함하지 않을 라벨을 쉼표를 구분자로 설정한다.

라벨 그리드 예제

부 그리드

부를 기준으로 책을 그리드로 표시합니다.

${type: "part_grid",
  src: "14b85c0063ee2e63"
}

부 그리드 속성
속성	설명	기본 값	필수 입력
type	part_grid		예
target	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
src	책 UUID		예
title	제목	책 제목
description	설명
include	포함할 부 UUID를 쉼표를 구분자로 설정한다.	모든 부
exclude	포함하지 않을 부 UUID를 쉼표를 구분자로 설정한다.

부 그리드 예제

내용

기본 내용은 다음과 같습니다.

${type: "breadcrumb"}  1
${type: "navigator"}   2
${type: "content"}     3

1문서 위치 정보입니다. 웹에서는 다음과 같이 표시됩니다.

다음과 같이 base 속성으로 도움말 센터를 바꿀 수 있습니다.

${type: "breadcrumb", base: "홈"}

2도움말 차례입니다. 웹에서는 다음과 같이 표시됩니다.

2도움말 내용입니다. 웹에서는 다음과 같이 표시됩니다.

피드백 받기 기능을 사용하지 않으려면 다음과 같이 disable_feedback 속성을 true로 설정합니다.

${type: "content", disable_feedback: "true"}

댓글을 사용하지 않으려면 다음과 같이 disable_comment 속성을 true로 설정합니다.

${type: "content", disable_comment: "true"}

검색

기본 검색 페이지 HTML 코드는 다음과 같습니다.

${type: "breadcrumb"}      1
${type: "search_result" }  2

1문서 위치 정보입니다. 웹에서는 다음과 같이 표시됩니다.

다음과 같이 base 속성으로 도움말 센터를 바꿀 수 있습니다.

${type: "breadcrumb", base: "홈"}

2검색 결과입니다. 웹에서는 다음과 같이 표시됩니다.