博客主題 Lite

来源:https://www.cnblogs.com/Enziandom/archive/2023/01/29/17071602.html
-Advertisement-
Play Games

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

推薦鏈接

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 查看你博客找到,搜索currentBlogIdcurrentBlogApp

目錄說明

components 文件夾下全是組件,組件的目的是做到所有 views 都可以靈活運用,可以裁剪、可以增加。目的是解決代碼耦合,減少代碼里,提升代碼質量以及可閱讀性等。

views 文件夾下全都是視圖,視圖是用戶可以直接看到的 UI。對 UI 再進行概念細分就有:

  1. adapters:views 要包含很多的列表迴圈,而列表迴圈內的東西太多,就導致 views 代碼混亂,而 adapters 就是拆分 views
    的列表迴圈的小整體。
    adapters 可能與 components 並沒有太大區別,但是 components 的目的是做到通用、靈活,這不是 adapters 該考慮的事情,而是儘可能地與該
    views 綁定。adapters 不是一個專門解決視圖耦合的對象。
  2. fragments:views 包含的邏輯和界面太多,而需要把 views 中一些可以是整體的拆分出去,有自己的邏輯(請求、函數等)和視圖
    那麼就可以是 fragments。同樣地,fragments 與該 views 有很大關係,所以,和 components 也有很大區別。
  3. modules:用戶界面根據作用和視圖承載意義不同,也有很多不同類別可做區分。

其他問題

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


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

-Advertisement-
Play Games
更多相關文章
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...
  • ​ 該專欄是為Linux內核開發編程做鋪墊,如果你對操作系統很熟悉,想瞭解一些Linux內核發開的知識,請直接跳轉至《Linux內核編程專欄》,如果你對Linux內核編程也很熟悉,想瞭解Linux內核的各個模塊,可移步至《Linux內核分析專欄》,帶你領略Linux內核的絕美風光。 ​ 操作系統導學 ...
  • Win11安裝VMware Workstation Pro,Centos,Xshell,Xftp(Linux學習需要) 註意:1.win11不能安裝太低版本的VMware Workstation Pro,否則啟動linux會出現藍屏 ​ 2.win11是預設沒有開虛擬機平臺支持的,所以同時也要開啟, ...
  • 前言 本篇我將介紹 Keil C51 和 MDK-ARM 兩大集成開發環境的安裝包下載方法,幫助大家安全快速的從官網下載安裝包。 博主編寫了軟體安裝教程,可以在安裝包下載完成後,跳轉觀看圖文教程進行軟體的安裝與註冊。 待更新 Keil 官網 Keil 官網 >> 點擊跳轉 Keil C51 官網下載 ...
  • 痞子衡單片機排行榜(2022Q4) 繼2020年開辦的《痞子衡嵌入式半月刊》之後,從2023年1月份開始痞子衡將為大家帶來新項目《痞子衡單片機排行榜》(一年分四季,每個季度發佈一期),以MCU主頻和Coremark跑分為基礎(後期會加入更多指標),搜羅國內外8051/ARM/RISC-V等不同賽道的 ...
  • 固件更新 需將小米AX9000路由支持安裝Docker,但正式版並沒有該功能需更新為開發板Rom,直接在小米路由官網下載固件更新即可,當前正式版最新固件為1.0.165,開發板固件為:1.0.140; 固件更新為140開發版本後即可在小米路由管理頁面的高級設置項中看到DOCKER的選項; 安裝Doc ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • 本文基於此: Flutter中文網 一、安裝和運行Flutter的系統環境要求 想要安裝並運行 Flutter,你的開發環境需要最低滿足以下要求: 操作系統:macOS 磁碟空間:2.8 GB(不包括IDE/tools的磁碟空間)。 工具:Flutter使用git進行安裝和升級。我們建議安裝Xcod ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...