我的这套VuePress主题你熟悉吧

Jeffrrey 发布于2019-08-23 15:21 / 2141人阅读

摘要：最近熬了很多个夜晚踩坑无数终于写出了用驱动的主题只需体验三分钟，你就会跟我一样，爱上这款主题已经发布到请客官享用介绍的原主题是的数高达的有个它在静态博客网站中的应用处处可见在这里首先感谢原作者然而它的定位是仅支持等现代浏览器。

最近熬了很多个夜晚, 踩坑无数, 终于写出了用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...

混合云服务器托管 VuePress 这套 flash里的这段AS 最熟悉

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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