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`	설명
`order`	순서 목록 사용 여부	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`	설명
`order`	순서 목록 사용 여부	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`	설명
`order`	순서 목록 사용 여부	false
`max`	최대 문서 숫자	전체 문서

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

프로젝트 예제

라벨

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

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

라벨 속성
속성	설명	기본 값	필수 입력
`type`	label		예
`target`	web_viewer로 입력하면 링크를 클릭했을 때 웹 페이지가 아닌 웹 뷰어가 열립니다.
`src`	라벨 이름		예
`title`	제목	라벨 이름
`description`	설명
`exclude`	포함하지 않을 문서를 쉼표를 구분자로 설정한다.
`order`	순서 목록 사용 여부	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검색 결과입니다. 웹에서는 다음과 같이 표시됩니다.