next主题扩展库设置

发表于

PJAX

Pjax 是一个独立的 JavaScript 模块，它使用 AJAX（XmlHttpRequest）和 pushState() 来提供快速的浏览体验。它允许你将标准网站（服务器端生成或静态网站）的用户体验完全转变，让用户感觉像是在浏览一个应用程序，特别是对于那些网络带宽较低的用户。

在你的文章中，请使用图片的绝对路径或 Hexo 的 asset_img 标签，否则在 Pjax 刷新时图片可能会加载失败。

你可以通过在 NexT 配置文件中将 pjax 的值设置为 true 来启用它。

NexT 配置文件：

1
pjax: true

Fancybox

NexT 支持 Fancybox 插件，这是一个用于显示图片、视频等的 jQuery 光箱脚本。它支持触摸操作，响应式设计，并且可以完全自定义。

你可以通过在 NexT 配置文件中将 fancybox 的值设置为 true 来启用它。

NexT 配置文件：

1
fancybox: true

Medium Zoom

Medium Zoom 是一个用于放大图片的 JavaScript 库，类似于 Medium 的图片放大效果。

你可以通过在 NexT 配置文件中将 mediumzoom 的值设置为 true 来启用它。

NexT 配置文件：

1
mediumzoom: true

不要同时启用 fancybox 和 mediumzoom。

Lazyload

Lozad.js 是一个现代的纯 JavaScript 懒加载插件。它会延迟加载长网页中的图片。在用户滚动到视口外的图片之前，这些图片不会被加载。这与图片预加载是相反的。

你可以通过在 NexT 配置文件中将 lazyload 的值设置为 true 来启用它。

NexT 配置文件：

1
lazyload: true

然后在网站根目录下运行以下命令，以确保 lazyload 可以正确启用或禁用：

1
hexo clean

Pangu Autospace

pangu.js 会在页面上所有中文字符和六角形英文数字符号之间自动插入一个空格。

你可以通过在 NexT 配置文件中将 pangu 的值设置为 true 来启用它。

NexT 配置文件：

1
pangu: true

Quicklink 是一个 JavaScript 插件，它会在浏览器空闲时预加载视口内的链接，从而加快后续页面的加载速度。Chrome、Firefox 和 Edge 都支持该插件，无需额外的 polyfill。

你可以通过在 NexT 配置文件中将 quicklink.enable 的值设置为 true 来启用它。

NexT 配置文件：

1
2
3
4
5
6
7
8
9
...
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true
...

动画效果

NexT 默认启用了动画效果，该效果由 Anime.js 和 Animate.css 支持，因此它会在加载 JavaScript 后才显示内容。

如果你需要更快的速度，可以将 motion.enable 的值设置为 false 来禁用它。

编辑 NexT 配置文件，并根据需求设置 motion 下的值。你可以在 NexT 动画效果预览 中预览所有过渡效果变体。

NexT 配置文件：

1
2
3
4
5
6
7
8
9
10
motion:
  enable: true
  async: false
  transition:
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    sidebar: fadeInUp

进度条

Pace 会自动监控你的 Ajax 请求、事件循环延迟、文档就绪状态以及页面上的元素，以决定进度条的进度。

  • pace
  • color
  • theme

你可以通过在 NexT 配置文件中将 pace.enable 的值设置为 true 来启用它。

NexT 配置文件：

1
2
pace:
  enable: true

你可以通过在 NexT 配置文件中设置 pace.color 的值来更改进度条的颜色。

NexT 配置文件：

1
2
pace:
  color: orange

Pace 包含了许多主题，供你选择。NexT 默认使用 minimal 主题（pace-theme-minimal）。你可以通过编辑 NexT 配置文件中的 pace.theme 部分来配置它。

NexT 配置文件：

1
2
pace:
  theme: minimal

Canvas Ribbon

canvas-ribbon.js 是一个在画布上绘制的网站背景丝带。

你可以通过在 NexT 配置文件中将 canvas_ribbon 的值设置为 true 来启用它。你还可以通过编辑 canvas_ribbon 部分的值来配置丝带的设置：

  • size：丝带的宽度。
  • alpha：丝带的透明度。
  • zIndex：丝带的显示层级。

NexT 配置文件：

1
2
3
4
5
canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1

江达小记