item.title
Aomori - Theme for Hexo

Hexo 是一款快速、简洁且高效的博客框架,拥有超快生成速度,支持 Markdown,一键部署和高度可扩展性。

Aomori 是基于 Hexo 一系列优势所开发出来的一款主题,主题特性如下

  • 丰富的网站样式
  • 丰富的主题配置
  • 优化图片视频播放
  • 出色的SEO优化
  • 响应式布局
  • 开源并持续更新

今天将 Aomori 的使用文档迁移到了 GitBook 上,通过简单的 Markdown 编写说明文档无论是看的人还是写的人都挺难受的,因此迁移到了新的专业文档平台,并重新梳理了分类和内容。

使用文档 中文 | English

若对文档内容有疑问和意见,欢迎评论或者 GitHub Issue 留言

Aomori 新增了评论插件 Giscus 的支持

偶然发现了这个想法不错的评论插件,利用了 GitHub Discussions 的能力,相应功能都很完善,非常推荐使用

主题使用 Giscus 的方式非常简单,前往 查看使用方式

JS通过媒介查询简单获取屏幕方向

利用了 Window.matchMedia() 方法查询屏幕旋转方向

目前为止最方便和稳定的方法,设备兼容性和浏览器兼容性也是非常好的

function handleDetectOrient() {
    const screenDirction = window.matchMedia('(orientation: landscape)');
    return screenDirction.matches ? 'landscape' : 'portrait';
}

新的页面样式来了,爱好摄影的朋友、设计师朋友们有地方可以展示自己的作品了

具体配置文档请移步至 README_CN.md

其实别的页面也有一些小更新,就不一一列举了

最近在一篇文章上看到了一个很有意思的想法,利用了 SVGFavicon 设置成 😊 Emoji

于是突发奇想将这个想法加入了 Aomori,已更新 配置文档

Canvas 图片绘制完全覆盖铺满效果

问题

最近在需求中需要将用户照片绘制成海报,遇到需要将照片以保持宽高的情况绘制在一个相框内

解决

参照 background-size: cover 的效果

缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 contain 值相反,cover 值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的 左/右 或者 上/下 部分会被裁剪。

直接上代码理解就行了。

item.title
Nuxt.js 利用 Nginx 实现同构降级策略

Nuxt.js 是很优秀的 SSR 框架之一,让我们能够使用 Vue 直接进行项目开发,并且不需要关心过多的 Node 服务端内容。

由于公司项目需要考虑到 SEO 问题,因此我选用了 Nuxt 作为底层框架。项目完成上线后,考虑到容灾和项目稳定性,虽然说已经部署了负载均衡,保险起见还是把 CSR 降级策略也搞了(避免背锅