深圳
網(wǎng)站制作公司分享網(wǎng)站制作什么是代碼驅(qū)動(dòng)的文檔?
網(wǎng)站制作公司的設(shè)計(jì)師一般使用Pattern Lab 多平臺(tái)模式庫工具,它使你可以模塊化地開發(fā)設(shè)計(jì)系統(tǒng),并將模板和 CSS 轉(zhuǎn)換成可瀏覽的模式庫。在模塊化的系統(tǒng)中,你可以先開發(fā)每個(gè)單獨(dú)的模式片段,然后通過組合這些片段產(chǎn)生更復(fù)雜的模式。Pattern Lab 提供了一個(gè)基本框架,用于模塊化地創(chuàng)建并組合這些片段,使之成為更復(fù)雜的模式,甚至還能輸出完整的頁面??深A(yù)覽的組件庫是開發(fā)者、設(shè)計(jì)師、用戶體驗(yàn)師、質(zhì)量工程師和產(chǎn)品所有者聚在一起時(shí)可以使用的完美工具。它為設(shè)計(jì)系統(tǒng)中的每個(gè)部分創(chuàng)建了一門通用的語言和穩(wěn)定的參照系。

網(wǎng)站制作公司認(rèn)為JSON 模式是用于描述數(shù)據(jù)格式的語言,同時(shí)也可以說明數(shù)據(jù)的驗(yàn)證方式。在前端架構(gòu)的領(lǐng)域中,可以用 JSON 模式來描述模板和模式所需要的數(shù)據(jù)。JSON 超模式甚至可以描述能夠通過 HTTP 協(xié)議與設(shè)計(jì)系統(tǒng)交互的方法,包括驗(yàn)證、渲染和測(cè)試。JSON 模式是一種代碼驅(qū)動(dòng)的文檔工具,因?yàn)樗峁┝蓑?yàn)證和驅(qū)動(dòng)編輯工具的功能。JSON 模式還提供了可讀性很強(qiáng)的系統(tǒng)手冊(cè),取代了開發(fā)者實(shí)現(xiàn)一個(gè)功能所需的一大堆手寫說明。
網(wǎng)站制作公司分享什么是樣式文檔
既然樣式表已從一長(zhǎng)串的聲明演化為一個(gè)擁有變量、函數(shù)和邏輯的系統(tǒng),那么也要保證文檔系統(tǒng)的演化能跟上節(jié)奏。Hologram(http://trulia.github.io/hologram/)提供了構(gòu)建穩(wěn)健的文檔系統(tǒng)所需的一切內(nèi)容。它允許我們?cè)趯?shí)際編寫代碼時(shí),直接在 Sass 或者 JavaScript 文件中給系統(tǒng)進(jìn)行注釋。Hologram 會(huì)自動(dòng)收集這些注釋的內(nèi)容,并轉(zhuǎn)化為一個(gè)含有渲染示例和代碼示例的可訪問網(wǎng)站。這意味著我們不是在維護(hù)兩個(gè)單獨(dú)的代碼庫,而是將樣式文檔和實(shí)際的設(shè)計(jì)系統(tǒng)結(jié)合在一起。如果有任何代碼的注釋不夠充分,那么它就會(huì)很容易被發(fā)現(xiàn)。
在系統(tǒng)文檔上,Hologram 允許我們?cè)跇邮轿臋n中創(chuàng)建可訪問的標(biāo)準(zhǔn) Markdown 文件。這給了我們一個(gè)絕佳的位置去編寫入門文檔、項(xiàng)目規(guī)則和章程、聯(lián)系方式,以及其他任何需要收集整理并展示給團(tuán)隊(duì)的信息。深圳網(wǎng)站制作公司下面整理了一些文檔的例子。
Hologram 是一個(gè) Ruby 庫,因此我們從安裝庫開始:
$ gem install hologram15.1 配置Hologram
安裝庫之后,我們創(chuàng)建一個(gè) YAML 文件來配置 Hologram:
destination:./docs
documentation_assets:./doc_assets
code_example_templates:./code_example_templates
dependencies:./build
source:./sass
接下來仔細(xì)看代碼的每一部分。
destination
這是 Hologram 用于輸出靜態(tài)樣式文檔的文件夾。如果把它設(shè)置為可通過外部訪問,那么它將會(huì)成為公共文件夾,并保存一切樣式文檔所需的內(nèi)容。
documentation_assets
這是用來搭建樣式文檔的靜態(tài)資源文件。我們需要指定用于生成 HTML 的模板,還有用于改進(jìn)用戶體驗(yàn)的任何 CSS 或 JavaScript。這包括如代碼高亮、示例布局、導(dǎo)航樣式等內(nèi)容。如果你還不想為了給網(wǎng)站寫文檔而去搭建另一個(gè)網(wǎng)站,那么可以在 Hologram 的 GitHub 頁面(https://github.com/trulia/hologram#extensions-and-plugins)底部所列的現(xiàn)成模板中挑選一個(gè)使用。
code_example_templates
代碼示例和它們?cè)跒g覽器中的渲染效果是本樣式文檔的核心。Hologram 提供了一種非常便捷的方式來自定義示例周圍的標(biāo)記。下面是 Hologram 使用的默認(rèn)標(biāo)記,可以根據(jù)自己的需要隨意修改:
<div class="codeExample">
<div class="exampleOutput">
<%= rendered_example %>
</div>
<div class="codeBlock">
<div class="highlight">
<pre><%= code_example %></pre>
</div>
</div>
</div>
請(qǐng)注意 rendered_example(渲染示例)和 code_example(代碼示例)兩個(gè)變量。渲染示例是這個(gè)例子在頁面中直接顯示的效果,而代碼示例被放置在 <pre> 標(biāo)簽當(dāng)中,不對(duì)其進(jìn)行渲染,并且加上了代碼高亮的類名。
下面快速了解一下 Hologram 的配置,然后再看一些文檔的例子。
Hologram 是一個(gè) Ruby 庫,因此我們從安裝庫開始:
$ gem install hologram
好了,
深圳網(wǎng)站制作公司本文關(guān)于“網(wǎng)站制作什么是代碼驅(qū)動(dòng)的文檔?”經(jīng)驗(yàn)就分享到這里。如果您需要深圳專業(yè)的網(wǎng)站制作公司定制企業(yè)門戶、電商平臺(tái)等網(wǎng)站。請(qǐng)聯(lián)系我們網(wǎng)站客服,或者撥打我們網(wǎng)站上的制作聯(lián)系電話,有專業(yè)技術(shù)人員為您免費(fèi)提供咨詢與解決方案。謝謝關(guān)注,博納網(wǎng)絡(luò)編輯整理。