在HTML中實現比DocBook更好用的自動節編號

在HTML中，自動編號的標籤是<ol>.

 

<p>我喜歡吃的水果有：</p> <ol> <li>西瓜</li> <li>蘋果</li> <li>梨</li> </ol>

 

結果如下 ：

 

我喜歡吃的水果有:

1. 西瓜
2. 蘋果
3. 梨

看起來很簡單。其實不然。假設我應邀寫一篇如何賺錢的文章。下面是擬好的提綱。

 

1. 我們能賺錢嗎
能。

 

2. 賺錢方法簡介

  2.1 當勞工
勤勞致富，大力推薦。

 

  2.2 賣血
    2.2.1 賣自己的血
只要撐得住，也是推薦的。

 

    2.2.2 賣別人的血
別人若同意，我也不反對。

 

2.3 編程
  2.3.1 外包
聽說是個賺錢的好方法，但是，你要人家的錢，人家要你的命。

 

  2.3.2 自己承接
最好先在Google上推銷自己。

 

3. 努力賺錢，作明日之比爾蓋茨
我要養家，要餬口，要當比爾蓋茨！但如果人人這麼想，比爾蓋茨還能成爲比爾蓋茨了嗎？

 

4. 結論

賺錢真難！ 

 

我用<ol>來實現：

 

 

<ol> <li>我們能賺錢嗎 <p>能。</p> </li> <li>賺錢方法簡介 <ol> <li>當勞工 <p>勤勞致富，大力推薦。</p> </li> <li>賣血 <ol> <li>賣自己的血 <p>只要撐得住，也是推薦的。</p> </li> <li>賣別人的血 <p>別人若同意，我也不反對。</p> </li> </ol> </li> <li>編程 <ol> <li>外包 <p>聽說是個賺錢的好方法，但是，你要人家的錢，人家要你的命。</p> </li> <li>自己承接 <p>最好先在Google上推銷自己。</p> </li> </ol> </li> </ol> </li> <li>努力賺錢，作明日之比爾蓋茨 <p>我要養家，要餬口，要當比爾蓋茨！但如果人人這麼想，比爾蓋茨還能成爲比爾蓋茨了嗎？</p> </li> <li>結論 <p>賺錢真難！</p> </li> </ol>

 

其效果如下：

 

1. 我們能賺錢嗎

   能。

2. 賺錢方法簡介
   1. 當勞工

      勤勞致富，大力推薦。

   2. 賣血
      1. 賣自己的血

         只要撐得住，也是推薦的。

      2. 賣別人的血

         別人若同意，我也不反對。

   3. 編程
      1. 外包

         聽說是個賺錢的好方法，但是，你要人家的錢，人家要你的命。

      2. 自己承接

         最好先在Google上推銷自己。

3. 努力賺錢，作明日之比爾蓋茨

   我要養家，要餬口，要當比爾蓋茨！但如果人人這麼想，比爾蓋茨還能成爲比爾蓋茨了嗎？

4. 結論

   賺錢真難！

可以看出，無論是從書寫習慣上，還是效果上看，都不能取得較理想的效果。這是爲什麼我們很少看到別人<ol>使用來編排文章的原因。

 

DocBook中有專門解決此問題之道，主要通過<sect1>、<sect2>......<sect6>來實現。

 

  <sect1> <title>賺錢方法簡介</title> <para></para> <sect2> <title>賣血</title> <para></para> <sect3> <title>賣自己的血</title> <para></para> </sect3> </sect2> </sect1>

 

 從結構上來看，比<ol>強賺錢方法簡介多了。但DocBook也有一問題：如果我們要將<sect2>一級上升，除將<sect2>的內容移出<sect1>之外，還必須將<sect2>標籤改爲<sect1>。如果<sect2>又包括了衆多的<sect3>、<sect4>等，則需對這些節一一變更。

下面，我們來實現一個比DocBook還更好用的類似小工具。仿造DocBook的結構，先編寫下面的HTML代碼。

<div class="sect"> <div class="sectTitle">我們能賺錢嗎</div> <p>能。</p> </div> <div class="sect"> <div class="sectTitle">賺錢方法簡介</div> <div class="sect"> <div class="sectTitle">當勞工</div> <p>勤勞致富，大力推薦。</p> </div> <div class="sect"> <div class="sectTitle">賣血</div> <div class="sect"> <div class="sectTitle">賣自己的血</div> <p>只要撐得住，也是推薦的。</p> </div> <div class="sect"> <div class="sectTitle">賣別人的血</div> <p>別人若同意，我也不反對。</p> </div> </div> <div class="sect"> <div class="sectTitle">編程</div> <div class="sect"> <div class="sectTitle">外包</div> <p>聽說是個賺錢的好方法，但是，你要人家的錢，人家要你的命。</p> </div> <div class="sect"> <div class="sectTitle">自己承接</div> <p>最好先在Google上推銷自己。</p> </div> </div> </div> <div class="sect"> <div class="sectTitle">努力賺錢，作明日之比爾蓋茨</div> <p>我要養家，要餬口，要當比爾蓋茨！但如果人人這麼想，比爾蓋茨還能成爲比爾蓋茨了嗎？</p> </div> <div class="sect"> <div class="sectTitle">結論</div> <p>賺錢真難！</p> </div>

這種結構，我們不必關心各段具體是幾級節點。因此若需重新調整結構，只須調整物理位置即可，無須修改div的class.

我們準備使用JQuery來助力。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

因爲Google可以提供JQuery調用，因此只需直接調用其就行了，不必再雖行下載JQuery。爲方便使用，我在下面創建了一個對象。

<script type="text/javascript"> var levelIndexManager = { levelStack : new Array(), base : 0, offset : 0, level : 1, getIndex : function() { //empty, init if (this.levelStack.length == 0) { this.base = 0; this.offset = 0; this.level = 1; this.levelStack.push(this.base); } if (this.level == 1) { this.base++; this.levelStack[this.levelStack.length - 1] = this.base; return this.levelStack[this.levelStack.length - 1]; } else { var valueSaved = this.levelStack[this.levelStack.length - 1]; this.offset++; this.levelStack[this.levelStack.length - 1] = this.base + "." + this.offset; return valueSaved; } }, levelUp : function() { if (this.level == 1) { this.base = this.levelStack[this.levelStack.length - 1]; } else { //need to substract offset by 1 var valueSaved = this.levelStack[this.levelStack.length - 1]; var lastPos = valueSaved.lastIndexOf("."); var theBase = valueSaved.substr(0, lastPos); var theOffset = valueSaved.substring(lastPos+1); theOffset--; this.base = theBase + "." + theOffset; } this.offset = 1; this.levelStack.push(this.base + "." + this.offset); this.level++; }, levelDown : function() { if (this.level == 1) { return; } this.level--; this.levelStack.pop(); if (this.level == 1) { this.base = this.levelStack[this.levelStack.length - 1]; return; } var valueSaved = this.levelStack[this.levelStack.length - 1]; var lastPos = valueSaved.lastIndexOf("."); this.base = valueSaved.substr(0, lastPos); this.offset = valueSaved.substring(lastPos+1); } }; </script>

 

 定義了一個名爲levelIndexManager類變量，此類的接口如下：

getIndex(): 返回各級節點的標籤，如“1.”、“2.3.1”。

levelUp(): 調用此方法，告知levelIndexManager我們需要設置取得下一級節點標籤，levelIndexManager自動在內部設置各級節點標籤，之後使用getIndex()即可返回所需標籤。

levelDown(): 調用此方法，告知levelIndexManager返還上一級節點標籤，之後使用getIndex()即可返回所需標籤。

 有時候，我們還需用到levelIndexManager的level屬性，以瞭解當前是第幾級。

 

 爲方便使用，getIndex()方法中在第一次調用時會自動檢查並初始化。

 

 levelIndexManager主要利用JavaScript數組來實現堆棧功能。

 

 關於levelIndexManager，我們僅需瞭解其接口方法就行，不必拘泥於細節。

 

緊隨着levelIndexManager的定義，編寫以下代碼：

 

<script type="text/javascript"> google.load("jquery", "1"); google.setOnLoadCallback(function(){ processChain($("body")); }); function processChain(chainPrarent) { $.each($(chainPrarent).children(".sect"), function(){ var sperator = ""; if (levelIndexManager.level == 1) { sperator = ". "; } else { sperator = " "; } $(this).children(".sectTitle").text(levelIndexManager.getIndex() + sperator + $(this).children(".sectTitle").text()); levelIndexManager.levelUp(); processChain($(this)); levelIndexManager.levelDown(); }); } </script>

調用JQuery庫後，待頁面加載完畢，調用processChain()函數。此函數是實現本文功能的重點。功能不復雜，對於body之下每個sect，將其sectTitle取出，調用levelIndexManager.getIndex()以獲取正確的節編號後，修改sectTitle的內容。難點在於如何告訴levelIndexManager，何時需要設置下一級節編號。函數的倒數第二行遞歸調用processChain()函數，以處理每個sect之下的子節點。因此，這是調用levelIndexManager.levelUp()的好時機。處理完子節點後，立即調用levelIndexManager.levelDown()返回上一級節點。而對於沒有子節點的，processChain()立即返回。雖然此時levelUp()及levelDown()也被調用了，但沒有關係，只要它們成對被調用，只不過多進行了一次進棧及出棧的動作而已，絲毫不影響節點編號的正確設置。

 

至此，我們成功地在HTML中實現了比DocBook還更好用的自動編排節標籤的功能，使得我們在使用HTML寫文章時更加便捷。