高自定義的部落格園主題 Lite v1.4.7

Himmelbleu發表於2023-02-27

主題說明

這是一款高自定義的部落格園主題 Lite，快速預覽 Himmelbleu 的 Lite 主題部落格。

支援博主：GitHub 或 Gitee，點個 ⭐star 喲~。Lite 基於 Vue3 + Vite 建立在部落格園之上的一款部落格主題。

版本說明

目前已經更新到 v1.4.7，本次版本主要完成了最大化配置主題：

主題幾乎所有地方都可以配置：背景設定、卡片樣式、盒子模型、字型相關等。右鍵隨便任何一個區域都可以撥出設定皮膚，每個區域的設定皮膚都不一樣，設定好了之後可以匯出設定以作備份。
進入頁面時做了一個淡入淡出以及頂部進度條的效果，比之前的版本體驗更順滑。

特別注意

有以下幾個部落格園的地方沒有做：

日記頁面；
文章頁面；
公告欄：評論排行榜、文章檔案等

部署說明

首頁 HTML 程式碼

<!-- clear unused elems -->
<script>
  $("head > link").remove();
  $("#top_nav").remove();
  $("#footer").remove();
  $(".clear").remove();
</script>
<!-- lite style -->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/blogs/666252/index.css" />
<!-- lite loading style -->
<style>
  #home {
    display: none !important;
  }

  @-webkit-keyframes loading {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes loading {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .dark-loading {
    background: #222;
  }

  .light-loading {
    background: #fff;
  }

  .dark-loading,
  .light-loading {
    font-size: 1rem !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif !important;
    font-weight: 400;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    z-index: 999999;
  }

  .box h2 {
    font-size: 1rem !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif !important;
    font-weight: 400;
    color: #777;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .box span {
    font-size: 1rem !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif !important;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    width: 0.6em;
    height: 0.6em;
    margin: 0.19em;
    background: #007db6;
    border-radius: 0.6em;
    -webkit-animation: loading 1s infinite alternate;
    animation: loading 1s infinite alternate;
  }

  .box span:nth-of-type(2) {
    background: #008fb2;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }

  .box span:nth-of-type(3) {
    background: #009b9e;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  .box span:nth-of-type(4) {
    background: #00a77d;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }

  .box span:nth-of-type(5) {
    background: #00b247;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }

  .box span:nth-of-type(6) {
    background: #5ab027;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }

  .box span:nth-of-type(7) {
    background: #a0b61e;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }
</style>
<!-- lite loading -->
<div class="dark-loading">
  <div class="box">
    <h2>Loading</h2>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

loading 借用了SILENCE 主題的 loading，你也可以自定義，但注意最外層盒子要保留一個 class 名：dark-loading或light-loading，這樣 Lite 才可以關閉。

頁尾 HTML 程式碼

<!-- lite config -->
<script>
  window.__LITE_CONFIG__ = {};
</script>
<script type="module" src="https://blog-static.cnblogs.com/files/blogs/666252/index.js"></script>

在你的部落格園後臺“選項”中，勾選“啟用數學公式支援”和“數學公式渲染引擎”（選擇 MathJax3），否則數學公式不生效。

部署問題

速度很慢

部落格園會帶有一個國外的請求，所以會比較慢，這不是主題的問題。如果遇到長時間停止在 loading 螢幕請清除快取，多重新整理幾次。

控制檯報錯

如果遇到控制檯報錯，因為一些配置儲存在 localStorage 中，可能是因為博主更新了，需要你手動清除 localStorage。

loading 不關閉

有可能是你不小心關閉了“部落格資料從遠端載入”，在頁尾 HTML 程式碼最底部加一個 script 標籤。也可以清除 localStorage，多重新整理幾次。

<!-- run lite -->
<script>
  // 如果訪問外網速度本身就很快，建議使用下面的程式碼。訪問速度慢建議刪除該 script 標籤。
  window.onload = () => {
    window.__LITE_CONFIG__.onLoaded();
  };
</script>

配置說明

GitHub

window.__LITE_CONFIG__ = {
  github: "your github address"
};

欄位	描述	可選值
github	github 角標，在瀏覽器左上角，PC 端可見

陳列櫃

window.__LITE_CONFIG__ = {
  cabinet: {
    avatar: "url",
    signature: "your text",
    navs: [
      // 可以插入圖片、文字、svg
      {
        href: "https://i.cnblogs.com/posts/edit",
        text: "新隨筆"
      },
      {
        href: "https://gitee.com/Enziandom",
        svg: `<path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z""></path>`
      }
    ]
  }
};

cabinet 是陳列櫃，點選瀏覽器左右中間的透明條可以撥出。

欄位	描述
avatar	頭像
signature	個性簽名
navs	左陳列櫃導航項

滑鼠懸浮在陳列櫃項上時，比如“部落格資訊”，右邊會有一個小的箭頭出現，點選之後可以對該項內容進行收起或展開。

技能棧

window.__LITE_CONFIG__ = {
  graph: {
    alpha: 0.85,
    sides: 5, // 多少個邊
    layer: 5, // 多少層
    lineWidth: 1,
    textSize: 12,
    // 以下四個欄位可以不填
    fillColor: "#409eff",
    strokeColor: "#A7A7A7",
    lineColor: "#A7A7A7",
    textColor: "#A7A7A7",
    comment: [
      // 資料，長度必須和 sides 保持一致
      { title: "CSS", star: 4 },
      { title: "Vue", star: 4 },
      { title: "Java", star: 3 },
      { title: "JS/TS", star: 4 },
      { title: "Android", star: 3 }
    ]
  }
};

二次開發

npm install
npm run dev
npm build

二次開發需要把 build 之後的 index.css、index.js 上傳到部落格園後臺“檔案”。並獲取這兩個檔案的連結，以替換部署說明中標籤的引入連結。

建議多使用 UnoCSS，開發時請把 .env.development 中兩個欄位修改成你自己的，否則獲取的資料是我本人部落格上的，部落格 ID 和部落格 App 都可以 F12 檢視你部落格找到，搜尋currentBlogId 和currentBlogApp。

目錄說明

components 下面的是元件，目前數量很少，元件在本專案的定義是：通用、可配置。重新思考 Vue 元件的定義：

adapters：views 下渲染列表，其內容在其他檢視中也重複使用。adapters 與 components 的區別是 adapters 不需要考慮“通用、可配置”。
fragments：views 下有許多業務要處理，但業務與業務之間並不是相關的，所以需要把 views 中一塊業務拆分成一個元件，fragments 有自己的邏輯（請求、函式等）和檢視。fragments 與該 views 有很大關係。
modules：路由元件，即註冊到 vue-router 項裡面的元件。

其他問題

如果有 Issues 請在倉庫中提出，或者部落格園私信本人。

自定義部落格園主題
2022-06-15
自定義部落格園部落格的背景圖片
2021-02-18
部落格園自定義皮膚
2020-09-22
部落格園主題&美化
2024-04-05
自定義部落格園個人皮膚
2019-03-20
部落格園之自定義部落格(美化+播放器)
2021-05-09
播放器
部落格園SimpleMemory主題美化
2020-08-01
部落格園 SimpleMemory 主題美化
2020-11-29
你要的部落格園主題都有！！！
2020-05-19
部落格園主題折騰記
2024-03-09
部落格園自用主題美化 - Light
2020-06-12
部落格園主題修改分享 - 過年篇
2023-01-10
部落格園主題美化（僅相容 Markdown）
2022-07-11
部落格園主題樣式更改總結
2022-03-24
手摸手教你設定部落格園自定義皮膚
2022-03-31
部落格園主題美化中BUG修復方法
2022-03-27
部落格園主題分享-仿FANFOU-小清新主題
2021-08-13
部落格園主題——atum2.0升級釋出啦
2021-03-16
部落格園的部落格中插入公式
2018-01-20
公式
部落格園皮膚-我的部落格園皮膚設定教程
2019-05-09
一款好看的部落格園主題皮膚-Rebuild From Silence Theme
2022-05-31
Rebuild
解決部落格園md格式部落格的下載與上傳問題
2024-03-10
初入部落格園
2024-04-09
部落格園美化教程
2024-04-10
初學者如何在部落格園釋出部落格
2016-03-04
部落格園css測試
2012-03-03
CSS
VuePress部落格美化之reco主題
2020-07-28
Vue
新浪微部落格戶端(11)-自定義checkBox
2020-04-05
GithubPages+Hexo部落格主題Yilia
2019-02-19
GithubHexo
部落格園背景-主頁banner圖片，已設定好卻載入不出來問題
2022-03-17
ModernUI教程：建立自定義主題
2016-04-10
UI
Flutter寫的部落格園客戶端
2022-12-23
Flutter客戶端
【hexo】一個好看的個人部落格主題
2018-12-20
Hexo
win10如何自定義主題_win10怎麼設定自定義主題
2020-02-06
Win10
部落格園cnblog部落格遷移到Hexo(提供格式轉換)
2024-04-10
Hexo
Win10系統怎麼自定義更改主題 win10自定義修改主題的方法
2016-05-14
Win10
還在美化部落格嗎？試試一鍵更換部落格主題吧！
2019-07-22
部落格園登入請求分析
2017-12-14