簡單的Blogger自動註腳

A自動註腳-兩個背景設定

測試過幾個在 Blogger 做自動註腳的方法,目前找到一個簡單的做法,這篇的目的是要分享我目前的做法。我用的自動註腳來自〈用 Javascript 和 CSS 实现脚注(Footnote)效果〉,只有稍稍修改過顯示樣式。這做法只要做好兩個背景設定,就可在文章指定註腳的內容和位置,讓 Blogger 自動編排註腳、產生超連結。

1 第一個設定是要讓部落格主動尋找註腳。這部份直接用 Artlover 的程式碼就可以。不過,他的方法是在每篇文章前面用 <script type="text/javascript"></script> 圈住以下的程式碼,讓包含程式碼的文章找尋註腳,我則是把它製成 .js 檔,讓整個部落格(而不是單篇文章)自動找尋。

var footNotes = function(){};
footNotes.prototype = {
    footNoteClassName : "footnote", // 腳註的 className
    footNoteTagName : "em",   // 腳註的標簽名
    footNoteBackLink : " [back]",   // 返回鏈接
    format : function(contentID, footnoteID)
    {
        if (!document.getElementById) return false;
        var content = document.getElementById(contentID);
        var footnote = document.getElementById(footnoteID);
        var spans = content.getElementsByTagName(this.footNoteTagName);
        var noteArr = [];
        var note = 0;
        var elContent;
        var len = spans.length;
        for (i=0; i<len; i++)
        {
            note ++;
            if (spans[i].className == this.footNoteClassName)
            {
                // 獲取腳註內容
                elContent = spans[i].innerHTML;
                noteArr.push(elContent);
                // 創建一個指向腳註的鏈接
                var newEle = document.createElement( "a" );
                newEle.href = '#ftn_' + footnoteID + '_' + note;
                newEle.title = "show footnote";
                newEle.id = 'ftnlink_'+footnoteID+'_' + note;
                newEle.innerHTML = note;
                // 清空原有內容
                while (spans[i].childNodes.length)
                {
                    spans[i].removeChild( spans[i].firstChild );
                }
                spans[i].appendChild( newEle );
            }
        }
        // 創建註釋列表
        var ul = this.__buildNoteList(noteArr, footnoteID);
        footnote.appendChild(ul);
    },
    __buildNoteList : function(notes, noteID)
    {
        if(!notes || notes.length < 1) return;
        var ul = document.createElement('ul');
        ul.className = this.footNoteClassName;
        var li;
        var len = notes.length + 1;
        for(i=1; i<len; i++)
        {
            li = document.createElement('li');
            li.id = "ftn_"+noteID+"_"+i;
            li.innerHTML = notes[i-1];
            // 創建【返回】鏈接
            var link = document.createElement("a");
            link.href = "#ftnlink_" + noteID + "_" + i;
            link.innerHTML = this.footNoteBackLink;
            li.appendChild( link );
            ul.appendChild( li );
        }
        return ul;
    }
};

方法:先把以上這段程式碼貼到純文字記事本,存檔時把檔尾打成 .js ,再放到網路空間。我自己選用的是 Google Drive 。至於如何使用, Wayne Fu 的〈取代 Google Code 外連 js 檔的選擇__Google Drive(取得檔案外連路徑的簡易方法)〉有很清楚的介紹。然後從 Blogger 進去修改板模(Template > Edit HTML),在 </head> 前面加上這個指令(紅字的部分要換成你的 js 檔的網址):

<script src='easyfootnotes.js' type='text/javascript'/>

2 第二步是設定文末註腳列顯示的樣式,我把它改成適合我部落格的規格後,得出這段程式碼:

<style type="text/css">
div.footnoteHolder {
line-height: 150%;
}
em.footnote { 
vertical-align: super; 
font-size: 10px; 
font-style: normal;

span.footnote { 
vertical-align: super; 
font-size: 10px; 

ol.footnote { 
padding-top: 15px;
margin-left: 2em; 
font-size: 14px; 
line-height: 150%; 
background: url(footnotes-bg.png);
background-position: 0 0;
background-repeat: no-repeat;

ol.footnote li { 
list-style-type: decimal; 
margin-left: 2em; 
font-size: 1em; 
line-height: 150%; 

em.footnote2 { 
vertical-align: super; 
font-size: 10px; 

ol.footnote2 { 
padding-top: 15px;
margin-left: 10px; 
font-size: 14px; 
line-height: 150%; 
background: url(footnotes-bg.png);
background-position: 0 0;
background-repeat: no-repeat;

ol.footnote2 li { 
list-style-type: decimal; 
margin-left: 10px; 
font-size: 1em; 
line-height: 150%; 

</style>

細項須調整成適合你自己部落格的樣式。這段程式碼的紅字部分是圖檔,請點此下載圖檔後再換成你自己的網址。同樣地,把這段程式碼用純文字記事本儲存成 .css ,上傳到網路空間後,到 Blogger 後台的 </head> 前面加上這段指令(紅字的部分要換成你的 css 檔的網址):

<link href="easyfootnotes.css" rel="stylesheet"></link>

這兩個步驟完成後,只要照下一節所講的,在文章裡打上註腳的指令,就會自動排列註腳,並加上適當的超連結。我把 easyfootnotes.js 和 easyfootnotes.css 都獨立出來,另外存到 Google Drive ,需要調整也不用進入 Blogger 修改板模,直接打開 Google Drive 裡的檔案改數值就可以。不一定要用 Google Drive ,其他免費的網路空間也不錯,例如 Dropbox 的 Public 資料夾也可做到一樣的效果。


B自動註腳-指定註腳內容和位置

完成剛才兩個設定後,現在可開一篇新文章,切換成 HTML 模式,把這段內容貼上去:

<div id="aaa">
科學哲學對此情境有一套說法。在哥倫布的脈絡,他把「地球是圓的」當成主要假設(main hypothesis),企圖單憑主要假設演繹出可以觀察的現象,但卻失敗了。其中一個修補方法,是加上「光直線移動」這個輔助假設(auxiliary hypothesis)。透過主要假設和輔助假設,方才可推論出「駛遠時船身會先於船桅消失」。<em class="footnote">若只觀乎形式,此論證仍非有效,不過這點對目前的討論影響不大。</em>
<br /><br/>
輔助假設的存在對否證論(falsificationism)有很直接的影響。否證論主張科學與非科學的分界線在於可否證性(falsifiability):科學理論都要能被經驗否證。可是,科學理論由假設組成<em class="footnote">但未必是「僅由假設組成」。</em>,如果科學家每次面對不利的現象,都總可藉由修改輔助假設來迴避反對、保衛主要假設,便會使理論變成不可否證,根據否證論,就是使之變成非科學的理論。提倡否證論的 Karl Popper 和提倡研究方案的 Imre Lakatos 特別針對輔助假設,下了一番工夫。此外,著名的 Duham-Quine Thesis 也與輔助假設關係密切。由此可見,輔助假設牽涉到的問題並不少。<br />
<br /></div>
<div class="footnoteHolder" id="bbb">
</div>
<script type="text/javascript">
var footnote = new footNotes();
footnote.format('aaa','bbb');
</script>


點擊「預覽」,成功的話會看到這個樣子:



重要的指令只有三個部分:

1 標示文章範圍。圈住整篇文章的正文,建立可以下註腳的範圍。

<div id="aaa">   </div>

2 在正文裡加註腳內容。把註腳內容放在 em 指令裡面,就會出現在文末的註腳列。注意,一定要加在 <div id="aaa"></div> 圈住的範圍裡!

<em class="footnote">   </em>

3 顯示註腳列。前兩個步驟的指令放好後,只要在文末加上以下的指令,文章最末就會自動編列並替註腳加上超連結。

<div class="footnoteHolder" id="bbb">
</div>
<script type="text/javascript">
var footnote = new footNotes();>
footnote.format('aaa','bbb');
</script>

必須注意:藍色字 aaa 是文章代號,紫色字 bbb 是註腳列的代號,這兩個代碼都可以換。每篇文章最好有不同文章代號和註腳列代號,這可以避免下一節說的問題。


C自動註腳-提示與比較

這個自動註腳要指定文章代碼( aaa 的位置)和註腳列代碼( bbb 的位置),表面上好像比較麻煩,但是卻可省掉我遇過的另外一些自動註腳的缺點。

1 bpholt 的 jQuery Footnotes 功能很完整,用法幾乎與我上面介紹的一樣。不過,它不一定要指定文章編號(可用 $("div").footnotes(); 代替),同時也沒有註腳列代碼可填。但這兩點卻產生了相應的問題:如果同一個頁面顯示多於一篇有註腳的文章,由於文章內的指令適用於同一個版面的另一些文章,所有註腳都會亂掉,有的是連結亂掉,有的是某一篇的註腳跑到另一篇,有些則是註腳完全消失。只看單篇完整文章不會有這個毛病,因此這個問題可以透過設定首頁只顯示一篇,或者只顯示標題、摘要來暫時迴避。但是在點擊標籤或者日期後,仍可能出現多於一篇有註腳的文章,所以問題還是會出現。

我現在用的方法沒有這個毛病,主要是因為它要設定文章代碼和註腳列代碼。只要每篇文章有不同代碼,這兩個代碼就使每篇文章的註腳只追踪文章內的註腳,不會撈過界,編列到其他文章的註腳。例如,在上面的例子,註腳列 bbb 只會列出 aaa 標定的範圍,不會列文章代碼不同的範圍。

2 我曾經有一段長時間用過手動註腳,方法其實很簡單。很高興有人提到我,雖然只是在 P.s 的部分。只要在寫文章的介面選 HTML 模式,在要加註腳的位置手動打上錨點和超連結

...(正文)...<a name="1a" href="articleurl#1">[1]</a>...(正文)...

然後在文章底加上相應的指令

<a name="1" href="articleurl#1a">[1]</a>...(註腳[1]的內容)...

它的原理是,在正文的註腳數字建立一個錨,叫做「1a」,又在文末的註腳數字建立另一個錨,叫做「1」(紫色部分)。此外,兩個位置各做一個超連結(藍色部分),按正文的註腳數字就會連到文末那個錨,按文末的註腳數字就會連回正文那個錨。簡單來說,就是手動幫每個正文和文末的註腳加上名字和超連結,讓它們連來連去。

這樣做有兩個麻煩之處。第一,每個註腳都要建兩個錨和兩個連結,十個註腳就要幹四十次,而且還要自己排文末註腳列的樣式。第二,「articleurl」的位置是文章的網址,要先發佈文章才能取得網址,所以要發佈完回頭編輯文章,再把網址逐一貼在適當的位置。曾經留言說,只要打「#1a」和「#1」就好,不需要輸入「articleurl」的部分,發佈後會自動建立連結。這個做法我也曾在找資料時看到,但印象中卻沒有成功過。我遇到的障礙主要有兩個,第一個是,在 HTML 模式寫好 #1a, #1 等指令而沒有填 articleurl 的話,只要切換成 Compose 模式再換回 HTML 模式,系統就會自動在「articleurl」的位置配上一個不恰當的連結;第二個是,就算沒有這樣切換模式,不知道為甚麼我還是沒有成功過。(補:感謝 Hepha Cheng 在留言提供另一個手動加註腳的方法。)


D進階調整

完成 A 和 B 兩節的步驟後, Blogger 已經可以自動編列註腳,這節簡略提供三個進階功能。

1 強調已點選的註腳。點一下正文的註腳數字,它除了會連到文末的註腳數字,還會用背景顏色強調你所選的那一個註。做法可參考 Louis Lazaris 的 “How to Dynamically Highlight Content Like Wikipedia Using CSS3”。

2 註腳背景顏色漸層。加了上一個功能後,如果想令背景顏色有漸層,要修改 Blogger 的板模裡, .target 與 .customTarget 這兩塊的 background 。這部分我主要參考「漸層背景 Gradient Background」。

3 滑鼠移到編號上自動顯示註腳內容。有了這功能,就可免卻在正文與文末註腳跳來跳去的麻煩,只要把滑鼠放在正文註腳上,就會顯示文末註腳的內容。我目前看過最完善的版本是 Syeong Gan 的 “Footnote Tooltips using jQuery”。(不過它要修改一些東西來配合目前的自動註腳,所以我還沒安裝。)


後記(2014-08-21更新)

為了在文末註腳前產生 “Notes:” 這個標題,我在板模加上兩個指令

div.footnoteHolder:before {content: "Notes: "; font-weight: bold; font-size:120%;}
div.footnoteHolder {margin-top: 5ex;}



3 則留言:

  1. 原來已經有現成的啦,當初還傻傻的自己寫orz

    回覆刪除
  2. >第二個是,就算沒有這樣切換模式,不知道為甚麼我還是沒有成功過

    試試這個
    http://wklej.org/id/1114874

    回覆刪除
  3. Hepha Cheng:

    可以用耶,原來要用 id 而不是 name! 謝啦!

    回覆刪除

技術提供:Blogger.