我的這套VuePress主題你熟悉吧

NO IMAGE

最近熬了很多個夜晚, 踩坑無數, 終於寫出了用VuePress驅動的主題.

只需體驗三分鐘,你就會跟我一樣,愛上這款主題.

vuepress-theme-indigo-material, 已經發布到npm, 請客官享用~~

介紹

vuepress-theme-indigo-material 的原主題是hexo-theme-indigo, github 的 star 數高達2042, fork 的有451個, 它在靜態博客網站中的應用處處可見.在這裡首先感謝原作者.

然而它的定位是僅支持 IE10+ 等現代瀏覽器。既然不需要支持老版本瀏覽器, 在前端發展迅猛的今天, 已經有許多技術能夠讓網址更快, 所以我用VuePress來重寫了它. 其實 indigo 的原作者已經在用 vuepress 重寫了, 但是項目一直沒有進展, 所以我接過了這個任務, 最後重寫的效果是挺滿意的.

可以看看下面,本主題在我的有 51 篇博客筆記下, 部署在 github page, 在手機 4G 網絡下的加載速度gif 圖,網頁加載速度非常快,更快的是,網頁加載完成後,此後每個頁面的打開速度,都是彷彿在點擊本地文件.

具體感受可以點擊我的博客網站來親身感受, 部署在 github page 下, 國內請可以點擊碼雲的 page 地址

我的這套VuePress主題你熟悉吧

正如VuePress文檔所說:

每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML,也因此具有非常好的加載性能和搜索引擎優化(SEO)。

用 Lighthouse 來測試網站中, SEO 一直都是100 ,打包後的大小也比起原主題小了許多.

我的這套VuePress主題你熟悉吧

巧妙之處

加載快的原因還在於是先在本地編譯中把數據寫進相應的 js 文件,

fs.writeFile(
`${dataPath}/search.js`,
`export default ${JSON.stringify(search, null, 2)};`,
error => {
if (error)
return console.log('寫入搜索search文件失敗,原因是' + error.message);
console.log('寫入搜索search文件成功');
}
);

然後在網頁被打開時, 在 vue.js 的生命週期 created 中, 結合 webpack 的 import()語法導入相應存放數據的 js 文件.


created() {
import(/* webpackChunkName: "search" */ "Data/search.js").then(search => {
this.search = search.default;
});
},

webpack 會把代碼分割,按需去利用 jsonp 去請求 js 文件, 這樣我們就能在本地編譯時整理所需的數據, 然後模擬了 web APP 開發的流程, 頁面先到達呈現, 數據後請求.而不用怕我們所需要的數據和網頁一起一次發過來,讓網頁加載速度緩慢

最後利用 vue 強大的 MVVM, 因為數據都有了, 此後的頁面幾乎是立即渲染, 即點即開.

這是我探索出來對沒有後端的靜態網站的一種很好的性能優化.

您換主題的理由

  • 更快更小,
  • 改進我在一年的的使用中感受到的原主題一些交互和外觀, 例如刪除分享功能, 移除了打賞功能, 增加移動端文章目錄導航等等
  • 更加容易自定義, vuepress 的主題和插件很靈活,只要您會 Vue, 就能利用相關知識修改原主題, 和平時工作中寫的頁面和 APP 差不多
  • 居於本地數據的全文搜索
  • 擁抱 vue, 然後能享用它的生態, 例如組件庫, 本主題就利用了 element ui
  • 享用 vuepress 的 Markdown 拓展 , 例如在 Markdown 中 使用 Vue,自定義文章摘要
  • 理論上非常好的 SEO
  • 兼容 hexo 原主題寫的 markdwon 文件, 不用修改即可搬遷移到本主題, 前提是您原來文件有遵守原主題的規則, 例如在文件頂部有包含 YAML front matte
---
title: 【讀書筆記】《JavaScript權威指南》第7章數組
date: 2018-11-08 04:10:03
tags: [讀書筆記, 《JavaScript權威指南》]
---
  • 已經發布到 npm, 只需要下載即可, 還提供一套模板文件結構, 下載依賴後立即可以使用, 還提供了相關操作的 shell 文件,雙擊即可,幾分鐘就能有自己的博客
  • 內置評論功能
  • ……

瀏覽器兼容性

由於博客面向的群體比較都是技術人員, 所以本主題只在最新版的谷歌瀏覽器和火狐瀏覽器測試無誤

vuepress 默認有編譯一些對老版本瀏覽器的兼容, 具體控制請看它官網配置

我寫了很詳細的文檔, 趕快去體驗一下vuepress-theme-indigo-material吧, 如果覺得不錯, 您能給我一個star嗎?

github地址:github.com/zhhlwd/vuep…

相關文章

Java100天知識進階基本類型知識鋪(一)

是時候保持備戰狀態了

nuxt&pm2:零停機部署

Mac下SonarSwift的配置使用