程式閣 > Blog > 修改 Blogger 的 xml 說明1
調整所需的版型後，還有沒有改到的地方，就要進入 xml 檔內去修改了，請先備份 xml 後，用文書處理軟體開啟，接下來的，我們要簡介如何修改 xml 檔。
在此先簡單介紹註解，其是提供給寫程式的人看，編譯器會當作文字而非程式，不作處理的部分，所以，當程式太長時，為了寫的或以後要維護的人方便，一般都會加上註解，在 xml 的語法內，在設定 CSS 與 HTML 二部分，其使用的註解語法不同，以『這是註解』為例：
CSS註解語法：
/* 這是註解 */
HTML註解語法：
<!-- 這是註解 -->
CSS的註解是包在 /* */ 裡面的東西，而HTML則是包在 <!-- --> 之間的文字，不過，在Variable definitions 的部分，為了不讓CSS編譯器看所以加上/* */，但 Google Blogger會使用，所以，此宣告是有效的。接下來，我們以本 Blog 所用的版型，由 BTemplates 裡的Magazine Basic 為例來看，其 xml 開起來後，一開始的檔頭會使用的 xml version="1.0" 等的宣告，往下看到： /* Variable definitions 的部分，這是 Blogger 宣告一些顏色與字型變數的地方，這部分跟上一篇的直接用 Blogger 管理後台作進階調整有關，裡面可以看到其宣告有三種 Type 如下：
(1)宣告顏色 用的
(2)宣告字型 用的
(3)宣告自訂變數 用的
為何要先說這個呢? 因為這部分是我們到時要統一調整時的好幫手，比如我整個版型是要用藍色的，但原本提供的版型是黑色，或是像本例 Magazine Basic ，是用圖片，當我要修改時，不會只有修一個地方，這會造成那天我想修成紅色時，又要再找一次當初修過的多個地方，而若改為上述的 Variable 宣告好處是，我把所有的同一顏色都用一個變數名字(Variable name)來替代，而我在上面 Variable definitions 來定義此一變數名字的內容，下次，我只要改這個變數名字所表示的顏色或字型時，相關的地方就可以一起更動，而不需要我再一次找相關的地方去修改數字代碼，快又好用，有寫過 c 的人可以把這當作 header 檔。
範例一：
順道提一下，CSS內看到定義『# 』表示 id ，在 HTML 使用時，只能使用一次(及惟一的)，若看到的為『. 』表示 class ，在 HTML 使用時，可以重覆使用，如範例二所示。
範例二：
在此先簡單介紹註解，其是提供給寫程式的人看，編譯器會當作文字而非程式，不作處理的部分，所以，當程式太長時，為了寫的或以後要維護的人方便，一般都會加上註解，在 xml 的語法內，在設定 CSS 與 HTML 二部分，其使用的註解語法不同，以『這是註解』為例：
CSS註解語法：
HTML註解語法：
CSS的註解是包在 /* */ 裡面的東西，而HTML則是包在 <!-- --> 之間的文字，不過，在Variable definitions 的部分，為了不讓CSS編譯器看所以加上/* */，但 Google Blogger會使用，所以，此宣告是有效的。接下來，我們以本 Blog 所用的版型，由 BTemplates 裡的
(1)宣告
<Variable name ... type="color " ... >
(2)宣告
<Variable name ... type="font " ... >
(3)宣告
為何要先說這個呢? 因為這部分是我們到時要統一調整時的好幫手，比如我整個版型是要用藍色的，但原本提供的版型是黑色，或是像本例 Magazine Basic ，是用圖片，當我要修改時，不會只有修一個地方，這會造成那天我想修成紅色時，又要再找一次當初修過的多個地方，而若改為上述的 Variable 宣告好處是，我把所有的同一顏色都用一個變數名字(Variable name)來替代，而我在上面 Variable definitions 來定義此一變數名字的內容，下次，我只要改這個變數名字所表示的顏色或字型時，相關的地方就可以一起更動，而不需要我再一次找相關的地方去修改數字代碼，快又好用，有寫過 c 的人可以把這當作 header 檔。
/* Variable definitions
----------------------------
<Variable name="ex_color1 " description="define Blog front Color" type="color" default="#36f" value="#3366ff">
*/
/* CSS definitions
----------------------------*/
.main-navigation {
background:$ex_color1 ;
}
a.rmlink {
background: none repeat scroll 0 0$ex_color1 ;
}
#footer {
border-top: 1px solid$ex_color1 ;
}
以上例來看， 當我修改Variable name="ex_color1"內的 default值與 value值時，等於同時修改了 .main-navigation, a.rmlink與 #footer 三個不同地方的顏色表示。----------------------------
<Variable name="
*/
/* CSS definitions
----------------------------*/
.main-navigation {
background:
}
a.rmlink {
background: none repeat scroll 0 0
}
#footer {
border-top: 1px solid
}
順道提一下，CSS內看到定義『
/* CSS definitions
----------------------------*/
# test1{ ...
}
. test2{ ...
}
/* HTML code ----------------------------*/
<divid ="test1"> ...
</div>
<divclass ="test2">...
</div>
<divclass ="test2">...
</div>
----------------------------*/
}
}
/* HTML code ----------------------------*/
<div
</div>
<div
</div>
<div
</div>
----------------------------------------------------------------------
[ref 1]:Abin's Tech Note: 自訂樣板的變數
[ref 1]:Abin's Tech Note: 自訂樣板的變數
0 意見:
張貼留言