主題說明

打開博客園的隨筆詳細頁、標簽頁等，都是整頁重新加載，比較影響體驗，SPA 應用可以減少整頁加載，實作區域重繪，本皮膚通過 Vue3 + TS + Vite 開發的，有些細節待日后逐步完善，隨筆的閱讀和使用基本上沒有問題，文章、日記、部分側邊欄內容還沒有實作，

倉庫地址：GitHub，請點個 ?star 喲~，

部署說明

部署非常簡單，你只需要在：博客園管理-設定下的 “首頁 HTML 代碼”和“頁腳 HTML 代碼”配置即可：

首頁 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: 14px !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: 14px !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: 14px !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>

頁腳 HTML 代碼：

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

配置說明

主題

window.__LITE_CONFIG__ = {
  theme: {
    mode: "dark"
  }
};

不設定使用默認黑夜模式，更多關于主題的配置項正在開發中...

GitHub

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

陳列柜

window.__LITE_CONFIG__ = {
  cabinet: {
    avatar: "url",
    signature: "your text"
  }
};

欄位	描述
avatar	頭像
signature	個性簽名

導航欄

window.__LITE_CONFIG__ = {
  navor: {
    // 支持 html 插入
    header: "<span style='color: red'>CNBLOGS</span>",
    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>`
      }
    ]
  }
};

技能堆疊

window.__LITE_CONFIG__ = {
  graph: {
    alpha: 0.85,
    sides: 5, // 多少個邊
    layer: 5, // 多少層
    lineWidth: 1,
    textSize: 12,
    fillColor: "#409eff",
    strokeColor: "#A7A7A7",
    lineColor: "#A7A7A7",
    textColor: "#A7A7A7",
    data: [
      // 資料，長度必須和 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 檔案夾下全是組件，組件的目的是做到所有 views 都可以靈活運用，可以裁剪、可以增加，目的是解決代碼耦合，減少代碼里，提升代碼質量以及可閱讀性等，

views 檔案夾下全都是視圖，視圖是用戶可以直接看到的 UI，對 UI 再進行概念細分就有：

adapters：views 要包含很多的串列回圈，而串列回圈內的東西太多，就導致 views 代碼混亂，而 adapters 就是拆分 views
的串列回圈的小整體，
adapters 可能與 components 并沒有太大區別，但是 components 的目的是做到通用、靈活，這不是 adapters 該考慮的事情，而是盡可能地與該
views 系結，adapters 不是一個專門解決視圖耦合的物件，
fragments：views 包含的邏輯和界面太多，而需要把 views 中一些可以是整體的拆分出去，有自己的邏輯（請求、函式等）和視圖
那么就可以是 fragments，同樣地，fragments 與該 views 有很大關系，所以，和 components 也有很大區別，
modules：用戶界面根據作用和視圖承載意義不同，也有很多不同類別可做區分，

其他問題

如果有 Issues 請在倉庫中提出，或者博客園私信本人，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542493.html

標籤：其他

上一篇：React入門

下一篇：詳解 Gulp4 和 Gulp3 的區別

博客主題 Lite