如果不甘止步於增減小工具,想要更進一步的完善、美化網誌,接下來,就要常常和Blogger資訊主頁中的 打交道了。
點開範本,右上角的⑴ 和左下方的⑵ 兩者是將來最常接觸的按鈕。
在 修改範本之前 和 修改範本過程中 要養成隨時備份範本,留一份修改進度的習慣,在出錯時能夠恢復到安全的上一步(以損失最少為原則)。
下載完整範本會輸出成.XML檔,選擇檔案當然亦是如此,和從別的網誌備份過來的檔案類型一樣。
✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Google Blogger開放了<HTML>至</HTML>的完整區塊供使用者直接編輯語法,不同於痞✪頂多供應修改CSS樣式表,它的自由度是相當大的,所以要小心出錯。
雖然我曾經學過網頁語言,但已經是數年前的事了。
這次搬家過來深深覺得有不少東西是沒看過的,像是Widget小工具標記,不知道是G家特有的還是現今的超文字標記語言又進化了?
好了,我不囉唆,來開始筆記內容吧!
網頁型態沒大改變,依然是<HTML></HTML>包含了HEAD和BODY區域。
HEAD區的語法包含CSS樣式,和JavaScript等語法,雖然看不到但會改變版面樣式。
BODY區塊就是肉眼可見的文字、DIV分佈位置等直接影響內容的物件。
比較特立獨行的是,Blogger在頁面類型上又細分成四種(此處採布丁布丁吃布丁的分法):
① index:包含首頁、分頁和搜尋列表。
② archive:封存的文章列表。
③ item:文章內文。
④ static_page:靜態網頁。
✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
用這四種資料標記搭配Blogger的條件標記,形成運算式,放在適當位置就能影響頁面顯示效果和結構了。
作者布丁布丁吃布丁有提到,因為Blogger的index頁面類型不等同於網站(Web)的首頁,它又囊括了三種頁面。所以,若要區分顯示樣式,可以用網址下二重判斷式做區分。
【HEAD區顯示效果】舉例: (✽若貼進範本無作用,雙引號改為字串")
<b:if cond='data:blog.pageType == "index" '> //如果網頁的資料類型為index索引
<b:if cond='data:blog.url == data:blog.homepageUrl'> //又,網址等於首頁時每帖顯示大字
<style>
.posts { font-size: 22px;}
</style>
<b:else/> //若不是首頁,其他兩種類型的每帖顯示小字
<style>
.posts { font-size: 13px;}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'> //又,網址等於首頁時每帖顯示大字
<style>
.posts { font-size: 22px;}
</style>
<b:else/> //若不是首頁,其他兩種類型的每帖顯示小字
<style>
.posts { font-size: 13px;}
</style>
</b:if>
</b:if>
【BODY區顯示效果】舉例: 針對文章在兩種頁面類型要包含何種內容,塞在判斷迴圈裡。
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == "item" '>
<div class='outer-post-wrapper'>
<b:include data='post' name='post'/> //用一個區塊包覆內容全文,
</div> 這樣做方便修改內文樣式。
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/> //靜態網頁部份單純顯示全文
</b:if>
</b:loop>
<b:if cond='data:blog.pageType == "item" '>
<div class='outer-post-wrapper'>
<b:include data='post' name='post'/> //用一個區塊包覆內容全文,
</div> 這樣做方便修改內文樣式。
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/> //靜態網頁部份單純顯示全文
</b:if>
</b:loop>
其實大致上兩區的語法沒什麼不同,決定放在哪裡的因素還是它包含的內容是什麼。
了解頁面類型才知道針對特定類型的頁面怎麼修改,點上圖⑵的按鈕進去看到原始碼就不會一頭霧水。
筆記內容以一反三為主,俺只記結構關鍵點,下列是撰寫本篇所閱讀、參考的網頁:
1. 布丁布丁吃布丁〈Blogger範本之網頁類型(pageType)應用〉 - from 布丁布丁吃什麼?
2. ETBlue〈圖解:Blogger 新樣板系統的 html 頁面結構〉 - from ETBlue the Alien
3. Google〈版面配置資料標記〉
4. Google〈版面配置的小工具標記〉
0 Comments:
張貼留言