系列文「第一篇」提供了基本安裝的程式碼，如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症，而如果有提出客製的相關問題，之後一併集中更新到此篇。一、Blogger 轉換字元的 bug
當初為了在分頁功能加上「游標經過變換底色」功能，在「第一篇」程式碼 AL 行的 <span> 標籤內加上以下 "滑鼠事件" 程式碼：
onmouseover='this.style.backgroundColor = "#fffff5";' onmouseout='this.style.backgroundColor = (this.className == "Menubox_over") ? "#fffff5" : "#dde3dc";'基本上這程式碼沒問題，但是怎麼試都無法出現效果。經過反覆不斷地 debug 過程，最後才忽然間發現──"Menubox_over" 字串竟然在儲存後成了 "menubox_over"，Blogger 自動把 "M" 大寫轉換成 "m" 小寫，難怪會抓不到 "Menubox_over" 這個 class 的 CSS 效果。
實際上整個程式碼的其他 "Menubox_over" 字串並沒有被 Blogger 轉換成小寫，只有在 "事件" 相關的程式碼，例如滑鼠事件 onmouseover、onmouseout 之內的 javascript 敘述，Blogger 才有這個 bug。
找到原因後解決方法自然就有，把所有的 class 名稱及相關字串 "Menubox_over" 與 "Menubox_out" 通通改為小寫 "menubox_over" 與 "menubox_out" 後，就沒有這樣的鳥事了。這是繼「樹狀分類標籤」→ 「二、開合圖案字元錯亂的問題」後，Blogger 又一個莫名其妙的轉換字元大 bug。
二、安裝兩個以上的分頁群組
由於每個 id 名稱在 html 標籤裡面都必須是獨一無二的，因此安裝兩個以上的分頁群組時，必須注意以下：
1. setTab() 函數：「第一篇」原程式碼 BD～BK 行的這個函數只要寫一次即可，整個部落格都能呼叫，因此裝了第二個以上的分頁群組時，BD～BK 可省略。而 第二個群組以後若因為 BD～BK 省略，也沒安插第二篇及第三篇的程式碼，導致 <script> 與 </script> 之間無內容的話，當然 BC 與 BL 行也可刪除。
2. 原程式碼有兩組 id 及參數要命名──AL～AN、AQ～BA，若不清楚怎麼命名的話，整理了以下的 id 及參數命名表可直接複製，方便第二個以後的分頁群組來命名 id 及參數：
// 第二個群組
<span class="Menubox_over" id='two1' onclick='setTab("two",1,3)' title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='two2' onclick='setTab("two",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='two3' onclick='setTab("two",3,3)' title='顯示 3rd 工具'>3rd 工具</span>
<div id='con_two_1'>第一個 HTML 小工具內容</div>
<div id='con_two_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_two_3' style='display:none'>第三個 HTML 小工具內容</div>
// 第三個群組
<span class="Menubox_over" id='three1' onclick='setTab("three",1,3)' title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='three2' onclick='setTab("three",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='three3' onclick='setTab("three",3,3)' title='顯示 3rd 工具'>3rd 工具</span>
<div id='con_three_1'>第一個 HTML 小工具內容</div>
<div id='con_three_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_three_3' style='display:none'>第三個 HTML 小工具內容</div>
// 第四個群組
<span class="Menubox_over" id='four1' onclick='setTab("four",1,3)' title='顯示 1st 工具'>1st 工具</span>
<span class="Menubox_out" id='four2' onclick='setTab("four",2,3)' title='顯示 2nd 工具'>2nd 工具</span>
<span class="Menubox_out" id='four3' onclick='setTab("four",3,3)' title='顯示 3rd 工具'>3rd 工具</span>
<div id='con_four_1'>第一個 HTML 小工具內容</div>
<div id='con_four_2' style='display:none'>第二個 HTML 小工具內容</div>
<div id='con_four_3' style='display:none'>第三個 HTML 小工具內容</div> 第二個群組的第一個分頁，用紅字標示了三個需要注意、修改的地方，想要自訂id、參數的話主要改這三個地方；以上以一個群組三個分頁為例，若一個群組超過三個或少於三個分頁，請依其邏輯來修改。
備註：之後如有新的自訂配置問題會持續在本篇更新。
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症
➢➢ 快速選單： １ ２ ３ ４
近期大量改用你的分享...
回覆刪除想弄「熱門（Blogger小工具）」+「最新（HTML小工具）」+「隨機（沒有小工具）」的分頁功能，想請問...
1.
「熱門文章」的顯示方式該如何像「最新文章」一樣，左圖右字？而後續拿掉置於最頂端的原始Blogger小工具移除後，該如何更改顯示的文章數量？還是一開始就先設定好再拿掉？（目前分頁功能還沒處理好，所以還隱藏著）
2.「最新文章」分頁的圖文乍看ok，但因為圖片背景為透明，所以會看到項目符號「●」，如何改善比較好？
3.我原本就沒有關於「隨機文章」的側邊小工具，即使將「第一篇」的 BL 行之前插入「第三篇」的程式碼，後台的範本文件也沒有該段語法能與其呼應。是否有推薦的文章可參考呢？
4.各分頁的小圖示，該放在哪裡？
<5875983263962631640>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除1-1. 先參考「讓 Blogger 側邊欄有個簡易安裝的分頁（TAB）功能__（二）安裝 Blogger 官方小工具」的【留言 #08】以後的所有留言，同樣的狀況；
1-2. 沒有快速編輯圖示的話，可以去後台「版面配置」那裡編輯
2. 會出現項目符號「●」表示你範本裡 ul 標籤的預設顯示 為disc，你的所有側邊欄工具只要有使用 ul 都會出現「●」；想讓最新文章不出現「●」的話，麻煩到那篇文章留言，在這篇不容易說明。
3. 這一點看不太懂你的意思，你明明有「隨機文章」小工具啊？關於第三篇的的程式碼，我現在也沒在用了，因為覺得隨機分頁的功能其實訪客根本不會注意 XD
4. 小圖示想出現在哪裡就放哪裡啊，想出現在分頁標題前面就放在標題的文字前面。
你好
回覆刪除1-1.抱歉，我看漏了。
1-2.我看不懂以下這段話的意思。
「分頁（TAB）功能__（二）安裝 Blogger 官方小工具」
M～O：複製完之後，Blogger 官方小工具就沒有利用價值了，這三行的程式碼分別把三個官方小工具給刪除。「狡兔死、走狗烹」，雖然有點殘忍，但不整個刪除的話，隱藏起來的小工具仍會各佔一行的高度，使得側邊欄不美觀，所以砍掉是正確的抉擇。
我原先的理解是：「分頁功能」安裝好後，原本移到最上面隱藏的「熱門文章小工具」要移除掉，僅保留「分頁功能」的熱門文章語法。而「熱門文章小工具」移除掉自然就無法再編輯，所以有此一問。但照大大的回覆看來～我理解錯了 >"<，而是僅僅指這一行「 a.parentNode.removeChild(a)」在執行刪除的動作，是嗎？
3.留言後我仍繼續動作中，所以就google了一些相關文章放了上去 :P 。因為本來比較想要跟其他分頁一樣，能有圖有文。的確～隨機文章沒什麼人會去看，好像都是站長自high居多，呵～
4.我想請問的是分頁小圖示的語法大概長如何，又該安插在什麼位置上？我試過用chrome的檢查元素功能，看了老半天仍不知道該如何。
以上，謝謝 ^^
<1973231229766220690>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除1-2. 如你所述，在程式裡面就已經做了移除的動作，你不需要做任何動作(原文寫在 "M～O：" 的後面，當然是在解釋這三行程式碼的作用)
3. 這一點不曉得是否你要結案了？如果還有需要幫忙的地方，請再麻煩詳述了(建議放在對應的文章，跟文章比較好對照)，因為先前你提到「第三篇」，但第三篇是在談「隨機分頁」，但我們談的好像都是「隨機文章」。
4. "小圖示" 的語法就是圖片
的語法啊：
<img src="...."/>
這個我相信你可以搞定的，放不成功再給我看你網頁的效果吧。
1-1. 結案～
回覆刪除1-2. 結案～
2. 結案～
3. 結案～
4. 結案～但有陳詞。
昨天可能弄太久腦袋不靈光了，
測試老半天都放到＜span＞裡面了
＜span class="me(略)title='...' (誤入此處)＞
沒注意到放錯位置，誤以為寫的不夠詳細，
又接著將＜img src="..."/＞除了放圖片網址外，還亂入一些位置調整的控制項。
結果就是~哈哈~(我想您懂的)
剛打開另存的檔案來看，自己都笑場了~開關的開裡面還有個開，這是甚麼東西呢?
＜span class="me(略)title='...' ＜img src="..." height='..' width(略) padding(略) /＞＞
過來查看您的回覆，就知道我又把事情搞複雜了 0..0，於是正解就出現了，搞定!
有時候覺得程式像文字語言一樣（它本來就是語言～噗），
會讀音，但不一定能書寫正確；
想到一個成語，讀出來卻感覺哪裡怪怪的；
最可怕的是每個字都懂，卻不知道那段話想表達什麼...。
最後～謝謝您的相信與指引～ｍ（＿ ＿）ｍ
<9060297161177669571>(以上內容請勿刪除,從括號之後開始留言)呵呵，感謝提供趣事一則，相信可以給予其他本站讀者修改範本時的信心與借鏡~~XD
回覆刪除我比較好奇的是，Blogger儲存範本時都會檢查語法正不正確，沒想到這樣子可以儲存成功... @@" 難怪要花時間 debug~~XD
喔～當然沒存成功，所以才說「打開另外的存檔」。範本有出現紅字警告沒存成功，我就整個複製到記事本上另存了起來，然後重新貼上原先乾淨的＜SPAN＞標籤，哈哈！！
回覆刪除<1016514880505425167>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除原來如此～～XD
不對耶，這是側邊欄的「HTML/Java小工具」，不是後台範本文件。我剛剛特地把錯誤的語法貼上「HTML/Java小工具」，它還真的能save，沒出現錯誤提示。
回覆刪除再試拿掉一個應該有的＜/div＞，它也讓我存了。對照後發現它自動產生了一個＜/div＞在最後面。
經「不負責測試」後發現「HTML/Java小工具」好像真的可以瞎save一通。前面兩個留言中(#03/#04)有部分敘述錯誤，抱歉，個人的「記憶體出現錯誤」，請 WFU 與讀者見諒。
<12931303884017515>(以上內容請勿刪除,從括號之後開始留言)感謝補充，「HTML/Java小工具」真的只能自己小心 debug 了。
回覆刪除