2013年2月22日

[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改

[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改

Wayne Fu 0 A+
這個系列的文章共有三篇,目的是為了方便修改 Blogger 範本時,可快速找到正確的修改區塊。先前發表的「讓Blogger能顯示 "單篇文章瀏覽數"」,由於這個小工具每個人想擺放的位置不一定都一樣,如此要說明擺放位置變的異常困難。

於是將範本的各個重要區塊的程式碼整理了一下,並附帶簡單說明,這樣以後除了說明方便,有篇文章可以隨時參照,自己也可將範本中的每個區塊加上註解,搜尋起來就非常迅速了。


一、範本註解方式

如果常常修改範本的話,建議在自己範本的每個區塊都加上中文註解,這樣以後只要搜尋中文註解的字串,就能很快找到對應的程式碼。

並且,範本的官方原始碼最好不要真的刪除改用註解的方式讓原始碼沒有作用即可。若將原始碼覆蓋掉,而當新裝的程式碼有問題時,除非有備份檔,否則就很難恢復原狀了。

以下內容節錄自發表在「Blogger中文社群的討論串」:

1. HTML 的註解語法:

<!-- 註解內容 -->
以上的註解內容將不會被執行。例如小工具標題的程式碼為 <h2><data:title/></h2>,若要讓標題不顯示,當然可以把這段程式碼刪除,不過建議用這樣的方式:

<!--<h2><data:title/></h2>-->

2. CSS 的註解語法:

/* 註解內容 */
例如範本中 CSS 區塊可能會看到

body {
color: $(body.text.color);
}

想要改文字顏色的色碼時,記得把原來的預設值寫到註解裡面──

body {
color: #aaaaaa ; /*預設值為 $(body.text.color)*/
}

這不是一個很好的舉例,只是為了說明概念,因為Blogger後台有更好用的改顏色工具。


3. Javascript 的註解語法:

◎ 單行註解方式:

// 註解內容

◎ 多行註解方式:

/*
註解內容
*/



二、Blogger 各區塊的語法格式

1. 配置圖:先來張 Blogger 版面配置的簡圖──



在上圖中,導覽列、網誌文章、側邊欄等等,都是一個完整的區塊,而每個區塊則分別可以塞進許多小工具,例如側邊欄的「網誌存檔」、「關於我自己」都是小工具。


2. 語法結構:每個區塊的 Blogger 語法結構都一樣,類似下面這樣:

<b:section.....>  // 這是區塊的開始
<b:widget.....>  // 第一個小工具的開始
<b:includable.....>  // 小工具的第一段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第一段程式結束
<b:includable.....>  // 小工具的第二段程式開始
.
. 程式碼只能擺在這個區間
.
</b:includable>  // 小工具的第二段程式結束
.
. (更多程式段落)
.
</b:widget>  // 第一個小工具的結束
<b:widget.....>  // 第二個小工具的開始
<b:includable.....>
.
. 程式碼只能擺在這個區間
.
</b:includable>
.
. (更多程式段落)
.
</b:widget>  // 第二個小工具的結束
.
. (更多小工具)
.
</b:section>  // 這是區塊的結束


3. 註解程式碼:任何的 HTML、JS、CSS 程式碼,在 Blogger 語法所建構的區塊之中,只能擺放在以上「程式碼只能擺在這個區間」的位置,說的更精確一些,也就是擺放在 <b:includable.....> 與 </b:includable> 的區間。

因此要註解程式碼的話,也是得遵循這個規則,依照「一、範本註解方式」的方法,例如 "樹狀標籤程式碼" 要註釋頭尾位置,註釋擺放的位置及方法可參考以下──

<b:includable.....>
.
<!-- 樹狀標籤開始 -->
樹狀標籤程式碼
<!-- 樹狀標籤結束 -->
.
</b:includable>



三、修改小工具的設定

再參考一次版面配置的簡圖──



如上圖紅圈之處,我們會發現小工具的左邊,若有藍色活頁孔洞的話,那麼這個小工具就能 "任意拖拉、移動位置",而且編輯該小工具時有 "移除" 的選項。

對於 Blogger 預設不讓我們移動、移除的小工具,只要在範本裡更改了參數,就能達到這個目的。以頁尾的「內容出處」為例,找到這個小工具的程式碼:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
把小工具裏 "locked" 這個參數的值 'true' 改成 'false' 即可,效果如下圖:



上面可看到,「內容出處」這個小工具的藍色活頁孔洞出現了,這樣就可以從編輯畫面將它移除了。我的作法是另外用一個「HTML/JAVASCRIPT」小工具取代,這樣才能塞得下我所有要擺的提示文字、版權宣告、圖案等等。不過吃果子要拜樹頭,Google 免費提供我們部落格平台,該給的 Credit 還是留給人家,「Powered by Blogger」這樣的文字我還是會留著。

只是,Blogger 預設不讓我們移除的小工具,先不要看了本篇就急著移除,請看完下面一篇之後再決定哪些是否移除,之後會一個個說明。


Blogger 範本」系列標題:
一、各種註解方式及區塊的修改
二、標頭、導覽列、側邊欄、頁尾區塊的程式碼
三、文章及留言區塊的程式碼

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

14 則留言:

  1. 大大 你的方法不太行耶 因為修改後移除工具時,儲存會顯示錯誤。後來我用以下方法隱藏起來,但隱藏的地方好像就會空一塊區域,目前就將就這樣。


    Go to template>>> customize template>>> advance>>> Add css

    #Attribution1 {display: none;}



    回覆刪除
  2. 非常感謝你的分享 對我這種電腦白癡來說 真的很有用 關於最後一點 能不能請問如何完全刪掉 "Ethereal範本. 由 Blogger 技術提供." 這個頁尾宣告勒 我把它移除後 "由Blogger技術提供"還是會自動跑出來ㄟ 困擾阿...

    回覆刪除
  3. 抱歉,我還有個問題,我在建構的網頁是http://letspause.blogspot.tw/

    請問我該如何刪掉(或隱藏) 網頁中間的"訂閱: 文章 (Atom)" 跟 "在 Google 上推薦這個網址"字樣 還有前面的facebook google+等圖示? 再次感謝大大的分享

    回覆刪除
  4. <5737422196135254850>(以上內容請勿刪除,從括號之後開始留言)謝謝大大 用註解方式把這些工具disable掉了 感激阿

    回覆刪除
  5. 感謝您的清楚解釋。
    想請問,如果我想把標題的字移到右邊該怎麼做呢?
    爬了網路上的文章似乎都沒有說明到這點,實在是很苦惱啊...
    還有網誌說明的字如果太長想換行該怎麼做?
    <(_ _)>

    回覆刪除
  6. <8911415665301303594>(以上內容請勿刪除,從括號之後開始留言)^^ 看到這個留言後,我馬上有靈感把網誌標題置中,做到啦 XD

    回覆刪除
  7. 版主你好,請問如何刪除Simple template. 只留下 Powered by Blogger.

    回覆刪除
  8. 先將官方預定的內容出處 delete (參考這篇文章的 三、修改小工具的設定),然後自己新增小工具,並貼上 Powered by Blogger.

    回覆刪除
  9. 博主你好!

    我在網上搜索,幸運地找到這裡來了。
    小弟blogspot用的是Blogger Templates網站的模版,內有一些小工具,其一是個search box,固定在敝網誌左上角,但在「版面配置」頁裡,並沒有相關小工具的方塊圖示,我進入HTML頁內,發現它的語碼不是寫在widgets區內,而是在前,語碼是這樣的:< div…(內容)…/ div >,我將它移到widgets區後(或刪掉),問題就來了。

    現在在「版面配置」頁裡,左欄所有的方塊圖示,都向上移動了,而「新增小工具」的功能就給「網站小圖示」遮蔽了,無法啟用。

    見圖:http://goo.gl/XGpbfD

    請問:
    (1) 怎樣將「網站小圖示」方塊變成可移動的?
    (2) 怎樣可自添「新增小工具」方塊圖示在其他位置?例如左側和中間的寬欄?

    期望博主援助,先謝。

    P.S. 我對HTML/CSS並不在行,看書只學了認得幾個符碼。

    回覆刪除
  10. 感謝博主回覆。

    關於問題(1),那麼可否將「網站小圖示」的功能方塊刪掉呢?請問博主知否它在blogspot HTML裡是哪堆語碼?

    關於問題(2),小工具欄位,無論個別怎樣上下移動,它們還是整體緊貼直排的,而「新增小工具」方塊圖示,就必是置頂,恰好跟「網站小圖示」的位置重疊,所以給遮蓋了。
    圖一:http://goo.gl/4u35sr

    我有template備份,所以才不怕改動HTML。
    其實模版的searchbox語碼,撇除中間幾條的〈ul〉〈li〉…(廣告連結)…〈/li〉〈/ul〉,它基本上是這樣的:
    〈div class='searchbox'〉
    〈form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'〉
    〈label class='assistive-text' for='s'〉Search〈/label〉
    〈input class='field' id='s' name='q' placeholder='Search' type='text' value=''/〉
    〈input class='submit' id='searchsubmit' name='submit' type='submit' value=''/〉
    〈/ form〉
    〈/ div〉

    實在不明白它有多重要。
    我將searchbox語碼抄回原位,「新增小工具」方塊圖示即自動下移,露出按鈕,讓我啟動。
    圖二:http://goo.gl/F14xcK

    實在不明白。
    再謝過博主。

    回覆刪除
  11. 按博主指示,成功了。(讚)
    感激!^^

    回覆刪除
  12. 版主您好,想請問說網誌
    有辦法恢復成按"迷你組件範本回復為預設值"前的狀態嗎?

    因為按了回復為預設值後,很多小工具都不能使用,按鈕不見,
    請問也方法改回來嗎?謝謝!

    回覆刪除
  13. 不好意思,我在做完新的搜尋引擎安裝後發現我的"標頭"變得無法更改大小和顏色,就連行動版預設的版本也和原網址差很多,看找了一下程式碼,但完全不知問題出在哪,我並沒有動header1啊,我讓她回復也沒效果,我現在該怎麼辦?
    old-yang.blogspot.com

    回覆刪除
  14. 我用復原的方式暫時回復了,我想問一下,這有可能是我改h1最佳化的關係嗎?我回復後最佳化就沒了,但其他的小工具都正常運作。而且我發現平常看時,標頭的文字設定和旁邊的文章標籤一樣(但沒超連結),點進文章後,顏色超連結回復正常,但大小不正常。目前已改回,但有保留舊碼,可以幫我看嗎?

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP