我的这套VuePress主题你熟悉吧 1
最近熬了很多个夜晚, 踩坑无数, 终于写出了用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主题你熟悉吧 1相关推荐
- 我的这套VuePress主题你熟悉吧
最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题. 只需体验三分钟,你就会跟我一样,爱上这款主题. vuepress-theme-indigo-material, 已经发布到n ...
- 如何将地址栏打开的图标隐藏_如何制作一款手机主题?这套UI主题图标教程将为你解密!...
想要学习手机主题制作,大量临摹优秀案例作品,是提高软件熟练程度以及形成创作思维的捷径,本套课程注重案例实操的同时,也强调教会大家临摹的方法,课程将带你探秘大赛获奖作品的制作经验. - 立即学习:htt ...
- 推荐一套WPF主题皮肤
在CodePlex上发现了一套WPF的主题皮肤,直接应用于系统自带的控件,一共有四种配色方案,做得也还比较精致.感兴趣的朋友可以使用一下.点击下载 另外一套我比较喜欢的皮肤这里也推荐一下吧: ...
- vue使用element-ui 实现多套自定义主题快速切换
一.引入element-ui主题文件 在element-ui官网编辑好自己需要的主题样式 下载到本地项目文件 vue项目目录可以参考我的本地目录位置: 二.main.js 按需引入所有主题样式 imp ...
- PPT模板简约风格范本(2019精选推荐),21套精美主题免费下载
Yama收集了一系列精美的时尚简约PPT模板,这些微软官方提共的PPT模板,还有我四处收集的优质版型,所有范本都是免费下载,可以拿来做个人简历.学术研究或商务简报使用. 模板设计本来就是一门高深的专业 ...
- vuepress博客主题—vuepress-theme-reco
这是一个vuepress主题,旨在添加博客所需的分类.TAB墙.分页.评论等能: 主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用: 效果:午后南杂 文档:vuepre ...
- 朋也社区 v5.2.0 更新,新增手机号,微信登录外加主题一套
开发四年只会写业务代码,分布式高并发都不会还做程序员? 更新内容: 新增了手机号登录 新增了微信登录 新增了一套simple主题,可在后台直接切换,无需重启 修复若干bug 优化若干体验 开源地址 ...
- vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站
VuePress 简单来说,VuePress 是 Vue 驱动的静态网站生成器.VuePress 简单易上手,同时也有足够强大的定制能力,尤其对熟悉 Vue 的前端开发人员而言.相比于知名的博客生成器 ...
- 对vuepress以及vuepress-theme-vdoing的认识
对vuepress的认识 前言 还是和昨天写vuepress-theme-vdoing使用体验一样.在边尝试VuePress +Gitee 快速搭建个人博客边写博客的过程中,引出了我对vuepress ...
最新文章
- mysql 索引 二叉树_MySQL 的索引,为什么是 B+而不是平衡二叉树
- 基于re模块的计算器
- 存储过程如何处理异常
- Coolite(二)服务器端Alert,Confirm,Prompt
- ArcGIS实验教程——实验三十六:ArcGIS Python脚本的巧妙使用
- 收藏!企业数据安全防护5条建议
- I/O----复制文本文件
- Zabbix系统端口监控状态
- 产品经理常见沟通问题
- 中基鸿业人人都要懂的投资理财常识
- PHP编写添加学生信息,添加学生信息并显示(示例代码)
- 美团O2O广告营销中的机器学习技术
- 计算机win7音量调节,如何解决Win7电脑声音小的问题?
- 服务器固态盘装系统,怎么把固态硬盘设置为系统盘
- 时域特征提取_EEG信号特征提取算法
- Cocos2dx - 缓动Action
- Server Tomcat v7.0 Server at localhost failed to start.
- 2018-12支付宝红包赚钱薅羊毛全攻略
- 阿里云服务器可以做什么?买来吃灰?
- [ 个人住房担保委托贷款(住房公积金贷款)]
热门文章
- C51_day3:入门项目电动车报警器
- vscode优美的主题
- Singularity实践教程 + Docker 转 Singularity 的避坑指南
- jQuery源码分析(二)——Sizzle
- Python蝴蝶曲线
- ubuntu22.04安装ros humble
- OpenCV UMat类 使用GPU运算
- Java窗体汽车租赁系统Java共享汽车租赁(租赁系统)
- 【深度学习系列】(二)--An overview of gradient descent optimization algorithms
- 用户标签(一):图计算实现ID_Mapping、Oneid打通数据孤岛