Endless TACOJOHN

在其他的BLOG空間裡，很常見的便是繼續閱讀的功能。但在Google的Blogger裡，卻是找不到這個功能的。但也因為Blogger的高程式自由度特色，我們其實也可以很容易把這個功能給加入。
繼續閱讀的功能，其實就是讓撰文者可以選擇不同長度的內文顯示在首頁，而不是完整的顯現；也就是像在首頁的部份顯示abstract一樣，當讀者對該文有興趣時，再透過點取"繼續閱讀"連結來觀看完整的文章。這功能尤其在當您的文章落落長時就顯得非常的有用了，尤其落落長的文章不僅止會影響版面的layout，更會影響對該文章沒興趣的讀者閱讀其他文章的閱讀興趣呢!!

在很久前的一篇"【Blogger】Expandable posts with Peekaboo view"文章裡，我就有簡單記錄了一下如何在blogger使用"繼續閱讀"的功能，來達成精簡版面的效果。
在那一篇裡，除了是加入"繼續閱讀"的功能外，更同時提供了"折疊"的功能，透過javascript的效果，將更要隱藏的內文折疊，當使用者想看時才打開，搭配fade in的效果，相當的炫!!!

不過，由於這個效果，對於非常講求速度的人來說，或是單純想要極簡風而不想要這些很炫的功能的使用者來說，可能就有點殺雞用牛刀的感覺了!!
因此，這邊就簡單記錄一下更簡單的方法，讓使用者點"繼續閱讀"時，是指接換頁進入該文章的頁面。而要隱藏的文字部份，如同之前那一篇一樣，都是透過CSS tag來控制，讓文章撰寫的人可以自由的控制文章的顯示囉!!

當然，兩種方式都有它有趣、好玩的功能，就看個人的使用習慣及想要的效果囉!!

在開始之前，先回味一下如何修改blogger的code好了。
要進入修改code的頁面，最簡單的方式，大概就屬於從您的網站頁面進入了!!從您的網站頁面上方，有一個稱為"Navigation Bar"的玩意兒，就像下面的圖一樣，點擊"自訂"即可!!


進入控制主頁後，進入"版面配置"這個頁籤，並點擊進入"修改HTML"這個頁面!!(如下圖，標示為1的地方)
在這個頁面中，您可以選擇備份您的模版(template)，會將模版的XML檔下載至您的本地機器上。
或是您也可以透過上傳模版XML檔的方式，將您於本地端修改的模版檔上傳至blogger上。(如下圖，標示為2的地方)
另外，由於blogger將各不同的小裝置(區塊)套入模組化的概念，所以如果您有需要直接透過這個頁面修改小裝置的程式的話，記得把下圖標示為3的地方，即"展開小裝置範本"的地方選取打勾哦!!!^1、2



Okay, are you ready?!
Let's do it step by step!!

• Step 1:
  先找到(可以利用Ctrl+F搜尋)這段code: <data:post.body/>
  (其實，按照國外的教學，應該是要找post-header-line-1這一段code才對。如果您是使用Blogger本身提供的template來修改的話，上面這段應該是可以正常找到的；但有些高手客製的template可能會把它移除或是修改，那可能就會找不太到這一段程式。也因此，為了一勞永逸，直接找上面我寫的那一段就好囉!!)
  這一段<data:post.body/>程式，一定會存在您的程式裡，無論您是用那一個版本的template，因為這一段程式是blogger用來顯示您的文章本文的!!



• Step 2:
  把下面的這段程式複製，並取代剛剛找到的<data:post.body/>。
  <b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
<b:else/>
  <style>.fullpost{display:none;}</style>
  <p><data:post.body/></p>
  <b:if cond='data:blog.pageType != "item"'>
    <br /><a expr:href='data:post.url'>Read more...</a>
  </b:if>
</b:if>
  Okay，我稍微解釋一下上面這段程式好了。
  <b:if cond='data:blog.pageType == "item"'>，這個判斷式其實就是用來判斷頁面是在特定文章的頁面(只顯示該文章的內文)或是在首頁(會顯示一定數目的文章)。若為item的話，則表示是在特定文章的頁面!!
  下面的就是根據判斷式，如果是在特定文章的頁面的話，就會將完整的文章顯示，<style>.fullpost{display:inline;}</style>表示即便您文章內文用CSS tag，將style設為fullpost亦會顯示出來!!
  反之，如果是在首頁的話，就會利用CSS tag，將CSS的style設為fullpost的部份給隱藏(<style>.fullpost{display:none;}</style>)!!
  此外，由於在首頁時，我們會把部份文章隱藏，所以要加個Read more的連結，也就是上面第7行的部份。聰明的您應該看的出來，<a expr:href='data:post.url'>Read more...</a>這一段其實就是新增一段文字"Read more..."，並將這段文字加上超連結連到該文章的頁面囉!!也因此，這個"Read more..."是可以修改的，管你是要用英文、中文、台語還是台灣國語，改它就對了!!它前面的"<BR />"則是HTML的換行符號，也就是我們希望換行後才顯示"Read more..."，可以讓讀者在視覺上容易注意，也可以讓讀者在心裡上稍喘一口氣!!當然這也是可以自由的修改的囉!!

• ^PS.1在設定本篇討論的功能時，記得要把它打勾哦!!


• ^PS.2個人習慣，會先把這個選項打勾後，直接把全部的程式碼全選、拷貝，在自己平常習慣的文字編輯器(如Ultra Edit等)編輯，編輯完後再貼回瀏覽器儲存。這樣至少在編輯上是依自己習慣的編輯器動作!!


• ^PS.3小弟我原本是用<span id="fullpost">來實做這個功能(我的tag是id，而不是class)，後來改template時若照上面的程式寫的話，所有的文章都沒辦法達到隱藏的功能，除非我每篇文章都把隱藏的部份的tag改回class。
  不過…我們可是在討論修改上百篇的文章啊!!我怎麼可能真的這麼幹呢!!!
  如果您有跟小弟一樣的困擾的話，其實改兩個地方就可以很簡單的讓您完成無縫轉換template啦!!
  只要把Step2的程式，兩個.fullpost改成#fullpost，那您在寫文章時，就可以繼續延用<span id="fullpost">啦!!


• ^PS.4如果您想要直接完整顯示整篇文章，即不要在首頁隱藏加上"Read more..."的話，只要在寫文章時，不要加上那段<span>的CSS碼即可!!