다른 사람이 H1 구성요소 스타일을 선택하도록 테마 업데이트

구성요소의 스타일을 테마에 등록하면 다른 사용자가 설정 패널 또는 스타일 탭에서 구성요소에 제공한 스타일 간을 전환할 수 있습니다.

1. 구성요소 design.css 파일에 더 많은 스타일을 추가합니다. appinfo.json에 정의된 대로 구성요소의 등록된 styleClassName이 각 스타일 앞에 접두어로 붙습니다. 이 구성요소의 경우 접두어는 h1-component입니다.

   두 개의 스타일 h1-component-gothic-style 및 h1-component-courier-style이 추가되었습니다.

   이제 design.css의 새로운 내용은 다음과 같습니다.

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }
   .h1-component-gothic-style .scs-component-content {
    font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
    font-size: 32px;
    font-weight: bold; }
   .h1-component-courier-style .scs-component-content {
    font-family: "Courier";
    font-size: 32px;
    font-weight: bold; }

2. 테마의 design.json 파일에 스타일을 등록합니다. 사이트에 사용 중인 테마에서 이 파일을 찾을 수 있습니다. designs 폴더의 테마 파일로 드릴다운하고 이어서 defaults 폴더로 드릴다운하여 구성요소의 섹션을 design.json에 추가합니다.

   다음의 굵은체 텍스트는 추가할 항목의 예입니다.

              "news-article": {
                       "styles": [{
                                         "name": "News Article 1",
                                         "class": "news-article-default-style"
                                         },
                       {
                                         "name": "News Article 2",
                                         "class": "news-article-style-1"
                                         }
                                  ]
              }, 
              "h1-component": { 
       "styles": [{ 
         "name": "Plain", 
         "class": "h1-component-default-style" 
      }, { 
               "name": "Courier", 
               "class": "h1-component-courier-style" 
      }, { "name": "Gothic", 
           "class": "h1-component-gothic-style" 
      }] 
     }
     },
     "componentIcons": {
             "scs-socialbar": {
                       "icons": [