avatar

吱托邦

面包会有的，牛奶也会有的，一切都会有的

0%

首页 > 观察 > 正文

hexo博客next主题调整过渡动画快慢

作者 吱托邦 发表于 更新于 分类于 评论数： 639

hexo博客的next主题的配置是非常丰富的，本人使用的是next主题的7.x版本。并且在next主题的_config.yml文件中的motion区域打开了动画功能。此时，每次进入页面或者刷新页面，都会呈现出一定的动画效果。这样让博客整体显得更有活力一些。不过很多人会觉得默认的动画效果太慢了，每次刷新之后感觉总要等待那么一小会儿。因此想要自己调整next主题全局动画效果的快慢。下面我们来研究一下怎么方便的调整动画快慢。

1.首先你要确保在你的主题的_config.yml文件中的motion板块打开动画功能，下面的动画效果可以自行选择。
hexo博客next主题调整动画效果快慢

2.然后在hexo博客文件夹的\themes\next\source\js文件夹中找到motion.js文件。这个motion.js文件中全部都是next主题自带的控制页面动画效果的内容。如果是比较熟悉前端开发的童鞋应该就会发现里面有很多duration属性，这些duration属性后面的数字就是每个动画持续的时间，单位是毫秒。
hexo博客next主题调整动画效果快慢
我是把所有duration后面的值都减半了，比如200变成100，500变成250。然后hexo clean&hexo g之后，刷新了一下页面，感觉这个动画的速度就比较合适了，不快不慢挺舒服。

在此并不建议单独修改duration后面的值到某个数值，因为可能会导致整体动画效果比较怪异，让人不太舒服，除非你有很多的时间去微调整个的动画效果。所以，将所有duration同时增减一定的比例绝对是比较合适的方案。

文章标题：hexo博客next主题调整过渡动画快慢
文章链接：https://www.lovebykin.com/1345915333/
版权声明：若无特殊标注，文章皆由吱托邦原创，转载请注明出处。
赞赏文章：如果文章有帮助，可以通过下方赞赏码对吱托邦进行鼓励。

可能喜欢

  • HEXO博客NEXT主题美化所有分类页样式

    hexo博客的next主题基本是使用最广泛的主题之一，它简洁的界面以及丰富的内置插件集成，吸引了很大一部分使用hexo搭建博客的用户。不过，有时候next主题的页面样式过于朴素简洁也并非全是好事，想要部分页面更加炫酷一些，就要我们自己动手撸代码了。今天教大家如何让next主题的所有分类显示页面稍微好看一些。

  • SEO大佬三个月将网站权重从1提升到4的经验分享

    最近在研究吱托邦的SEO和收录问题，感觉非常力不从心；偶然在网络上遇到一位SEO大神，讲诉他如何在三个月时间内，将一个网站的权重从1提高到4的过程所总结的经验，感觉受益匪浅。因此将他总结的网站优化经验，以及他对SEO的理解分享在此。

  • VUE实现多层级菜单列表动态递归渲染

    最近项目有一个需求：根据用户角色权限，前端通过接口从后台动态获取到该用户的多层级菜单内容并在前端的侧边栏显示。这里需要注意的是，该菜单的层级可以是无限的，并没有从需求层面限制菜单只能是两级或者三级。我们项目使用的是vue+elementui，vue作为一个先进的现代化框架，特色就是数据绑定，我们来看一下如何使用vue框架来通过递归的方式来动态渲染无限层级的菜单列表，这是更优雅的方式！

  • hexo中两个source文件夹的区别

    起因首先说明一下，这里所指的hexo中两个source文件夹，一个是hexo根目录中自带的，一个是安装的主题的文件夹中的，比如对于next主题，路径就是theme/next/source。起初，根据我的这篇nginx+next添加404页面方法的文章的步骤，我完美实现了hexo访问不存在页面时跳转到自定义的404页面功能。根据当时的步骤，我是把自己新建的404.html文件放入到了next主题的source文件夹中，然后执行hexo clean和hexo g指令，此时访问一个不存在的页面，就会跳转到我自定义的这个404.html页面中，页面中内容是腾讯公益。但是众所周知，不管是hexo的source文件夹，还是主题中的source文件夹，我们在对hexo博客进行编译生成的时候，都会自动将这两个source文件夹中的所有内容传送到hexo的public文件夹中的。所以按理来说，我不管是把404.html放到hexo的source还是主题的source文件夹中，最终的实现效果应该都是一样的啊！！！然而现实并不是，根据实践我发现，把404.html放到hexo根目录的source中时，如果我打开一个不存在的页面，就会闪现出hexo博客的页面然后再进入到404页面中，而且布局也乱了。如果把404.html放到next主题的source文件夹中，那么我访问一个不存在的页面时，就会直接跳转到404.html页面，根本没有闪现出hexo网页。一开始真是让我百思不得其解，毕竟hexo只是静态博客啊。

  • nginx+hexo添加404页面的优雅方式

    先说句题外话，我的hexo网站使用的是next主题，整个hexo是存放在我购买的xx云的轻量应用服务器中，轻量应用服务器安装的是windows系统，之所以没有安装linux系统镜像，主要是因为windows系统的云服务器是有界面的，就和我们平时用的windows系统的电脑一模一样，这样一来进行各种操作就方便得多。然后我是通过nginx作为http服务器对hexo生成的public文件夹中的静态文件进行映射。但是目前存在一个问题，只要我通过浏览器访问hexo中不存在的页面时，就会自动跳转到个人网站的首页了。根本无法跳转到404页面中。因此我们现在要想办法添加跳转404页面的功能。于是在网上参考了很多其他网友写的教程，我的评价是：互相复制粘贴，都是无效代码。所以还是自己动手研究一下吧。

  • nvm（nodejs版本管理工具）导致node运行速度变慢

    最近因为项目需要，在云服务器上安装了一个nvm，nvm是一个nodejs版本管理工具，安装nvm之后可以更轻松地使用命令行指令来安装不同版本的nodejs到同一台机器，还能轻松地管理和切换不同的nodejs版本，其实用起来挺方便的。但是今天突然发现，云服务器安装的nvm之后，nodejs的运行速度似乎受到了影响，明显要变得慢一些，挺奇怪的，最终卸载了nvm，并重新下载安装了nodejs某个版本。