item.title
Aomori

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

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

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

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 降级策略也搞了(避免背锅

Aomori - DisqusJS

Aomori 引入了 DisqusJS,用于解决中国大陆对 Disqus 的访问限制。

官方介绍

使用 Disqus API 获取到的数据渲染评论列表,搭配 Disqus API 的反代可以实现在网络审查地区加载 Disqus 评论列表;支持自动检测访客的 Disqus 可用性自动选择加载原生 Disqus(评论完整模式)和 DisqusJS 提供的评论基础模式。

使用方式

参照官方配置说明即可

aomori_disqusjs:
  enable: true
  shortname: ""
  siteName: ""
  api: ""
  apikey: ""
  nesting: 4
  nocomment: "这里冷冷清清的,一条评论都没有"
  admin: ""
  adminLabel: ""

注意,以上配置是 Aomori 现在支持的配置,部分选配配置暂时不支持自定义。


题外话,我的博客使用 Disqus 也一段时间了,下一步我可能会弃用 Disqus,选择别的评论框架了,Disqus 的大陆访问问题没办法忽视,即使有 DisqusJS 这样优秀的解决办法,但是我个人还是觉得体验还是差强人意。