博客主題 Lite

-Advertisement-

主題說明打開博客園的隨筆詳細頁、標簽頁等，都是整頁重新載入，比較影響體驗。SPA 應用可以減少整頁載入，實現局部刷新，本皮膚通過 Vue3 + TS + Vite 開發的。有些細節待日後逐步完善，隨筆的閱讀和使用基本上沒有問題，文章、日記、部分側邊欄內容還沒有實現。倉庫地址：GitHub，請點個 ...

主題說明

打開博客園的隨筆詳細頁、標簽頁等，都是整頁重新載入，比較影響體驗。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 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>

頁腳 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 請在倉庫中提出，或者博客園私信本人。

您的分享是我們最大的動力!