博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我的这套VuePress主题你熟悉吧
阅读量:5832 次
发布时间:2019-06-18

本文共 1967 字,大约阅读时间需要 6 分钟。

最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题.

只需体验三分钟,你就会跟我一样,爱上这款主题.

, 已经发布到npm, 请客官享用~~

介绍

的原主题是, github 的 star 数高达2042, fork 的有451个, 它在静态博客网站中的应用处处可见.在这里首先感谢原作者.

然而它的定位是仅支持 IE10+ 等现代浏览器。既然不需要支持老版本浏览器, 在前端发展迅猛的今天, 已经有许多技术能够让网址更快, 所以我用来重写了它. 其实 indigo 的原作者已经在用 vuepress 重写了, 但是项目一直没有进展, 所以我接过了这个任务, 最后重写的效果是挺满意的.

可以看看下面,本主题在我的有 51 篇博客笔记下, 部署在 github page, 在手机 4G 网络下的加载速度gif 图,网页加载速度非常快,更快的是,网页加载完成后,此后每个页面的打开速度,都是仿佛在点击本地文件.

具体感受可以点击我的来亲身感受, 部署在 github page 下, 国内请可以点击码云的

demo.gif

正如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:03tags: [读书笔记, 《JavaScript权威指南》]---
  • 已经发布到 npm, 只需要下载即可, 还提供一套模板文件结构, 下载依赖后立即可以使用, 还提供了相关操作的 shell 文件,双击即可,几分钟就能有自己的博客
  • 内置评论功能
  • ......

浏览器兼容性

由于博客面向的群体比较都是技术人员, 所以本主题只在最新版的谷歌浏览器和火狐浏览器测试无误

vuepress 默认有编译一些对老版本浏览器的兼容, 具体控制请看它

我写了很详细的文档, 赶快去体验一下吧, 如果觉得不错, 您能给我一个star吗?

github地址:

转载地址:http://fjrdx.baihongyu.com/

你可能感兴趣的文章
ThinkPHP 3.2 整合 Workerman 踩坑
查看>>
微信小程序开发中遇到的问题及解决方式
查看>>
ch01-vue.js简介、环境搭建及脚手架工具
查看>>
3·15曝光丨智能机器人一年拨打40亿个骚扰电话,6亿人信息已遭泄露!
查看>>
自动化部署打破混乱之墙 助力开发、运维、测试协同作战
查看>>
红帽峰会2018第一天:数字转型扛把子OpenShift
查看>>
ASP.NET 2.2 Preview 1首次支持Java SignalR客户端
查看>>
深入JVM彻底剖析ygc越来越慢的原因(下)
查看>>
红帽技术开放日:参与开源社区不只有贡献代码这一种方式
查看>>
《Spark GraphX in Action》书评及作者访谈
查看>>
如何定义性能需求
查看>>
一个小米SRE的日常问题排查记录
查看>>
RPC框架的可靠性设计
查看>>
Rust编程语言的核心部件
查看>>
WiFi万能钥匙万玉权:管理应该是“自下而上”
查看>>
Visual Studio最新特性分析
查看>>
Kubernetes集群中的高性能网络策略
查看>>
eBay是如何将Envoy作为边缘代理的:将硬件负载均衡器替换为软件解决方案
查看>>
本地vs云:大数据厮杀的最终幸存者会是谁?
查看>>
Java的内存 -JVM 内存管理
查看>>