2012年9月19日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症

A+

(Pic from: jQuery TOOLS,psdzzle.com)
系列文「第一篇」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。


一、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、參數的話主要改這三個地方;以上以一個群組三個分頁為例,若一個群組超過三個或少於三個分頁,請依其邏輯來修改。


備註:之後如有新的自訂配置問題會持續在本篇更新。

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」系列標題:
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症

➢➢ 快速選單:

10 則留言:

  1. 近期大量改用你的分享...

    想弄「熱門(Blogger小工具)」+「最新(HTML小工具)」+「隨機(沒有小工具)」的分頁功能,想請問...

    1.
    「熱門文章」的顯示方式該如何像「最新文章」一樣,左圖右字?而後續拿掉置於最頂端的原始Blogger小工具移除後,該如何更改顯示的文章數量?還是一開始就先設定好再拿掉?(目前分頁功能還沒處理好,所以還隱藏著)

    2.「最新文章」分頁的圖文乍看ok,但因為圖片背景為透明,所以會看到項目符號「●」,如何改善比較好?

    3.我原本就沒有關於「隨機文章」的側邊小工具,即使將「第一篇」的 BL 行之前插入「第三篇」的程式碼,後台的範本文件也沒有該段語法能與其呼應。是否有推薦的文章可參考呢?

    4.各分頁的小圖示,該放在哪裡?

    回覆刪除
  2. <5875983263962631640>(以上內容請勿刪除,從括號之後開始留言)
    1-1. 先參考「讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(二)安裝 Blogger 官方小工具」的【留言 #08】以後的所有留言,同樣的狀況;

    1-2. 沒有快速編輯圖示的話,可以去後台「版面配置」那裡編輯

    2. 會出現項目符號「●」表示你範本裡 ul 標籤的預設顯示 為disc,你的所有側邊欄工具只要有使用 ul 都會出現「●」;想讓最新文章不出現「●」的話,麻煩到那篇文章留言,在這篇不容易說明。

    3. 這一點看不太懂你的意思,你明明有「隨機文章」小工具啊?關於第三篇的的程式碼,我現在也沒在用了,因為覺得隨機分頁的功能其實訪客根本不會注意 XD

    4. 小圖示想出現在哪裡就放哪裡啊,想出現在分頁標題前面就放在標題的文字前面。

    回覆刪除
  3. 你好

    1-1.抱歉,我看漏了。

    1-2.我看不懂以下這段話的意思。

    「分頁(TAB)功能__(二)安裝 Blogger 官方小工具」
    M~O:複製完之後,Blogger 官方小工具就沒有利用價值了,這三行的程式碼分別把三個官方小工具給刪除。「狡兔死、走狗烹」,雖然有點殘忍,但不整個刪除的話,隱藏起來的小工具仍會各佔一行的高度,使得側邊欄不美觀,所以砍掉是正確的抉擇。

    我原先的理解是:「分頁功能」安裝好後,原本移到最上面隱藏的「熱門文章小工具」要移除掉,僅保留「分頁功能」的熱門文章語法。而「熱門文章小工具」移除掉自然就無法再編輯,所以有此一問。但照大大的回覆看來~我理解錯了 >"<,而是僅僅指這一行「 a.parentNode.removeChild(a)」在執行刪除的動作,是嗎?

    3.留言後我仍繼續動作中,所以就google了一些相關文章放了上去 :P 。因為本來比較想要跟其他分頁一樣,能有圖有文。的確~隨機文章沒什麼人會去看,好像都是站長自high居多,呵~

    4.我想請問的是分頁小圖示的語法大概長如何,又該安插在什麼位置上?我試過用chrome的檢查元素功能,看了老半天仍不知道該如何。

    以上,謝謝 ^^

    回覆刪除
  4. <1973231229766220690>(以上內容請勿刪除,從括號之後開始留言)
    1-2. 如你所述,在程式裡面就已經做了移除的動作,你不需要做任何動作(原文寫在 "M~O:" 的後面,當然是在解釋這三行程式碼的作用)

    3. 這一點不曉得是否你要結案了?如果還有需要幫忙的地方,請再麻煩詳述了(建議放在對應的文章,跟文章比較好對照),因為先前你提到「第三篇」,但第三篇是在談「隨機分頁」,但我們談的好像都是「隨機文章」。

    4. "小圖示" 的語法就是圖片
    的語法啊:

    <img src="...."/>

    這個我相信你可以搞定的,放不成功再給我看你網頁的效果吧。

    回覆刪除
  5. 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,於是正解就出現了,搞定!

    有時候覺得程式像文字語言一樣(它本來就是語言~噗),
    會讀音,但不一定能書寫正確;
    想到一個成語,讀出來卻感覺哪裡怪怪的;
    最可怕的是每個字都懂,卻不知道那段話想表達什麼...。

    最後~謝謝您的相信與指引~m(_ _)m

    回覆刪除
  6. <9060297161177669571>(以上內容請勿刪除,從括號之後開始留言)呵呵,感謝提供趣事一則,相信可以給予其他本站讀者修改範本時的信心與借鏡~~XD

    我比較好奇的是,Blogger儲存範本時都會檢查語法正不正確,沒想到這樣子可以儲存成功... @@" 難怪要花時間 debug~~XD

    回覆刪除
  7. 喔~當然沒存成功,所以才說「打開另外的存檔」。範本有出現紅字警告沒存成功,我就整個複製到記事本上另存了起來,然後重新貼上原先乾淨的<SPAN>標籤,哈哈!!

    回覆刪除
  8. <1016514880505425167>(以上內容請勿刪除,從括號之後開始留言)
    原來如此~~XD

    回覆刪除
  9. 不對耶,這是側邊欄的「HTML/Java小工具」,不是後台範本文件。我剛剛特地把錯誤的語法貼上「HTML/Java小工具」,它還真的能save,沒出現錯誤提示。

    再試拿掉一個應該有的</div>,它也讓我存了。對照後發現它自動產生了一個</div>在最後面。

    經「不負責測試」後發現「HTML/Java小工具」好像真的可以瞎save一通。前面兩個留言中(#03/#04)有部分敘述錯誤,抱歉,個人的「記憶體出現錯誤」,請 WFU 與讀者見諒。

    回覆刪除
  10. <12931303884017515>(以上內容請勿刪除,從括號之後開始留言)感謝補充,「HTML/Java小工具」真的只能自己小心 debug 了。

    回覆刪除

張貼留言注意事項:

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