[markdown]blogger - headerline optimize

Markdown 有個方便的功能，就是自動建目錄(Why stack edit?)，其是依照 <h1></h1>,<h2></h2> 等 tag，建出樹狀的標題分層架構，但這個功能在 blogger用會有一點點問題。

直觀來說，我們認為的分層架構應該如下:

<h1> Title of this post</h1>
<h2> Sub Title of this post</h2>
<h3> Sub Sub-Title of this post</h3>

但是在 blogger 顯示出來的卻會變成:

這個出乎預期的行為是因為 blogger default format 設定如下:

<h1> Title of this post</h1>
<h3> Sub Title of this post</h3>
<h4> Sub Sub-Title of this post</h4>

<h2> widget.title </h2>

有點不直觀… 也會影响到 search engine 判斷。
所以需要動手修改一下，好讓用外部 markdow editor 編輯出來的文章可以在 blogger 也可以如預期顯示。

下面就以我自已修改的經驗分享，因為之前沒有相關經驗，如果有錯請馬上打臉，感謝~
我是選簡單範本:

然後 follow 這篇文章說明，將 tag 修改掉 (h2 部份我建議全都先改成 h4)。
但因為希望字隨著 header level 顯示大小，所以還是需要改 <h2></h2> 的 font:

h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

改成

.Header h2 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

並在 原本 <Group description="Blog Title" selector=".header h1"></Group> section 下面增加一個 <Group description="Blog Sub-Title" selector=".header h2"></Group> 內容就按照 <Group description="Blog Title" selector=".header h1"></Group> 的即可 (雖然設定 h1, h2 字型大小一樣，但 blogger 顯示出來 h2 就是會比 h1 小，不知為何，有神人可以幫忙解答嗎?)

   <Group description="Blog Sub-Title" selector=".header h2">
     <Variable name="subheader.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
     <Variable name="subheader.text.color" description="Title Color" type="color" default="#3399bb"  value="#000000"/>
   </Group>

改完之後的結果就會如下图:

有需要的人也可以直接從 diff_file 看出我改了那些地方。

Unsolved Question:

1. 雖然設定 h1, h2 字型大小一樣，但 blogger 顯示出來 h2 就是會比 h1 小，不知為何?
2. widget.title 是什麼?…

Written with StackEdit.