❆初訪說明

小說心得評價

▲個人評價說明
 10:精彩逼人,瑕不掩瑜。
  9: 豐富完整,有些缺陷。
  8: 出書水準,或可推薦。
  7: 想法出奇,見仁見智。
  6: 尚且可觀,中規中矩。
  5: 平鋪直敘,淡漠無感。
  4 ↧ 一言難盡,不予評論。
   早期帖麻煩自行轉換
「推薦書單」資料夾收入以下幾種條件的書目:

1. 個人評價四星/8分起跳
2. 看到書名就想起內容
3. 主觀喜歡/欣賞
4. 耐看,能重複看


註:標題以『讀』標記者為推薦
▼原創統整類目
 ◆ 統整推薦:大陸原創小說
       推薦清單

 ◆ 綜合感言:
 ◆ 推薦書單:原創推薦
 ◆ 個帖清單:原創心得
 ◆ 撈書資訊:原創部落格
       分享、介紹

❆文章類別

❆管理後台

❆尋找舊帖

新帖┇熱帖

新訊┇留言

【Blogger】備份範本,網頁結構及修改

  如果不甘止步於增減小工具,想要更進一步的完善、美化網誌,接下來,就要常常和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區顯示效果舉例: (✽若貼進範本無作用,雙引號改為字串&quot;
<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>

  【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>



  其實大致上兩區的語法沒什麼不同,決定放在哪裡的因素還是它包含的內容是什麼。
  了解頁面類型才知道針對特定類型的頁面怎麼修改,點上圖⑵的按鈕進去看到原始碼就不會一頭霧水。

  筆記內容以一反三為主,俺只記結構關鍵點,下列是撰寫本篇所閱讀、參考的網頁:
  1. 布丁布丁吃布丁Blogger範本之網頁類型(pageType)應用〉 - from 布丁布丁吃什麼?
  2. ETBlue圖解:Blogger 新樣板系統的 html 頁面結構〉 - from ETBlue the Alien
  3. Google版面配置資料標記
  4. Google版面配置的小工具標記

0 Comments:

張貼留言