如題，不過這裡沒利用到 template 跟 javascript，是純 CSS 的 Blogger 繼續閱讀功能。而且我寫的「繼續閱讀」功能是給 Blogger (Blogspot) 的 Minima 模版用的，如果你的模版跟我不一樣，可能得自己動手改改。
還有並不是每篇文章都有弄好了，各位可以看出明顯變化的，目前只有下列幾個連結裡的。
另外因為是純 HTML+CSS 的，所以不但會挑瀏覽器，而且分類頁中的第一篇也因為礙於文章獨立頁面限制，沒辦法弄出繼續閱讀功能。（當然太短的文章我是不會放這功能的）
有興趣研究的人，可以搜尋網頁原始碼中的「/* 很挑瀏覽器的純 CSS 「繼續閱讀」功能 */」及「開關內文」和「class="GoBackTop"」來看看。（註：目前還有些 bug 要修）
（註：如果不喜歡這功能的話，Firefox 可以用 Stylish 慢慢改掉 CSS 規則。）
已知問題
沒有完整支援 CSS2 規格的瀏覽器不會起作用，當然純文字瀏覽器也不會起作用。（圖形介面瀏覽器主要是得看懂選擇子的「
+」跟「:after」才能支援）用 Firefox 的 Ctrl-F 搜尋「後續完整文章」啥的，不會跳到繼續閱讀的超連結上。
還沒檢查直接列印時會如何，也許還得另外準備列印用 CSS……說到這，該死的 Blogger 快提供獨立 CSS 檔案的放置空間呀！（不過用 Firefox 還是可以線上靠 Stylish 修改列印樣式，或是下載回來自己修掉相關原始碼。）
使用方法有點麻煩，不止要看得懂原始碼，你還得先準備個內文書籤用的 id，還有該篇文章的獨立頁面，這樣點下繼續閱讀超連結後，才會到接續的位置，而且要更改時，得一篇篇打開來處理，沒辦法模版化。（當然你也可以選擇在模版內會吐出單篇文章內容的位置插入個 id，但是我討厭編輯模版，所以不知道該怎麼弄。）
相當不適合使用「所見即所得」的編輯模式，我是指手動按 Enter 換行後，網頁成品也會換行的那種編輯模式，因為這樣會造成 p 元素內又塞了 div 跟 p 這些區塊元素，會讓網頁的文意啥的很難看。（但是可以改用 span 元素來避開這問題）
另外就是我懶得美化繼續閱讀的超連結了，畢竟這是 CSS 的 content 屬性，要美化很麻煩，大家知道這不是內文就好。
然後，因為是用 CSS 處理，而 Blogger 在文章分類頁、首頁、單篇文章頁面中，使用的 id 跟 class 名稱都沒差，所以會作用到全部網頁上。
還有礙於不能讓文章獨立頁面的文也縮起來，所以首頁跟分類頁的第一篇文，並不會顯示繼續閱讀。
「用 CSS 隱藏的作法，可以不讀入影音檔嗎？」我懶得測，請自己動手。
一定要在同一頁裡打開來的人，很遺憾，用 CSS 只能「在滑鼠移上時」顯示隱藏文章，所以不適合你的要求。（如果我的 Javascript 功力再進步點，會考慮試試看的。）
0 comments:
張貼留言