网站更新

好好总结一下这次网站的大更新.

caution

注意:此篇文章年代过于久远,已不再具有时效性,保留仅供参考。

以下标题,方括号内的字符对应所述页面的 CNAME 解析值,例如,[Blog] 对应页面为 blog.xecades.xyz,特别地,[Home] 对应页面为 xecades.xyz. 若无方括号,默认为对多个页面生效.

每项更新后标注的链接为参考链接.


[Blog] 更换 Cards 主题

为了追求极致的访问速度,将 hexo 博客由 NexT 主题切换至 Cards 主题.

NexT 主题自带的样式远多于 Cards 主题,所以我将 NexT 主题中我喜欢的模块移植到 Cards 中,并对 Cards 的 CSS 样式自定义美化.

⚐ 参见


[Blog] 支持 PWA 网页应用

如图:

添加 manifestservice 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 填写.

⚐ 参见


原地址重定向

或许你已经注意到了,我的新 labfriendabout 页移动了位置,现在它们都属于 xecades.xyz 的子页面.

为了使得之前的链接仍然可用,我使用页面跳转的方法.

由于域名魏备案无法添加解析跳转,所以我在 lab.xecades.xyz 等网站的 404 页面加入如下 js 代码:

1
2
const direct = "xecades.xyz/lab";
window.location = window.location.href.replace(window.location.host, direct);

这样,之前的链接都可以正常使用.

⚐ 参见示例


[TIY] 内容记忆功能

使用浏览器 localStorage API,支持缓存之前编辑的内容.(只要不清除浏览器缓存,它就可以当记事本用……)

⚐ 参见


[Status] 网站监控系统

使用 Uptime Robot,实时检测各网站是否正常运行.

⚐ 参见


全站部署 Vercel

全部页面都部署在 Github + Vercel 上,放弃 难用 仍需改进的 Coding.

(偷偷告诉你:还是有些留在了 Coding 懒得搬了)

⚐ 参见


[Blog] 评论表情 CDN 加速

评论的表情 fork 自一开源 Github 仓库,采用 JsDelivr 的 CDN 加速.

⚐ 参见


更换 Favicon

更换到一个更加简洁美观的 favicon(我说这是我画的你信不信?).

黑白模式:

白天模式:

夜晚模式:

Copyright ©2021 Xecades

目前只在 favicon 应用了黑白模式.


还有些许更改不便于公开.

欢迎参观我的 Github 主页:

Xecadeshttps://github.com/Xecades

本文作者:Xecades

本文链接:https://blog.xecades.xyz/drafts/summary.html

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

评论