好好总结一下这次网站的大更新.
caution注意:此篇文章年代过于久远,已不再具有时效性,保留仅供参考。
以下标题,方括号内的字符对应所述页面的 CNAME 解析值,例如,[Blog]
对应页面为 blog.xecades.xyz
,特别地,[Home]
对应页面为 xecades.xyz
. 若无方括号,默认为对多个页面生效.
每项更新后标注的链接为参考链接.
[Blog] 更换 Cards 主题
为了追求极致的访问速度,将 hexo 博客由 NexT 主题切换至 Cards 主题.
NexT 主题自带的样式远多于 Cards 主题,所以我将 NexT 主题中我喜欢的模块移植到 Cards 中,并对 Cards 的 CSS 样式自定义美化.
⚐ 参见:
[Blog] 支持 PWA 网页应用
如图:
添加 manifest
和 service worker
.
现支持大部分浏览器将网页作为应用安装(该技术称为 PWA),可以达到更好的沉浸式浏览体验,以及更快的访问速度.
⚐ 参见:
[Blog] 支持 Service Worker 缓存
现支持博客内容的离线浏览(当然评论除外).
加速博客访问.
采用 hexo-service-worker
插件,自动生成 sw.js
作 Service Worker.
⚐ 参见:
[Blog] Instant Click 优化体验
采用 Instant Click 库,加速博客内链接跳转的体验.
当用户鼠标移上内链时,自动开始加载链接对应页面,可以节约 200 到 300 毫秒的时间(别小看这点时间).
此功能尚有漏洞,自动加载的页面的代码高亮会消失(个人认为无伤大雅).
⚐ 参见:
[Blog] 使用 twikoo 评论系统
之前采用的 leancloud 没过几天就提醒超限使用了,贫苦学生没有钱……
所以换成 twikoo 了,感觉它比 valine 好用点.
输入框背景图目前只提供了 webp 格式,故部分 Safari 浏览器无法加载.
如图:
⚐ 参见:
[Blog] 文章图片 webp 支持
目前,文章的 png、jpg、jpeg 后缀的图片都有对应的 webp 后缀资源.
webp 格式图片是 google 开发的,相较于同样显示效果的 png 和 jpg,webp 图片的大小约为 60%. 采用 webp,可以大幅减少页面加载速度.
缺点在于,Safari 和 IE 浏览器尚不支持 webp 格式,因此我保留了原图,在用户访问时根据用户浏览器对 webp 的支持性来选择是否显示 webp 图片.
为了防止误加载 png、jpg、jpeg 格式图片,我使用一段 hexo 代码将所有文章内的 <img>
标签的 src
改成 fakesrc
,然后将链接添加后缀 .picSuffix
。待用户加载时运行 js,先将所有后缀 .picSuffix
改成 .webp
或删除,然后再将所有 fakesrc
替换成 src
.
博客中的 webp 图片由一段 gulp 脚本生成,采用库 gulp-webp
.
⚐ 参见:
[Blog] 文章 Thumbnail
我会在合适的文章添加合适的配图.
绘图工具:MSPaint、Tikz.
⚐ 参见文章:
[Home] 重构主页
如图:
更加简洁新颖,更加轻量.
这是个单页富应用程序(SPA),采用 vue-router 技术使得页面支持无刷新加载,在特殊页面间切换不会卡顿.
该技术原理是使用 History 的 API:
1 | history.replaceState(...); |
使得更改地址栏显示而不刷新,下个页面内容由 vue 填写.
⚐ 参见:
原地址重定向
或许你已经注意到了,我的新 lab
、friend
、about
页移动了位置,现在它们都属于 xecades.xyz
的子页面.
为了使得之前的链接仍然可用,我使用页面跳转的方法.
由于域名魏备案无法添加解析跳转,所以我在 lab.xecades.xyz
等网站的 404 页面加入如下 js 代码:
1 | const direct = "xecades.xyz/lab"; |
这样,之前的链接都可以正常使用.
⚐ 参见示例:
[TIY] 内容记忆功能
使用浏览器 localStorage
API,支持缓存之前编辑的内容.(只要不清除浏览器缓存,它就可以当记事本用……)
⚐ 参见:
[Status] 网站监控系统
使用 Uptime Robot,实时检测各网站是否正常运行.
⚐ 参见:
全站部署 Vercel
全部页面都部署在 Github + Vercel 上,放弃 难用 仍需改进的 Coding.
(偷偷告诉你:还是有些留在了 Coding 懒得搬了)
⚐ 参见:
[Blog] 评论表情 CDN 加速
评论的表情 fork 自一开源 Github 仓库,采用 JsDelivr 的 CDN 加速.
⚐ 参见:
更换 Favicon
更换到一个更加简洁美观的 favicon(我说这是我画的你信不信?).
黑白模式:
白天模式:
夜晚模式:
Copyright ©2021 Xecades
目前只在 favicon 应用了黑白模式.
还有些许更改不便于公开.
欢迎参观我的 Github 主页:
Xecades本文作者:Xecades
本文链接:https://blog.xecades.xyz/drafts/summary.html
文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。
评论