技術文章 » 皮球

皮球

2023-10-12 06:01:07

又一個部落格園主題 cnblogs-theme-picue，它使用 PetiteVue 和 PicoCSS 構建而成，取名 picue 皮球。

快速開始

進階設定


進階設定

每頁文章數

在設定文章數之前，我們先來理解下主流瀏覽器對同域最大連線數的限制。

Browser HTTP/1.1
IE 8 6
Chrome 4+ 6
Opera 10.51+ 8

上表顯示了當前HTTP/1.1瀏覽器支援的每臺伺服器的連線數量。

因為部落格園使用者首屏的資訊並不包括文章內容，而是顯示文章設定的摘要，首屏確實有一定的抓使用者眼球的影響力，所以我們提前拉取了文章內容，在規定的位置截斷顯示出來。

除此，文章本身的摘要是非常重要的，雖然呈現的內容不如直接抓取內容來的快，但是對於SEO爬取分析和站點結果優化均存在較大的影響力。

回到本頁文章數，結合主流瀏覽器，推薦每頁5篇文章比較合理。能讓文章有可能在同時抓取並返回，減少使用者等待的鈍感。

  • 選項 - 選項 - 首頁與RSS每頁顯示 - 5。

程式碼跟隨主題切換

您可以為淺色模式和深色模式分別設定不同程式碼塊高亮主題, 當您勾選啟用"跟隨系統自動切換淺色/深色模式主題"後, 程式碼塊的主題將隨著系統主題的變化而變化。


您也可以通過自定義JS程式碼來自行決定何時切換為淺色模式或深色模式下的程式碼塊高亮主題。

// 切換到深色主題
window.highlighter.setTheme(window.darkModeCodeHighlightTheme);
// 切換到淺色主題
window.highlighter.setTheme(window.codeHighlightTheme);

主題已經相容了程式碼隨主題切換，只需要這裡設定即可。

  • 設定 - 程式碼高亮 - 系統淺色模式時主題 - prism-material-light。
  • 設定 - 程式碼高亮 - 系統深色模式時主題 - prism-material-dark。

文章預覽

文章預覽該從哪裡截斷呢？根據文章不同，截斷權利應該由使用者選擇內容去做展示達到最好的效果。

文章預覽該如何截斷呢？markdown已經給出了答案，文章內定義<!-- more -->可以輕鬆截斷部分作為預覽部分。

實測部落格園會吞html的註釋部分，想到一個有損，通過設定可無失真的解決方案就是利用本身的空元素代替，我用的是br 換行。如果不想讓換行顯示出來，可以選擇直接設定more的樣式。

  • 編輯 - 編輯/新增隨筆 - 內容 - <br class="more">。

會員救園

已在主題層面支援，希望園子走出困境，選擇堅持下去。