高自定義的博客園主題 Lite v1.4.7

来源:https://www.cnblogs.com/Himmelbleu/archive/2023/02/27/17161605.html
-Advertisement-
Play Games

主題說明 這是一款高自定義的博客園主題 Lite，快速預覽 Himmelbleu 的 Lite 主題博客。 支持博主：GitHub 或 Gitee，點個 :star:star 喲~。Lite 基於 Vue3 + Vite 建立在博客園之上的一款博客主題。 版本說明 目前已經更新到 v1.4.7，本次 ...


主題說明

這是一款高自定義的博客園主題 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: "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 請在倉庫中提出，或者博客園私信本人。


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

-Advertisement-
Play Games
更多相關文章
  • gdbOF閱讀筆記
    前言 今天閱讀了一本說明書，《gdbOF: A Debugging Tool for OpenFOAM》 受himryangzz視頻啟發去讀相關內容，在此對himryangzz表示感謝 希望本篇文章能為需要gdb調試of的人節約時間 文章前言： 文章前言說of確實做的很不錯，但調試者需要對of類的結 ...
  • 彙編語言學習_1_Hello,world!
    0x00漏洞信息 漏洞影響：本地提權 漏洞文件：win32kfull.sys 漏洞函數：vStrWrite04 漏洞原因：越界讀寫 分析系統：Windows 1903 0x01漏洞分析 崩潰時的堆棧： nt!KiBugCheckDebugBreak+0x12 nt!KeBugCheck2+0x952 ...
  • VirtualBox 安裝centos設置固定地址可訪問互聯網
    VirtuanBox 安裝完成虛擬機後，打開VirtuanBox，添加一塊網卡，設置如下， 還可以通過控制面板查看該網卡的具體參數信息，也可進行相應修改： 虛擬機中針對剛安裝的centos系統，設置網路，配置兩快網卡如下： 打開centos系統，複製/etc/sysconfig/network-sc ...
  • U-Boot-基礎概念與學習分享
    文章對 u-boot 學習路線進行了簡單介紹， 並從 u-boot 構建框架著手解構 u-boot， 以 Kconfig 為索引文件自底向上分析框架。 除此之外還介紹了 Boot Loader 的幾個基本流程， 對其中的 TPL 過程進行了剖析。 ...
  • Oracle中表欄位加中文註釋，應該怎麼寫呢？
    首發微信公眾號：SQL資料庫運維 原文鏈接：https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • Redis 緩存過期策略和記憶體淘汰策略
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 作者： bruce 文章來源：GreatSQL社區原創 什麼是events_statements_current表 在MySQL中，PFS下有一張記憶體表 ...
  • 10分鐘搞懂 Data Fabric 和 Data Mesh 的區別！
    大數據平臺建設有其天生的複雜性，每一年都在推陳出新，從WareHouse、DataLake到LakeHouse，各種各樣的Batch、Stream、MPP、Machine Learning、Neural Network計算引擎，對應解決的場景和組合的方式非常個性化，建設過程會遇到包括技術層面、組織層... ...
  • 做一個 Vue 右鍵菜單組件
    取消原生右鍵事件 在 main.ts 函數中取消瀏覽器預設右鍵菜單： window.oncontextmenu = () => { return false; }; 組件模板 做一個不同區域右鍵點擊之後不同菜單項的組件，創建組件模板： <!-- ContextMenu --> <div ref="m ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類