網(wǎng)站建設(shè)公司分享網(wǎng)站前端設(shè)計(jì)之Red Hat 文檔。
網(wǎng)站建設(shè)公司資深前端設(shè)計(jì)師在回顧為 Red Hat 網(wǎng)站開(kāi)發(fā)新的設(shè)計(jì)系統(tǒng)的長(zhǎng)達(dá)一年的過(guò)程后，意識(shí)到整個(gè)項(xiàng)目是從一個(gè)文檔需求開(kāi)始的，并在此基礎(chǔ)上發(fā)展壯大。深圳網(wǎng)站建設(shè)公司在本文提醒管理層最初的需求是為網(wǎng)站最通用的模塊開(kāi)發(fā)一個(gè)樣式文檔，并在 Red Hat 的其他站點(diǎn)之間復(fù)用。項(xiàng)目開(kāi)始時(shí)只有一些 Sass 文件片段和 Hologram 樣式文檔，但它所孕育的卻遠(yuǎn)不止這些。
網(wǎng)站建設(shè)公司分享網(wǎng)站前端設(shè)計(jì)之靜態(tài)的樣式文檔
網(wǎng)站建設(shè)公司在前面相關(guān)網(wǎng)站建設(shè)設(shè)計(jì)知識(shí)文章中提到的，Hologram 是一種文檔工具，它在代碼中尋找有特殊標(biāo)記的文檔注釋塊，并把這些注釋塊轉(zhuǎn)換成樣式文檔。從 Nicole Sullivan 那里了解到 Hologram 以后，我感覺(jué)它應(yīng)該是為正在開(kāi)發(fā)的組件編寫(xiě)文檔的完美工具。
Hologram 使用起來(lái)很方便快捷。每一個(gè)組件和布局都有自己的 Sass 文件片段，因此我們將文檔塊寫(xiě)在文件的最開(kāi)頭。文檔塊記錄了很多東西，從組件的設(shè)計(jì)意圖到它的功能和局限性，甚至還包括示例的 HTML 代碼。示例的 HTML 代碼可以幫助我們迅速了解組件的功能，而不用觸發(fā) CMS 系統(tǒng)，從而使得原型開(kāi)發(fā)、跨瀏覽器測(cè)試和視覺(jué)還原測(cè)試更簡(jiǎn)單。
有了組件庫(kù)和布局庫(kù)之后，我們還花了很多時(shí)間來(lái)寫(xiě)入門文檔。該文檔不僅包括如何設(shè)置樣式文檔，還包括如何使用、如何貢獻(xiàn)新的內(nèi)容，以及如何發(fā)布新的版本。在這方面，Hologram 是個(gè)很不錯(cuò)的工具，因?yàn)槲覀兛梢院?jiǎn)單地為文檔創(chuàng)建一個(gè)文件夾，然后在其中創(chuàng)建 Markdown 文件，Hologram 就會(huì)基于頁(yè)面的類別將這些 Markdown 文件的內(nèi)容寫(xiě)入樣式文檔里。起初一切都進(jìn)展得很順利，直到我們突然記起最初的目標(biāo)是創(chuàng)建一個(gè)樣式文檔，其中說(shuō)明如何組合代碼來(lái)創(chuàng)建出各種常用的模板。這并不困難，只需要?jiǎng)?chuàng)建一個(gè)模板文件夾，在其中創(chuàng)建 Markdown 文件，將 Markdown 文件連接到模板中使用的組件和布局中即可。Markdown 文件包括了對(duì)柵格、對(duì)齊、主題值等的描述。創(chuàng)建完成后，就可以將標(biāo)記復(fù)制到 Markdown 文件，用它來(lái)說(shuō)明諸如品牌 logo 如何顯示、如何用 HTML 標(biāo)記實(shí)現(xiàn)視頻區(qū)塊，以及特色活動(dòng)區(qū)塊中有兩個(gè)活動(dòng)和有三個(gè)活動(dòng)時(shí)代碼的差異。
問(wèn)題是，每次將 HTML 標(biāo)記從一個(gè)地方復(fù)制到另一個(gè)地方，標(biāo)記被改變的概率就會(huì)無(wú)限增加。我們很快就發(fā)現(xiàn)這種方式有多么難以維護(hù)，因此很快開(kāi)始尋找新的解決方案：對(duì) HTML 標(biāo)記片段使用單一源，并按需重用。不幸的是，Hologram 本身不支持任何模板語(yǔ)言。2014 年 10 月，我在這個(gè)項(xiàng)目的 Github 主頁(yè)上提出了一個(gè)問(wèn)題，“將 html_example 處理為 ruby 的視圖模板，從而可以重用模板的繼承關(guān)系”（https：//github.com/trulia/hologram/issues/159），如今仍待解決。深圳網(wǎng)站建設(shè)公司資深設(shè)計(jì)師提出的解決方案是，在文檔文件傳遞到 Hologram 之前，就使用 Twig 模板引擎對(duì)其進(jìn)行處理。我很驚訝地發(fā)現(xiàn)，Twig 處理 Markdown 文件完全沒(méi)有問(wèn)題。下面是文檔的簡(jiǎn)單示例：
<！—— cta.docs.md ——>
——
hologram：true
title：CTA Component
category：Component - CTA
——
- A "Call-to-Action" component contains one or more CTA buttons.
## Primary Button
```html_example
{％ include "cta.twig" with {'type'：'primary'} ％}
```
## Secondary Button
```html_example
{％ include "cta.twig" with {'type'：'secondary} ％}
```
```html_example
<！—— cta.twig ——>
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="{{type}}" href="#">
CTA Button
</a>
</div>
```
從上述單個(gè)文檔文件中可以看出，我們可以借助 Twig 的 include 函數(shù)，使用不同的參數(shù)，在文件不同的地方輸出同樣的 CTA 標(biāo)記。結(jié)果文件可以直接傳遞給 Hologram 進(jìn)行常規(guī)處理：
<！—— cta.docs.md ——>
——
hologram：true
title：CTA Component
category：Component - CTA
——
- A "Call-to-Action" component contains one or more CTA buttons.
## Primary Button
```html_example
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="primary" href="#">
CTA Button
</a>
</div>
```
## Secondary Button
```html_example
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="secondary" href="#">
CTA Button
</a>
</div>
```
如果要修改 CTA 標(biāo)記，只需更新單個(gè) Twig 模板文件，整個(gè)系統(tǒng)就可以使用新的標(biāo)記了。好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站前端設(shè)計(jì)之Red Hat 文檔”經(jīng)驗(yàn)就分享到這里。如果您需要聯(lián)系
深圳網(wǎng)站建設(shè)公司為您定制高端門戶網(wǎng)站或者電子商務(wù)平臺(tái)，請(qǐng)聯(lián)系我們網(wǎng)站在線客服或者撥打我們網(wǎng)站聯(lián)系電話，有專業(yè)網(wǎng)站建設(shè)技術(shù)人員為您提供詳細(xì)的解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
