資訊專欄INFORMATION COLUMN
摘要：最近熬了很多個夜晚踩坑無數(shù)終于寫出了用驅(qū)動的主題只需體驗三分鐘，你就會跟我一樣，愛上這款主題已經(jīng)發(fā)布到請客官享用介紹的原主題是的數(shù)高達的有個它在靜態(tài)博客網(wǎng)站中的應用處處可見在這里首先感謝原作者然而它的定位是僅支持等現(xiàn)代瀏覽器。
最近熬了很多個夜晚, 踩坑無數(shù), 終于寫出了用VuePress驅(qū)動的主題.
只需體驗三分鐘，你就會跟我一樣，愛上這款主題.
vuepress-theme-indigo-material, 已經(jīng)發(fā)布到npm, 請客官享用~~
介紹vuepress-theme-indigo-material 的原主題是hexo-theme-indigo, github 的 star 數(shù)高達2042, fork 的有451個, 它在靜態(tài)博客網(wǎng)站中的應用處處可見.在這里首先感謝原作者.
然而它的定位是僅支持 IE10+ 等現(xiàn)代瀏覽器。既然不需要支持老版本瀏覽器, 在前端發(fā)展迅猛的今天, 已經(jīng)有許多技術能夠讓網(wǎng)址更快, 所以我用VuePress來重寫了它. 其實 indigo 的原作者已經(jīng)在用 vuepress 重寫了, 但是項目一直沒有進展, 所以我接過了這個任務, 最后重寫的效果是挺滿意的.
可以看看下面,本主題在我的有 51 篇博客筆記下, 部署在 github page, 在手機 4G 網(wǎng)絡下的加載速度gif 圖,網(wǎng)頁加載速度非?？?更快的是,網(wǎng)頁加載完成后,此后每個頁面的打開速度,都是仿佛在點擊本地文件.
具體感受可以點擊我的博客網(wǎng)站來親身感受, 部署在 github page 下, 國內(nèi)請可以點擊碼云的 page 地址
正如VuePress文檔所說:
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。
用 Lighthouse 來測試網(wǎng)站中, SEO 一直都是100 ,打包后的大小也比起原主題小了許多.
巧妙之處加載快的原因還在于是先在本地編譯中把數(shù)據(jù)寫進相應的 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文件成功");
}
);
然后在網(wǎng)頁被打開時, 在 vue.js 的生命周期 created 中, 結合 webpack 的 import()語法導入相應存放數(shù)據(jù)的 js 文件.
created() {
import(/* webpackChunkName: "search" */ "Data/search.js").then(search => {
this.search = search.default;
});
},
webpack 會把代碼分割,按需去利用 jsonp 去請求 js 文件, 這樣我們就能在本地編譯時整理所需的數(shù)據(jù), 然后模擬了 web APP 開發(fā)的流程, 頁面先到達呈現(xiàn), 數(shù)據(jù)后請求.而不用怕我們所需要的數(shù)據(jù)和網(wǎng)頁一起一次發(fā)過來,讓網(wǎng)頁加載速度緩慢
最后利用 vue 強大的 MVVM, 因為數(shù)據(jù)都有了, 此后的頁面幾乎是立即渲染, 即點即開.
這是我探索出來對沒有后端的靜態(tài)網(wǎng)站的一種很好的性能優(yōu)化.
您換主題的理由更快更小,
改進我在一年的的使用中感受到的原主題一些交互和外觀, 例如刪除分享功能, 移除了打賞功能, 增加移動端文章目錄導航等等
更加容易自定義, vuepress 的主題和插件很靈活,只要您會 Vue, 就能利用相關知識修改原主題, 和平時工作中寫的頁面和 APP 差不多
居于本地數(shù)據(jù)的全文搜索
擁抱 vue, 然后能享用它的生態(tài), 例如組件庫, 本主題就利用了 element ui
享用 vuepress 的 Markdown 拓展 , 例如在 Markdown 中 使用 Vue,自定義文章摘要
理論上非常好的 SEO
兼容 hexo 原主題寫的 markdwon 文件, 不用修改即可搬遷移到本主題, 前提是您原來文件有遵守原主題的規(guī)則, 例如在文件頂部有包含 YAML front matte
--- title: 【讀書筆記】《JavaScript權威指南》第7章數(shù)組 date: 2018-11-08 04:10:03 tags: [讀書筆記, 《JavaScript權威指南》] ---
已經(jīng)發(fā)布到 npm, 只需要下載即可, 還提供一套模板文件結構, 下載依賴后立即可以使用, 還提供了相關操作的 shell 文件,雙擊即可,幾分鐘就能有自己的博客
內(nèi)置評論功能
......
瀏覽器兼容性由于博客面向的群體比較都是技術人員, 所以本主題只在最新版的谷歌瀏覽器和火狐瀏覽器測試無誤
vuepress 默認有編譯一些對老版本瀏覽器的兼容, 具體控制請看它官網(wǎng)配置
我寫了很詳細的文檔, 趕快去體驗一下vuepress-theme-indigo-material吧, 如果覺得不錯, 您能給我一個star嗎?
github地址:https://github.com/zhhlwd/vue...
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101914.html
原文博客 閑扯 很久以前，自己擁有一個用hexo搭建的靜態(tài)博客網(wǎng)站:ox:，記得當時為了把它搞出來，廢了不少勁:anger:，然后后來又斷斷續(xù)續(xù)更改過一些配置和樣式，但是因為感覺各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現(xiàn)在也懶得在打掃了（其實是好久不用，有點忘了怎么用了:-1::poop:），前段時間在百度統(tǒng)計上看了看那個靜態(tài)網(wǎng)站的訪問人數(shù)，發(fā)現(xiàn)已經(jīng)很久很久沒人訪問過了...
摘要：那么我們?nèi)绾卧诓┛椭袑崿F(xiàn)這個功能呢，其實很簡單，首先修改我們的文件介紹正在使用的構造函數(shù)附加到根實例的一些選項當前應用的路由實例站點元數(shù)據(jù)對的判斷是防止編譯的時候報錯然后新建一個的文件取消默認的復制事件作者靜水深流原文著作權歸作者所有。 原文博客 閑扯 很久以前，自己擁有一個用hexo搭建的靜態(tài)博客網(wǎng)站，記得當時為了把它搞出來，廢了不少勁，然后后來又斷斷續(xù)續(xù)更改過一些配置和樣式，但是因...
摘要：馨客棧前端導航享受的開發(fā)體驗，在中使用組件，同時可以使用來開發(fā)自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態(tài)的，同時在頁面被加載的時候，將作為運行。 VuePress學習 全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程 假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們 全局安裝 首先我們先全局安裝一下 npm stall -g vuep...
摘要：馨客棧前端導航享受的開發(fā)體驗，在中使用組件，同時可以使用來開發(fā)自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態(tài)的，同時在頁面被加載的時候，將作為運行。 VuePress學習 全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程 假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們 全局安裝 首先我們先全局安裝一下 npm stall -g vuep...
摘要：馨客棧前端導航享受的開發(fā)體驗，在中使用組件，同時可以使用來開發(fā)自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態(tài)的，同時在頁面被加載的時候，將作為運行。 VuePress學習 全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程 假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們 全局安裝 首先我們先全局安裝一下 npm stall -g vuep...
閱讀 750·2021-11-24 09:39
閱讀 3317·2021-11-23 10:06
閱讀 1086·2021-10-08 10:05
閱讀 894·2019-08-30 10:49
閱讀 1877·2019-08-29 14:08
閱讀 1401·2019-08-29 12:48
閱讀 3409·2019-08-26 14:04
閱讀 3754·2019-08-26 13:50
