介绍

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/vuepress-theme-indigo-material