사용 중인 플랜

Suite Growth 플랜 이상에서 사용 가능모든 Guide 플랜에서 사용 가능

테마를 다운로드할 때 내보낸 파일 중에 manifest.json이라는 이름의 파일이 포함됩니다. 이 파일은 Guide의 테마 설정 창을 정의합니다.

이 가이드에서는 매니페스트 파일과 이를 통해서 무엇을 할 수 있는지에 대해 설명합니다. 또한 상세 사양에 대한 참조를 제공합니다. 예를 들어 테마를 내보내고 manifest.json 파일을 텍스트 편집기로 열어보세요.

이 문서에서 다루는 주제는 다음과 같습니다.

  • manifest.json 파일 이해하기
  • manifest.json의 settings를 변수로 사용하기
  • manifest.json 파일 수정하기
  • 매니페스트 개체
  • 설정 개체
  • 변수 개체
  • 유형 특성
  • 파일 유형
  • 목록 유형
  • 범위 유형
  • 번역

manifest.json 파일 이해하기

테마를 내보내기를 실행하면 내보낸 파일 중에 manifest.json이라는 이름의 파일이 포함됩니다. 매니페스트 파일을 사용하여 Guide의 테마 설정 창을 정의할 수 있습니다.

창에 있는 기존 settings 특성을 수정하거나 새로운 특성을 만들 수 있습니다. 다음 예시에서 매니페스트 파일은 color_brand_text 설정의 기본 값을 “#30aabc”로 설정하고 있습니다.

"settings": [
  {
    "label": "Colors",
    "variables": [
      {
        "identifier": "color_brand_text",
        "type": "color",
        "description": "color_brand_text_description",
        "label": "color_brand_text_label",
        "value": "#30aabc"
      },
      ...
    ]
  },
  ...
]

Guide에 테마 가져오기를 실행한 후 설정 창에는 매니페스트 파일의 “label” 특성에서 지정한 Brand text color 레이블을 가진 color_brand_text 설정이 표시되며, 색 선택기의 기본 16진수 값은 “value”특성에서 지정한 대로 #30aabc입니다.

manifest.json의 settings를 변수로 사용하기

Settings 특성의 식별자를 테마 파일에서 변수로 사용할 수 있기 때문에 이를 또한 변수라고 부르기도 합니다. 설정 창에서 값을 변경하면 해당 변수를 사용하는 모든 파일의 값이 업데이트됩니다.

참고: Guide 테마를 가져올 때 변수 오류가 발생하는 경우에는 서식에 문제가 있을 수 있습니다. 자세한 내용은 오류: 유형 개체의 ‘#/settings/X/variables/X’ 특성이 어떤 필수 스키마와도 일치하지 않았습니다 문서를 참조하세요.

$identifier 구문을 사용해서 테마의 style.css 파일에 변수를 삽입하거나 Curlybars의 settings.identifier 도우미를 사용해서 페이지 기본서식에 삽입할 수 있습니다. 예:

style.css

input:focus {
  border: 1px solid $color_brand_text;
}

또한 다음과 같이 단일 중괄호를 사용하여 CSS 표현식에 도우미를 임베드할 수 있습니다.

max-width: #{$search_width}px;

페이지 기본서식

<div style="background-color:{{settings.color_brand_text}}">

manifest.json 파일 수정하기

헬프 센터의 코드 편집 페이지에 있는 파일 목록에는 manifest.json 파일이 포함되어 있지 않습니다. manifest.json 파일을 편집하려면, 테마를 파일로 내보낸 후 시스템에서 매니페스트 파일을 수정하고 다시 테마를 Guide로 가져와야 합니다.

테마를 내보내려면 다음과 같이 하세요.

  • 헬프 센터 테마 다운로드하기를 참조하세요.

수정한 테마를 가져오려면 다음과 같이 하세요.

  • 헬프 센터 테마 가져오기를 참조하세요.

매니페스트 개체

매니페스트의 문서 루트 개체는 다음 특성을 가집니다.

이름 유형 설명
name 문자열 테마 이름
author 문자열 테마를 만든 사람, 팀 또는 조직
version 문자열 시멘틱 버전 2.0.0 표준을 따르는 테마 버전
api_version 문자열 기본서식 작성 API 버전
settings 배열 설정 개체 목록입니다. 설정 개체를 참조하세요.

예

{
  "name": "My second theme",
  "author": "Jane Doe",
  "version": "1.0.1",
  "api_version": 3,
  "settings": [
    ...
  ]
}

설정 개체

Guide의 매니페스트 파일과 설정 창 양쪽에 있는 settings 특성은 색상 또는 글꼴과 같은 그룹으로 정리되어 있고 각 그룹은 설정 개체를 통해 매니페스트 파일에 정의되어 있습니다. 브랜드 색, 텍스트 색과 같이 각 개체는 레이블과 하나 이상의 settings 특성으로 구성됩니다.

설정 개체를 변경하거나 직접 설정 개체를 만들 수 있습니다. Guide에 테마를 가져오면 해당 개체는 테마의 설정 창에 반영됩니다.

각 설정 개체는 다음 특성을 가집니다.

이름 유형 설명
label 문자열 번역 특성 이름입니다. 번역을 참조하세요. Settings 그룹에 대한 제목을 표시합니다. 
variables 배열

그룹에 있는 settings 목록으로 변수라고도 합니다. 변수 개체를 참조하세요. 매니페스트 파일은 최대 200개의 변수 개체를 가질 수 있습니다.

헬프 센터에 대한 Guide 제품 한도(manifest.json의 총 설정 수)를 참조하세요.

예

"settings": [
  {
    "label": "colors_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "fonts_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "brand_group_label",
    "variables": [{...}, ...]
  },
  {
    "label": "banners_group_label",
    "variables": [{...}, ...]
  }
]
참고: "label" 특성의 값은 번역 특성의 이름입니다. 번역을 참조하세요.

위의 예는 설정 창에 다음 카테고리를 만듭니다.

변수 개체

각각의 설정 개체는 실제 settings 특성을 나열한 variables 배열을 가지고 있습니다. 헬프 센터 기본서식이나 CSS에 변수로 삽입할 수 있기 때문에 이를 변수라고도 부릅니다. 헬프 센터에 대한 Guide 제품 한도(manifest.json의 총 설정 수)를 참조하세요.

원하는 모든 변수를 정의할 수 있지만 매니페스트 파일에는 식별자가 “logo” 및 “favicon”인 두 개의 파일 변수가 포함되어야 합니다. 필수 변수를 참조하세요.

각 변수는 다음 특성을 가집니다.

이름 유형 설명
identifier 문자열 CSS 또는 Curlybars 표현식에서 사용할 수 있는 변수 이름입니다. 30자 이하여야 하며 영숫자와 _(밑줄)만 포함해야 합니다.
type 문자열 Guide의 설정 창에 있는 UI 컨트롤을 통해 사용자로부터 값을 받습니다. text, list, checkbox, color, file, range 중 하나입니다. 유형 특성을 참조하세요.
label 문자열

설정 창의 UI 컨트롤 옆에 표시되는 설정의 이름입니다. 40자 이하여야 합니다.

이 값을 변역하려면 번역 특성 이름을 사용하세요. 번역을 참조하세요. 번역에는 문자 수 제한이 없습니다.
description 문자열

설정 창의 UI 컨트롤 옆에 표시되는 설정에 대한 간략한 설명입니다. 80자 이하여야 합니다.

이 값을 변역하려면 번역 특성 이름을 사용하세요. 번역을 참조하세요. 번역에는 문자 수 제한이 없습니다.
value 문자열 setting의 기본 값
options 배열 list 유형에만 해당합니다. 목록 항목의 배열입니다. 옵션 개체를 참조하세요.
min 정수 range 유형에만 해당합니다. 범위의 최소값
max 정수 range 유형에만 해당합니다. 범위의 최대값

예

"variables": [
  {
    "identifier": "color_brand",
    "type": "color",
    "label": "color_brand_label",
    "description": "color_brand_description",
    "value": "#0072EF"
  },
  ...
]

위의 예는 설정 창에 다음과 같은 레이블과 제어를 만듭니다.

필수 변수

매니페스트 파일에 다음 두 개의 변수를 지정하지 않으면 파일을 가져올 때 거부됩니다.

  • logo - identifier는 "logo"이고 type은 "file"이어야만 함
  • favicon - identifier는 "favicon"이고 type은 "file"이어야만 함

예

"variables": [
  {
    "identifier": "logo",
    "type": "file",
    "description": "logo_description",
    "label": "logo_label"
  },
  {
    "identifier": "favicon",
    "type": "file",
    "description": "favicon_description",
    "label": "favicon_label"
  }
]

유형 특성

각 변수 개체는 type 특성을 가지며, Guide의 설정 창에 setting 값을 설정하기 위한 UI 컨트롤을 지정합니다. 특성은 다음 중 하나의 값을 가집니다.

  • text - 텍스트 입력 필드입니다. 각 텍스트 필드는 1,000자로 제한됩니다.
  • list - 드롭다운 목록입니다. 목록 항목에 대한 옵션 개체의 목록을 포함합니다. 목록 유형을 참조하세요.
  • checkbox - 확인란입니다. 확인란 유형을 참조하세요.
  • color - 색 선택기입니다.
  • file - 파일 업로더입니다. 파일 유형을 참조하세요.
  • range - 범위 입력 필드입니다. 범위 유형을 참조하세요.

예

{
  "identifier": "color_headings",
  "type": "color",
  ...
}

목록 유형

변수 개체의 유형이 “list”인 경우 개체는 드롭다운 목록을 채우기 위한 options 배열를 포함하고 있습니다. 목록에 있는 각 옵션은 다음 특성을 가지고 있습니다.

이름 유형 설명
label 문자열

목록의 항목에 대해 표시되는 친숙한 텍스트입니다. 40자 이하여야 합니다.

이 값을 변역하려면 번역 특성 이름을 사용하세요. 번역을 참조하세요. 번역에는 문자 수 제한이 없습니다.
value 문자열 목록의 항목에 대한 기본적인 값입니다.

배열에 하나 이상의 옵션을 지정하지 않으면 테마를 가져올 수 없습니다. 옵션 수는 20개를 초과할 수 없습니다. 헬프 센터에 대한 Guide 제품 한도(목록 유형 설정의 총 옵션 수)를 참조하세요.

예

{
  "identifier": "font_headings",
  "type": "list",
  "label": "Heading",
  "description": "Font for headings",
  "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
  "options": [
    {
      "label": "Arial",
      "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif"
    },
    {
      "label": "Copperplate Light",
      "value": "'Copperplate Light', 'Copperplate Gothic Light', serif"
    },
    {
      "label": "Baskerville",
      "value": "Baskerville, 'Times New Roman', Times, serif"
    }
  ]
}

확인란 유형

변수 개체의 유형이 “checkbox”인 경우 개체의 value 특성을 사용해서 사용자가 확인란을 선택할 때 설정되는 값을 지정합니다. 값은 부울 값이어야 합니다.

이름 유형 설명
value 부울 true 또는 false

예

{
  "identifier": "scoped_hc_search",
  "type": "checkbox",
  "description": "scoped_help_center_search_description",
  "label": "scoped_help_center_search_label",
  "value": true
}

파일 유형

변수 개체의 유형이 “file”이면 설정 창에 파일 업로더 제어가 추가됩니다. 이 변수 유형은 value 특성을 가지지 않습니다. 예:

{
  "identifier": "community_image",
  "type": "file",
  "description": "community_image_description",
  "label": "community_image_label"
}

value는 시스템에서 정한 파일 URL입니다.

사용자가 다른 파일을 업로드할 때까지 사용할 기본 테마 파일을 제공해야 합니다. 기본 파일의 이름은 변수의 식별자와 일치해야 합니다. 테파 파일에 있는 settings 폴더에 파일을 저장하세요. 예:

테마 파일에 URL이 예상되는 곳에는 파일 변수를 사용하세요. 예:

style.css

.community_banner {
    background-image: url($community_image);
}

페이지 기본서식

<img src="{{settings.community_image}}">

범위 유형

변수 개체의 유형이 “range”이면 설정 창에 슬라이더 제어가 추가됩니다. 예:

사용자가 슬라이더를 움직여서 설정하는 값의 범위를 지정할 수 있도록 범위 변수는 min과 max 특성을 포함합니다. 이때 값은 정수여야 합니다.

예

{
  "identifier": "font_size",
  "type": "range",
  "description": "font_size_description",
  "label": "font_size_label",
  "min": 70,
  "max": 150,
  "value": 100
}

번역

설정 창에 보여지는 문자열은 모두 translations에 정의되어 있으며 특성 이름과 값으로 구성됩니다. 예:

"text_color_label": "Text color"

특성 이름은 임의로 정해지므로 원하는 이름으로 지정할 수 있습니다.

번역은 테마의 루트 폴더에 있는 translations 폴더에 언어 고유의 JSON 파일에 저장됩니다.

/ translations
   - en-us.json
   - es.json
   - fr.json
   - ...

각 파일은 번역의 목록을 가진 JSON 개체로 구성됩니다.

en-us.json

{
  "brand_color_description": "Brand color for major navigational elements",
  "brand_color_label": "Brand color",
  ...
}

설정 창에서 레이블과 설명을 지정하기 위해 번역을 사용합니다.

레이블과 설명에 대한 문자열을 지정하려면 다음과 같이 하세요.

  1. translations 폴더에서 헬프 센터의 기본 언어에 대한 JSON 파일을 찾습니다. 예: en-us.json.

  2. 기존 특성의 값을 업데이트하거나 새로운 특성을 추가합니다. 예:

    {
  "text_color_label": "Text color",
  "text_color_description": "Text color for body and heading elements",
  ...
}

  3. 변수에서 변역 특성 이름을 "label" 또는 "description" 속성의 값으로 사용합니다.

    "variables": [
  {
    "identifier": "color_text",
    "type": "color",
    "label": "text_color_label",
    "description": "text_color_description",
    "value": "#0072EF"
  },
  ...
]

    변수 개체를 참조하세요. 특성을 만들거나 특성 이름을 변경하는 경우 변수를 업데이트하세요.

설정 창에서 레이블과 설명을 번역할 수 있습니다. 번역된 문자열를 직접 제공해야 합니다.

레이블과 설명을 번역하려면 다음과 같이 하세요.

  1. translations 폴더에서 추가 지원하고자 하는 언어에 대한 JSON 파일을 찾습니다.

  2. 기본 번역 파일에 정의되어 있는 특성 이름을 복사합니다. 예:

    {
  "text_color_description": "",
  "text_color_label": "",
  ...
}

  3. 각 특성에 대해 번역된 문자열을 지정합니다. 예:

    fr.json

    {
  "text_color_description": "Couleur du texte pour les éléments du titre et du corps",
  "text_color_label": "Couleur du texte",
  ...
}
Zendesk 제공