2016年10月20日

專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

A+
post-footnote-bigfoot-js-專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包前陣子有案主需要將文章中的註腳功能,結合資料庫進行管理,也就是讓多處重複的註解,可以直接從試算表讀取,而不必一筆筆註釋。

因為這個案子而接觸到這個文章註腳外掛「BigFoot」,測試之後覺得效果跟質感都很好,比之前在「jQuery 展開收合效果安裝懶人包」介紹的另一個外掛 Footnote 還棒。

它可以讓網頁文章像閱讀書籍,將所有註腳完整地在文末列出,同時文末的註腳也有錨點可以跳回文章中對應的註解之處。



由於官方說明文件不是那麼易懂,再加上「Google Drive 關閉外連」的緣故,要安裝這個外掛是有些麻煩的。

運氣不錯的是,WFU 發現這個外掛竟然也有 CDN 支援,那麼請按照本篇的教學,不必另外尋找網路空間,就能簡單又方便地使用這個註解外掛了。



一、CDN 檔案


1. CDN 優點

檔案放在 CDN 不但不需擔心網路空間的問題,而且傳輸速度還更快,因為 CDN 會偵測靠我們距離最近的節點來傳輸。


2. CDNJS

這是非常知名的 CDN 服務「CDNJS」所提供的 BigFoot 檔案連結列表:


令人驚訝的是,居然每一種版本的檔案都有提供,不過當然是引用最新版本的檔案啦~

要用到的檔案數其實不多,但是列表的檔案這麼多,會讓人一時之間不知怎麼引用,那麼請繼續往下看說明。



二、3 種註解效果


BigFoot 提供了三種註解效果:

  • 註解顯示為 "..."
  • 註解內容從螢幕下方彈出
  • 註解顯示為數字編號

三種效果都滿不錯的,不過 BigFoot 的說明頁面沒有提供 step by step 的步驟,如果沒讀過本篇教學的讀者,會很難知道第 2 及第 3 種註腳要如何顯示出來。

想要看到這三種效果的話,可進入「BigFoot 官網」,參考本文的封面圖,會看到一顆大大的「DEMO」按鈕,按下去。


bigfoot-1-專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

出現上圖的頁面後,確認 "on" 這顆按鈕有按下


bigfoot-2-專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

螢幕往下捲,可看到三種效果的按鈕,按下想要的效果後,再往上捲到手機畫面,點擊註解就可看到對應的效果了。

如果想要將檔案放在自己的網路空間,按完效果的按鈕後,在這個頁面找到一個 "download" 按鈕,可下載相關檔案,例如上傳到自己的 Dropbox 空間,再用「Dropbox 外連產生器」取得連結。

若是使用本文的 CDN 安裝懶人包,則不必下載檔案。



三、CDN 安裝懶人包


如不知道要引用哪些檔案,可直接使用以下整理好的連結。

1. 安裝 jQuery

由於 BigFoot 是 jQuery 外掛,首先必須引用 jQuery 檔案。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例,請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

接下來 3 種效果,也就是 2~4 點,只需要擇一安裝即可


2. 安裝預設效果

在範本中接續 jQuery 程式碼的下一行,插入以下程式碼:

<script src='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js'></script>
<link href='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-default.min.css' rel='stylesheet'></link>

存檔後即完成所有需要檔案的連結引用


3. 安裝底部顯示效果

在範本中接續 jQuery 程式碼的下一行,插入以下程式碼:

<script src='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js'></script>
<link href='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-bottom.min.css' rel='stylesheet'></link>

存檔後即完成所有需要檔案的連結引用


4. 安裝數字效果

在範本中接續 jQuery 程式碼的下一行,插入以下程式碼:

<script src='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot.min.js'></script>
<link href='//cdnjs.cloudflare.com/ajax/libs/bigfoot/2.1.4/bigfoot-number.min.css' rel='stylesheet'></link>

存檔後即完成所有需要檔案的連結引用



四、執行 BigFoot


接著在範本中搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<!--BigFoot註解 start-->
<script>
//<![CDATA[
$.bigfoot({
actionOriginalFN: "ignore" // 另外顯示註解內容
});
//]]>
</script>
<!--BigFoot註解 end-->

如果不需要另外顯示註解內容的話,可將字串 "ignore" 改為 "hide"。

基本上比較常用的就是 actionOriginalFN 這個參數,如果有更多需求的話,可參考這篇「Bigfoot.js:以對話方塊顯示網頁文章註解」,有部分參數的中文化說明。

而完整的參數使用方式,還是要參考官網文件。



五、文章中的註解語法


最後,還必須設定在文章中出現註解的位置,以及註解的內容。

1. 註解位置

在文章中要出現註解的位置,插入類似以下的 HTML 語法:

<sup id="fnref:1">
<a href="#fn:1" rel="footnote">第 1 個註解字串</a>
</sup>
<sup id="fnref:2">
<a href="#fn:2" rel="footnote">第 2 個註解字串</a>
</sup>

注意一下 id 及 href 中的序號要吻合,每個註解字串要使用不同的序號。


2. 註解內容

註解內容通常是放在文末,請使用以下語法:

<div class="footnotes">
<ol>
<li class="footnote" id="fn:1">
第 1 個註解的內容。<a href="#fnref:1" title="回到本文"> ↩</a>
</li>
<li class="footnote" id="fn:2">
第 2 個註解的內容。<a href="#fnref:2" title="回到本文"> ↩</a>
</li>
</ol>
</div>

同樣注意一下 id 及 href 中的序號要吻合,而且序號要跟「1. 註解位置」相匹配。

文章儲存後即可看到效果,就像這個展示頁面:




六、補充說明


非 Blogger 平台的話,大致沒什麼問題。不過使用 Blogger 的話,還需要注意以下兩件事。

1. 只在文章中執行

如果多篇文章在首頁執行註解,彼此可能會打架。如果希望只在文章中執行 BigFoot 的話,可參考「Blogger 七種頁面形態判斷語法詳解」,幫「四、執行 BigFoot」這部分的程式碼,前後加上文章頁面的判斷式語法。


2. 編輯文章時切換模式

由於 BigFoot 使用了錨點,這會造成 Blogger 在後台編輯文章時,只要切換過「HTML 模式」與「撰寫模式」,錨點語法就壞掉了。

解決方法可參考「Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧」,要嘛避免切換模式,不然就採這篇文章的方法,將文章內容重新編碼,才不會被 Blogger 這個問題給搞瘋。


更多 jQuery 相關外掛:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。