主題說明

這是一款高自定義的博客園主題 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 >
  <div >
    <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"
};

陳列柜

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 是陳列柜，點擊瀏覽器左右中間的透明條可以呼出，

滑鼠懸浮在陳列柜項上時，比如“博客資訊”，右邊會有一個小的箭頭出現，點擊之后可以對該項內容進行收起或展開，

技能堆疊

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: "http://img3m1.ddimg.cn/85/1/11120396251-1_w_1.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 請在倉庫中提出，或者博客園私信本人，

標籤：其他

上一篇：JS 代碼片段 / 預編譯/預決議 /執行背景關系/ECG/EC/ECS/GO/VO/AO

下一篇：做一個 Vue 右鍵選單組件