Style Sherpa

函式庫

Style Sherpa 與 ZURB 範本捆綁，只要兩個檔案，即可輕鬆為您的程式碼庫建立樣式指南。

樣式指南是 CSS 程式碼庫的重要組成部分，特別是多人使用的程式碼庫。團隊中的每個人都知道如何建構組件非常重要。樣式指南就是文件。您現在閱讀的文件是樣式指南，適用於核心 Foundation 樣式。

Style Sherpa 是與 ZURB 範本捆綁的小工具，可快速為您產生基本的樣式指南。樣式指南從單一 Markdown 檔案建立，其中包含所有頁面內容，以及定義內容周圍結構的 HTML 範本。

用法

觀看影片中的這部分

ZURB 範本包含資料夾 src/styleguide/，其中包含建立樣式指南所需的兩個檔案。就像 ZURB 範本中的所有內容一樣，只要編輯檔案，變更就會立即編譯

一個是 Markdown 檔案，index.md。此檔案包含樣式指南的內容。

另一個是 Handlebars 範本，template.html。樣式指南的內容會以 HTML 的形式插入此範本。最後的檔案會包含在專案的 dist/ 資料夾中，檔案名稱為 styleguide.html。

撰寫內容

觀看影片中的這部分

樣式指南分為多個區段。一般來說，程式碼庫中的每個元件（例如按鈕、面板、對話框、表單控制項等）都會有自己的區段。

區段標題使用 Markdown 標題，也就是單個井字號

# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

若要建立新區段，請新增四個換行符號和一個新標題

# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



# Forms

Lorem ipsum dolor sit amet, `<form>` elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

程式碼範例

觀看影片中的這部分

樣式指南應始終包含 HTML 範例，說明如何建立某個項目。若要在 Markdown 中建立程式碼區塊，請使用三個反引號將程式碼包圍起來。您也可以在第一組反引號後設定程式碼區塊的語言。Style Sherpa 會在最後的輸出中為您標示語法顏色。

```html
<button class="button" type="button">This is a button.</button>
```

您可能還想要在程式碼範例下方顯示元件的動態示範，讓開發人員可以在同一個地方看到元件的 HTML 和 HTML 的動態呈現。Style Sherpa 提供一個捷徑：不要在 Markdown 中將 html 設定為語言，而是將其設定為 html_example。這樣一來，就會一次列印程式碼範例和使用相同程式碼的動態示範。

```html_example
<button class="button" type="button">This is a button.</button>
```

輸出看起來類似這樣

<button class="button" type="button">This is a button.</button>

變更範本

觀看影片中的這部分

ZURB 範本包含樣式指南的最小樣板，但您可以自由自訂。

樣板使用 Foundation 的垂直選單，每個區段都會製作一個項目。以下是 Handlebars 程式碼的樣子

<div class="row">
      
  <div class="large-3 medium-4 columns">
    <dl class="vertical tabs" data-tab>
      {{#each pages}}
        <dd{{#if @first}} class="active"{{/if}}><a href="#{{ anchor }}">{{ title }}</a></dd>
      {{/each}}
    </dl>
  </div>

  <div class="large-9 medium-8 columns">
    <div class="tabs-content">
      {{#each pages}}
        <section class="content {{#if @first}}active{{/if}}" id="{{ anchor }}">
          {{ body }}
        </section>
      {{/each}}
    </div>
  </div>

</div>

範本可以存取 pages 變數，它是一個包含每個頁面資料的陣列。使用 {{#each}} 迴圈瀏覽 pages 時，您可以存取下列變數

title：區段名稱。
anchor：區段名稱，格式化為 URL錨點。
body：區段內容。