亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

我的這套VuePress主題你熟悉吧

Jeffrrey / 2330人閱讀

摘要：最近熬了很多個(gè)夜晚踩坑無(wú)數(shù)終于寫(xiě)出了用驅(qū)動(dòng)的主題只需體驗(yàn)三分鐘，你就會(huì)跟我一樣，愛(ài)上這款主題已經(jīng)發(fā)布到請(qǐng)客官享用介紹的原主題是的數(shù)高達(dá)的有個(gè)它在靜態(tài)博客網(wǎng)站中的應(yīng)用處處可見(jiàn)在這里首先感謝原作者然而它的定位是僅支持等現(xiàn)代瀏覽器。

最近熬了很多個(gè)夜晚, 踩坑無(wú)數(shù), 終于寫(xiě)出了用VuePress驅(qū)動(dòng)的主題.

只需體驗(yàn)三分鐘，你就會(huì)跟我一樣，愛(ài)上這款主題.

vuepress-theme-indigo-material, 已經(jīng)發(fā)布到npm, 請(qǐng)客官享用~~

介紹

vuepress-theme-indigo-material 的原主題是hexo-theme-indigo, github 的 star 數(shù)高達(dá)2042, fork 的有451個(gè), 它在靜態(tài)博客網(wǎng)站中的應(yīng)用處處可見(jiàn).在這里首先感謝原作者.

然而它的定位是僅支持 IE10+ 等現(xiàn)代瀏覽器。既然不需要支持老版本瀏覽器, 在前端發(fā)展迅猛的今天, 已經(jīng)有許多技術(shù)能夠讓網(wǎng)址更快, 所以我用VuePress來(lái)重寫(xiě)了它. 其實(shí) indigo 的原作者已經(jīng)在用 vuepress 重寫(xiě)了, 但是項(xiàng)目一直沒(méi)有進(jìn)展, 所以我接過(guò)了這個(gè)任務(wù), 最后重寫(xiě)的效果是挺滿意的.

可以看看下面,本主題在我的有 51 篇博客筆記下, 部署在 github page, 在手機(jī) 4G 網(wǎng)絡(luò)下的加載速度gif 圖,網(wǎng)頁(yè)加載速度非?？?更快的是,網(wǎng)頁(yè)加載完成后,此后每個(gè)頁(yè)面的打開(kāi)速度,都是仿佛在點(diǎn)擊本地文件.

具體感受可以點(diǎn)擊我的博客網(wǎng)站來(lái)親身感受, 部署在 github page 下, 國(guó)內(nèi)請(qǐng)可以點(diǎn)擊碼云的 page 地址

正如VuePress文檔所說(shuō):

每一個(gè)由 VuePress 生成的頁(yè)面都帶有預(yù)渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。

用 Lighthouse 來(lái)測(cè)試網(wǎng)站中, SEO 一直都是100 ,打包后的大小也比起原主題小了許多.

巧妙之處

加載快的原因還在于是先在本地編譯中把數(shù)據(jù)寫(xiě)進(jìn)相應(yīng)的 js 文件,

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

然后在網(wǎng)頁(yè)被打開(kāi)時(shí), 在 vue.js 的生命周期 created 中, 結(jié)合 webpack 的 import()語(yǔ)法導(dǎo)入相應(yīng)存放數(shù)據(jù)的 js 文件.

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

webpack 會(huì)把代碼分割,按需去利用 jsonp 去請(qǐng)求 js 文件, 這樣我們就能在本地編譯時(shí)整理所需的數(shù)據(jù), 然后模擬了 web APP 開(kāi)發(fā)的流程, 頁(yè)面先到達(dá)呈現(xiàn), 數(shù)據(jù)后請(qǐng)求.而不用怕我們所需要的數(shù)據(jù)和網(wǎng)頁(yè)一起一次發(fā)過(guò)來(lái),讓網(wǎng)頁(yè)加載速度緩慢

最后利用 vue 強(qiáng)大的 MVVM, 因?yàn)閿?shù)據(jù)都有了, 此后的頁(yè)面幾乎是立即渲染, 即點(diǎn)即開(kāi).

這是我探索出來(lái)對(duì)沒(méi)有后端的靜態(tài)網(wǎng)站的一種很好的性能優(yōu)化.

您換主題的理由

更快更小,

改進(jìn)我在一年的的使用中感受到的原主題一些交互和外觀, 例如刪除分享功能, 移除了打賞功能, 增加移動(dòng)端文章目錄導(dǎo)航等等

更加容易自定義, vuepress 的主題和插件很靈活,只要您會(huì) Vue, 就能利用相關(guān)知識(shí)修改原主題, 和平時(shí)工作中寫(xiě)的頁(yè)面和 APP 差不多

居于本地?cái)?shù)據(jù)的全文搜索

擁抱 vue, 然后能享用它的生態(tài), 例如組件庫(kù), 本主題就利用了 element ui

享用 vuepress 的 Markdown 拓展 , 例如在 Markdown 中 使用 Vue,自定義文章摘要

理論上非常好的 SEO

兼容 hexo 原主題寫(xiě)的 markdwon 文件, 不用修改即可搬遷移到本主題, 前提是您原來(lái)文件有遵守原主題的規(guī)則, 例如在文件頂部有包含 YAML front matte

---
title: 【讀書(shū)筆記】《JavaScript權(quán)威指南》第7章數(shù)組
date: 2018-11-08 04:10:03
tags: [讀書(shū)筆記, 《JavaScript權(quán)威指南》]
---

已經(jīng)發(fā)布到 npm, 只需要下載即可, 還提供一套模板文件結(jié)構(gòu), 下載依賴后立即可以使用, 還提供了相關(guān)操作的 shell 文件,雙擊即可,幾分鐘就能有自己的博客

內(nèi)置評(píng)論功能

......

瀏覽器兼容性

由于博客面向的群體比較都是技術(shù)人員, 所以本主題只在最新版的谷歌瀏覽器和火狐瀏覽器測(cè)試無(wú)誤

vuepress 默認(rèn)有編譯一些對(duì)老版本瀏覽器的兼容, 具體控制請(qǐng)看它官網(wǎng)配置

我寫(xiě)了很詳細(xì)的文檔, 趕快去體驗(yàn)一下vuepress-theme-indigo-material吧, 如果覺(jué)得不錯(cuò), 您能給我一個(gè)star嗎?

github地址:https://github.com/zhhlwd/vue...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101914.html

相關(guān)文章

  • 用vuepress搭建一個(gè)夠自己用的博客

    原文博客 閑扯 很久以前，自己擁有一個(gè)用hexo搭建的靜態(tài)博客網(wǎng)站:ox:，記得當(dāng)時(shí)為了把它搞出來(lái)，廢了不少勁:anger:，然后后來(lái)又?jǐn)鄶嗬m(xù)續(xù)更改過(guò)一些配置和樣式，但是因?yàn)楦杏X(jué)各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現(xiàn)在也懶得在打掃了（其實(shí)是好久不用，有點(diǎn)忘了怎么用了:-1::poop:），前段時(shí)間在百度統(tǒng)計(jì)上看了看那個(gè)靜態(tài)網(wǎng)站的訪問(wèn)人數(shù)，發(fā)現(xiàn)已經(jīng)很久很久沒(méi)人訪問(wèn)過(guò)了...

    Forelax 評(píng)論0 收藏0

  • 用vuepress搭建一個(gè)夠自己用的博客(帶評(píng)論功能)

    摘要：那么我們?nèi)绾卧诓┛椭袑?shí)現(xiàn)這個(gè)功能呢，其實(shí)很簡(jiǎn)單，首先修改我們的文件介紹正在使用的構(gòu)造函數(shù)附加到根實(shí)例的一些選項(xiàng)當(dāng)前應(yīng)用的路由實(shí)例站點(diǎn)元數(shù)據(jù)對(duì)的判斷是防止編譯的時(shí)候報(bào)錯(cuò)然后新建一個(gè)的文件取消默認(rèn)的復(fù)制事件作者靜水深流原文著作權(quán)歸作者所有。 原文博客 閑扯 很久以前，自己擁有一個(gè)用hexo搭建的靜態(tài)博客網(wǎng)站，記得當(dāng)時(shí)為了把它搞出來(lái)，廢了不少勁，然后后來(lái)又?jǐn)鄶嗬m(xù)續(xù)更改過(guò)一些配置和樣式，但是因...

    thekingisalwaysluc 評(píng)論0 收藏0

  • 用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

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

    BetaRabbit 評(píng)論0 收藏0

  • 用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

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

    charles_paul 評(píng)論0 收藏0

  • 用VuePress來(lái)搭建一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站

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

    ky0ncheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<