在Blogger加入~~~"繼續閱讀"標籤

Blogger的頁面展示 , 其中一個Bill比較覺得看起來比較不喜歡的是預設將每篇文章完全展示出來 ,
這樣確實方便讀者閱讀 , 但是卻使得Blog整個版面一直下拉@@ , 有時候自己推滾輪都推到酸@@
同時也比較容易讓人忽略掉了下面一點的文章 ,
所以如果可以將"繼續閱讀"這類的標籤加入版面之中 , 讓預設展示出來的文章是自由選定的片段 , 那就可以改善這樣的問題囉^ ^
那以下就看Bill說明囉 ^ ^

===========================

經過Bill在網路上的探訪 , 基本上知道了較常用的兩種方式 ,

1.一種是在網頁全數展示出後 , 使用javascript的方式 , 將內嵌選定的部份來做隱藏的動作 ,

2.另一種則就是在html中去處理 , 將Span區塊做展示或隱藏的動作

前面用javascript主要的問題在於基本上還是先有全數展示的動作,所以對使用者來說,還是將整個首頁的全部文章都load進來了,所以就變成沒有減低讀取的速度...

而另一種html的方式就不同囉^ ^
因為採用的是網頁在列出版面的時候,判斷展示模式來決定span區塊的隱藏或展示,這樣並不會將文章完整的load過再做處理,而是若隱藏就不做展示區塊...確實在速度上算是佔了點優勢

依照上面的比較 , Bill選擇了html的方式 , 以達到較好的效能感覺 , 那接下來就是整個修改html的流程和說明囉~~~

第一,我們要先決定將來要做隱藏的span區塊Class name(類別的辨識名稱 , 就當作是取名好了) , 假設我們用hiddenpart為例好了 , 並且希望在只有點選進入單篇文章的時候,才將這個span區塊包進來的部份做展示的動作,其他狀況下就不顯示囉^ ^

所以在邏輯上,我們要做的就是透過html語言告訴瀏覽器,判斷目前的展示模式,只有在單篇文章的時候,才將hiddenpart放在文章中,其餘模式就不顯示囉 ~~

於是我們先找到html標籤尾巴(/head)...然後在其前面多加一個內含判斷式的style區塊 ,

判斷現行展示模式 , 若為單篇文章模式(cond='data:blog.pageType == "item"') ,

則將我們隱藏的部份列在文行(span.hiddenpart {display:inline;})中 ,

若不是的話,就隱藏囉...(span.hiddenpart {display:none;})

所以這個部份的程式碼完整的就如下所示 :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.hiddenpart {display:inline;}
<b:else/>
span.hiddenpart {display:none;}
</b:if>
</style>
</head>

***********************

再來 , 我們想要在文章不完全顯示時 , 都多一個超連結的點選按鈕 , 例如 "More..." , 讓讀者點選後自動切換僅展示該單篇文章的模式 (這時候自然就是如我們想要的將全部內容展示囉(含hiddenpart)) , 所以這部份的一樣必須增加一個邏輯判斷 , 當文章不是展示單篇模式的時候(cond='data:blog.pageType != "item"') , 就再每篇文章的結尾之後增加一個超連結 (<a expr:href='data:post.url'>More...</a>) , 只到的就是此篇文章的專屬網址 ('data:post.url') , 這部份的文字各位也可以用區塊包起來 , 定義文字放置位置(置中,靠左,靠右) , 也可以個別定義文字的大小囉^ ^

這個部份完整的程式碼範例如下:

<b:if cond='data:blog.pageType != "item"'>
<div align='left'><font color='#38B63C' face='Courier' size='4'>
<a expr:href='data:post.url'>More...</a>
</font>
</div>
</b:if>

*******************

最後咧 , 就是各位在每篇文章編輯的時候自行決定要包住的隱藏區囉^ ^

各位只需在在編輯文章的時後 , 在自己要包住的部份 , 前面加上 <span class="hiddenpart">

而後面加上 </span> , 這樣的話 , 被包住的區域就會如我們所設定的判斷狀況來做隱藏或展示囉^ ^

*****************

呼~~終於結束囉 , 但是這樣看下來完整的解釋似乎會讓大家看得有點龍龍轉@@ , 所以Bill就把它綜整一下囉~~

操作步驟如下:

Step 1. 首先各位必須來到"版面配置"畫面 , 點選 "修改HTML" ,(建議先行複製範本囉 , 也就是點選"下載完整範本")

同時還要記得勾選右上方的"展開小裝置範本" , 接下來找到</head> , 將其取代為下述的程式碼 , 完成如下圖

<style>
<b:if cond='data:blog.pageType == "item"'>
span.hiddenpart {display:inline;}
<b:else/>
span.hiddenpart {display:none;}
</b:if>
</style>
</head>

Step 2. 找到 <data:post.body/> , 在其後增加以下程式碼 , 完成如下圖

<b:if cond='data:blog.pageType != "item"'>
<div align='left'><font color='#38B63C' face='Courier' size='4'>
<a expr:href='data:post.url'>More...</a>
</font>
</div>
</b:if>

Step 3.在文章編輯的時候 , 在自己想要劃分的部分 , 前後分別加上

<span class="hiddenpart">
以及
</span>
這樣中間包覆的地方就會是視狀況隱藏或展示的部分囉^ ^ , 說明如下圖:

Step 4.而各位假使希望每篇文章都自動先將隱藏區塊的兩個標籤先加進來的話 , 也可以在"設定" , "格式"的地方自行定義文章範本囉 , 就如下圖所示 :

完成以上的動作之後 , 就可以開心的來看看是否展示正常囉^^

幾個在Blogger常用的展示模式判斷條件

<b:if cond='data:blog.pageType == "item"'&gt;(目前頁面在內文(也就是點進單篇文章的時候) ) <b:if cond='data:blog.pageType == "archive"'> (目前頁面在歷史文章列表)
<b:if cond='data:blog.pageType == "index"'> (目前頁面在分類標籤列表)
<b:if cond='data:blog.url == data:blog.homepageUrl'> (網址等於首頁)