我的這套VuePress主題你熟悉吧

Jeffrrey 發布于2019-08-23 15:21 / 2247人閱讀

摘要：最近熬了很多個夜晚踩坑無數終于寫出了用驅動的主題只需體驗三分鐘，你就會跟我一樣，愛上這款主題已經發布到請客官享用介紹的原主題是的數高達的有個它在靜態博客網站中的應用處處可見在這里首先感謝原作者然而它的定位是僅支持等現代瀏覽器。

最近熬了很多個夜晚, 踩坑無數, 終于寫出了用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 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優化（SEO）。

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

巧妙之處

加載快的原因還在于是先在本地編譯中把數據寫進相應的 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地址:https://github.com/zhhlwd/vue...

云服務器 GPU云服務器 VuePress 這套 flash里的這段AS 最熟悉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101914.html

用vuepress搭建一個夠自己用的博客

原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站:ox:，記得當時為了把它搞出來，廢了不少勁:anger:，然后后來又斷斷續續更改過一些配置和樣式，但是因為感覺各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現在也懶得在打掃了（其實是好久不用，有點忘了怎么用了:-1::poop:），前段時間在百度統計上看了看那個靜態網站的訪問人數，發現已經很久很久沒人訪問過了...

Forelax 2019-05-27 17:43 評論0 收藏0
用vuepress搭建一個夠自己用的博客(帶評論功能)

摘要：那么我們如何在博客中實現這個功能呢，其實很簡單，首先修改我們的文件介紹正在使用的構造函數附加到根實例的一些選項當前應用的路由實例站點元數據對的判斷是防止編譯的時候報錯然后新建一個的文件取消默認的復制事件作者靜水深流原文著作權歸作者所有。原文博客閑扯很久以前，自己擁有一個用hexo搭建的靜態博客網站，記得當時為了把它搞出來，廢了不少勁，然后后來又斷斷續續更改過一些配置和樣式，但是因...

thekingisalwaysluc 2019-08-26 13:55 評論0 收藏0
用VuePress來搭建一個極簡的靜態網站

摘要：馨客棧前端導航享受的開發體驗，在中使用組件，同時可以使用來開發自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態的，同時在頁面被加載的時候，將作為運行。 VuePress學習全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們全局安裝首先我們先全局安裝一下 npm stall -g vuep...

BetaRabbit 2019-08-30 15:55 評論0 收藏0
用VuePress來搭建一個極簡的靜態網站

摘要：馨客棧前端導航享受的開發體驗，在中使用組件，同時可以使用來開發自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態的，同時在頁面被加載的時候，將作為運行。 VuePress學習全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們全局安裝首先我們先全局安裝一下 npm stall -g vuep...

charles_paul 2019-08-23 14:58 評論0 收藏0
用VuePress來搭建一個極簡的靜態網站

摘要：馨客棧前端導航享受的開發體驗，在中使用組件，同時可以使用來開發自定義主題。馨客棧每日分享為每個頁面預渲染生成靜態的，同時在頁面被加載的時候，將作為運行。 VuePress學習全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前hexo的視頻教程假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們全局安裝首先我們先全局安裝一下 npm stall -g vuep...

ky0ncheng 2019-08-02 14:09 評論0 收藏0