完全解析 Blogger 程式碼

從這一篇起,海芋將一連幾篇,慢慢解釋blogger的程式碼,讓您能迅速看懂並修改,而在做任何修改以前,您必須先到後台備分您的程式碼,或是開一個新的blog做實驗,另外建議使用EmEditor、PSPad、Notepad++等編輯器,以免找程式碼找到頭昏眼花喔!

 

好了,現在要開始進入程式碼的講解了,你準備好了嗎?準備好了就走吧!

 

首先,在修改大量程式碼之前,您必須做的一件事,就是將要修改的地方註解起來,萬一改壞了,您可以再還原回去,而在JavaScript和CSS中,註解有兩種型態,分別如下:

/*我是註解*/
//我是註解

其中,「我是註解」為讓您加上註解的部份。

但是,在HTML中,註解就不是這麼回事了,HTML的註解為以下的型態,相信眼尖的您,一定有發現那裡不一樣了吧!

<!-- 我是註解 -->

 

在聊完註解之後,接下來我們就要開始進入Template的部份了。而在此,海芋是以Blogger所提供的Template來講解。

 

首先,網頁的組成分為兩大部份,一個是頭,一個是身體,頭就是我們所謂的<head>,身體就是所謂的<body>,這些通通稱為網頁的標記(Tags),在頭的部份,包含了一開始就要執行的程式碼,身體則是包含了要提供給讀者的資訊,如果您對這些名詞很陌生,不妨先去找一下相關的HTML書籍觀看。

 

而在<head>中,有一個<title>的欄位,則是提供了這個網站的名稱,即在瀏覽器上會顯示的名稱,而在這裡,Blogger是用以下的程式碼來包裝。

<title><data:blog.pageTitle/></title>

 

其中,<data:blog.pageTitle/>所代表的意義為您在後台所設定的網誌名稱。

 

聊完了<title>之後,接著我們看到<b:skin>的項目,這到底是什麼呢?在這裡海芋偷偷告訴您一個小技巧,您可以將b看為blogger,skin很直覺地翻譯,即是皮膚、外皮,所以他就是blogger的外表,而這裡面確實也定義了許多的CSS,我們就簡單舉一下例子好了。

<Variable name="bgColor" description="Page Background Color" type="color" default="#efefef" value="#efefef">

 

其中他有幾個變數,blogger help分別描述如下:

  • name: 此名稱只能包含字母或數字,而且範本中的每一個名稱必須是獨一無二的
  • description – 可以是較具描述性的名稱,且可包含空格。 此變數會出現在 [字型和顏色] 標籤中。
  • type: 可以是「字型」或「顏色」,字型即為「font」,顏色即為「color」,另外也可以為自動,如「automatic」。
  • default: 預設值。 針對顏色,此變數應包含十六進位顏色代碼,例如 #FF0066。 針對字型,此變數會是 font-tyle font-weight font-size font-family 格式的清單。
  • value:為您對這個屬性所設定的值。

 

而這些值,被<Variable>包夾起來,即定義了一個名稱為「$name」的變數。以上例而言,我們定義了「bgColor」這個變數,他的值為「#efefef」,型態為「顏色」,而我們該如何存取這個值呢?

 

在Blogger中,亦提供了像PHP存取變數的方式,只要在存取變數的前面,加上「$」這個符號,即可存取了,以一段小程式而言:

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

 

而這段為CSS的程式碼,他亦必須包含在中。

 

好了,大概講完頭部的東西了,接下來的文章,海芋將再慢慢介紹給你其它的項目,敬請鎖定喔!

About 張海芋

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響