開(kāi)源軟件項(xiàng)目通常擁有非常多樣化的用戶人群。有些用戶非常擅長(zhǎng)使用該系統(tǒng)，并且只需要很少的文檔。對(duì)于這些實(shí)力派用戶，文檔只需要提供必要的提示，并且可以包含更多的技術(shù)信息，比如說(shuō)在
Shell 中運(yùn)行的命令行。有些用戶可能只是初學(xué)者。這些用戶需要更多的幫助來(lái)設(shè)置系統(tǒng)并學(xué)習(xí)如何使用它。
寫(xiě)一個(gè)同時(shí)適合這兩個(gè)用戶群體的文檔是令人生畏的。網(wǎng)站文檔需要在 “提供詳細(xì)的技術(shù)信息” 和 “提供更多的概述和指導(dǎo)” 之間尋求一個(gè)平衡。這是一個(gè)很難找到的平衡。如果你的文檔不能同時(shí)滿足這兩個(gè)用戶人群，那么考慮一下另外一個(gè)選擇 —— 動(dòng)態(tài)文檔。
探索在網(wǎng)頁(yè)中添加一點(diǎn) ??JavaScript?? 使用戶可以選擇自己想看的內(nèi)容。
構(gòu)建你的內(nèi)容
你可以把例程添加的你的文檔中需要同時(shí)滿足 專(zhuān)家expert 和 初學(xué)者novice
你可以用 HTML 編寫(xiě)一個(gè)簡(jiǎn)短的安裝文檔，通過(guò) HTML 的 類(lèi)class
例如，你可以用下面的代碼來(lái)為專(zhuān)家定義一個(gè)段落：
<p class="expert reader">
這同時(shí)指派了 “專(zhuān)家類(lèi)” 和 “讀者類(lèi)”。你可以用下面的代碼來(lái)為初學(xué)者創(chuàng)建一個(gè)相同的段落。
<p class="novice reader">
完整的 HTML 文件同時(shí)包含初學(xué)者的段落和專(zhuān)家的段落。
<!DOCTYPE html><html lang="en"><head><title>How to install the software</title></head><body><h1>How to install the software</h1><p>Thanks for installing AwesomeProject! With AwesomeProject,you can manage your music collection like a wizard.</p><p>But first, we need to install it:</p><p class="expert reader">You can install AwesomeProject fromsource. Download the tar file, extract it, then run:<code>./configure ; make ; make install</code></p><p class="novice reader">AwesomeProject is available inmost Linux distributions. Check your graphical package manager and search for AwesomeProject to install it.</p></body></html>
例子中的 HTML 文檔沒(méi)有與之關(guān)聯(lián)的樣式表，所以瀏覽器中會(huì)顯示所有的段落。
Image of html in black text.
我們可在文檔中添加一些簡(jiǎn)單的樣式來(lái)為 讀者reader、專(zhuān)家expert 或者 初學(xué)者novice
<!DOCTYPE html><html lang="en"><head><title>How to install the software</title><style>.reader {background-color: ghostwhite;}.expert {color: darkred;}.novice {color: darkblue;}</style></head><body><h1>How to install the software</h1>當(dāng)你在瀏覽器中查看這個(gè)網(wǎng)頁(yè)時(shí)，這些樣式有助于突出這兩個(gè)段落。安裝指導(dǎo)的所有段落都有一個(gè)米白色背景，因?yàn)樗麄兌加?nbsp;讀者reader 這個(gè)類(lèi)。第一個(gè)段落的字體是深紅色的，這是由 專(zhuān)家expert 這個(gè)類(lèi)定義的。第二個(gè)段落的字體是深藍(lán)色的，則是由 初學(xué)者novice
Image of html in red and black text.
添加 JavaScript 控件
這些類(lèi)的應(yīng)用，使你可以添加一些簡(jiǎn)單的 JavaScript 函數(shù)，只顯示其中一個(gè)內(nèi)容塊。一個(gè)方法是，首先給所有的讀者類(lèi)元素設(shè)置 ??display:none?? 。這會(huì)將內(nèi)容隱藏，使其不會(huì)在頁(yè)面上顯示。然后，用函數(shù)將你想顯示的類(lèi)元素設(shè)置為 ??display:block?? :
<script>function readerview(audience) { var list, item; // hide all class="reader" list = document.getElementsByClassName("reader"); for (item = 0; item < list.length; item++) { list[item].style.display = "none"; } // show all class=audience list = document.getElementsByClassName(audience); for (item = 0; item < list.length; item++) { list[item].style.display = "block"; }}</script>要在 HTML 文檔中使用這個(gè) JavaScript，你可以吧這個(gè)功能附加到一個(gè)按鈕上。由于 ??readerview?? 函數(shù)需要一個(gè)聽(tīng)眾audience（這應(yīng)該是相對(duì)那個(gè)虛擬音樂(lè)播放器來(lái)說(shuō)的）作為參數(shù)，你可以使用你想查看的聽(tīng)眾類(lèi)別來(lái)調(diào)用這個(gè)函數(shù)，可以是讀者reader，專(zhuān)家expert 或者 初學(xué)者novice
<!DOCTYPE html><html lang="en"><head><title>How to install the software</title> <style> .reader { background-color: ghostwhite; } .expert { color: darkred; } .novice { color: darkblue; } </style></head><body><script>function readerview(audience) { var list, item; // hide all class="reader" list = document.getElementsByClassName("reader"); for (item = 0; item < list.length; item++) { list[item].style.display = "none"; } // show all class=audience list = document.getElementsByClassName(audience); for (item = 0; item < list.length; item++) { list[item].style.display = "block"; }}</script><h1>How to install the software</h1><nav><button onclick="readerview('novice')">view novice text</button><button onclick="readerview('expert')">view expert text</button></nav><p>Thanks for installing AwesomeProject! With AwesomeProject,you can manage your music collection like a wizard.</p><p>But first, we need to install it:</p><p class="expert reader">You can install AwesomeProject fromsource. Download the tar file, extract it, then run<code>./configure ; make ; make install</code></p><p class="novice reader">AwesomeProject is available inmost Linux distributions. Check your graphical packagemanager and search for AwesomeProject to install it.</p></body></html>有了這些設(shè)置，用戶可以在網(wǎng)頁(yè)上選擇他們想看的文本。
Image of window that allows you to select between novice and expert text.
點(diǎn)擊任何一個(gè)按鈕都將只顯示用戶想要閱讀的文本。例如，如果你點(diǎn)擊了 “閱讀初學(xué)者內(nèi)容view novice text” 按鈕，你就只會(huì)看到藍(lán)色段落。
Image showing blue text when you press the novice button.
點(diǎn)擊 “閱讀專(zhuān)家內(nèi)容view expert text” 按鈕，就會(huì)隱藏初學(xué)者文本，只顯示紅色的專(zhuān)家文本。
Image of red text after the expert button is clicked.
將此擴(kuò)展到你的文檔
如果你的項(xiàng)目需要你為不同的聽(tīng)眾編寫(xiě)多個(gè)操作文檔，你可以考慮使用這種方法，一次發(fā)布，多次閱讀。為所有的用戶編寫(xiě)一個(gè)文檔，是每個(gè)人都能很容易的發(fā)現(xiàn)和分享你項(xiàng)目的文檔。而你也不必同時(shí)維護(hù)盡在細(xì)節(jié)上有所不同的多個(gè)文檔。
