更新主題以讓其他人挑選 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": [