技術文章 » 高自定義的部落格園主題 Lite v1.4.7

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

2023-02-27 21:00:42

主題說明

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

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

版本說明

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

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

特別注意

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

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

部署說明

首頁 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 }
    ]
  }
};

推薦連結

window.__LITE_CONFIG__ = {
  links: [
    {
      href: "http://ts.xcatliu.com/index.html",
      text: "TypeScript 入門教學"
    }
  ]
};

推薦書籍

window.__LITE_CONFIG__ = {
  books: [
    {
      href: "https://baike.baidu.com/item/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript/19848692",
      text: "深入理解 JavaScript",
      img: "https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202302/11120396251-1_w_1ciob54hybn5.jpg",
      author: "[美]羅徹麥爾",
      rate: 4.5
    }
  ]
};

二次開發

npm install
npm run dev
npm build

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

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

目錄說明

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

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

其他問題

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