hexo的Matery主题优化(二)
特效:1、页面加载动画 loading 2、看板娘(卡通人物)
个人博客作为效果参考:https://yunfulin.gitee.io/
直达链接: link
1、页面加载动画 loading
1、创建 loading.ejs
在 themes\hexo-theme-matery\layout\_widget
下,新建一个文件 loading.ejs
<% if (theme.preloader.enable) { %><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><!-- 页面加载动画 --><script>$(document).ready(function () {document.body.style.overflow = 'auto';document.getElementById('loading-box').classList.add("loaded")})</script>
<% } %>
2、CSS代码
在**themes\hexo-theme-matery\source\css
** 下,新建一个文件 loading.css
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {position: fixed;z-index: 1000;width: 50%;height: 100%;background-color: #37474f;transition: all 0.5s;
}#loading-box .loading-right-bg {right: 0;
}#loading-box>.spinner-box {position: fixed;z-index: 1001;display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;
}#loading-box .spinner-box .configure-border-1 {position: absolute;padding: 3px;width: 115px;height: 115px;background: #ffab91;animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}#loading-box .spinner-box .configure-border-2 {left: -115px;padding: 3px;width: 115px;height: 115px;background: rgb(63, 249, 220);transform: rotate(45deg);animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}#loading-box .spinner-box .loading-word {position: absolute;color: #ffffff;font-size: 0.8rem;
}#loading-box .spinner-box .configure-core {width: 100%;height: 100%;background-color: #37474f;
}div.loaded div.loading-left-bg {transform: translate(-100%, 0);
}div.loaded div.loading-right-bg {transform: translate(100%, 0);
}div.loaded div.spinner-box {display: none !important;
}@keyframes configure-clockwise {0% {transform: rotate(0);}25% {transform: rotate(90deg);}50% {transform: rotate(180deg);}75% {transform: rotate(270deg);}100% {transform: rotate(360deg);}
}@keyframes configure-xclockwise {0% {transform: rotate(45deg);}25% {transform: rotate(-45deg);}50% {transform: rotate(-135deg);}75% {transform: rotate(-225deg);}100% {transform: rotate(-315deg);}
}
3、编辑配置文件
在主题的配置文件 themes\hexo-theme-matery\_config.yml
,末尾加入
# 是否开启页面加载动画
preloader:enable: true
4、引入文件
在文件 themes\hexo-theme-matery\layout\_partial\head.ejs
的 <head>
标签里面 引入 loading.css
文件
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/loading.css') %>">
在文件 themes\hexo-theme-matery\layout\layout.ejs
的 body
标签第一行
引入
<%- partial('_widget/loading') %>
以上加载动画就大功告成啦!
2、看板娘(卡通人物)
1、安装模块
yarn add hexo-helper-live2d // 这个是必须的
yarn add live2d-widget-model-nico // 安装自己喜欢的模型,这个可以更换
2、配置
在根目录的 _config.yml
,底部添加
# live2d
# https://github.com/EYHN/hexo-helper-live2d
live2d:enable: true # 是否启用看板娘scriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径),自动生成pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径# scriptFrom: jsdelivr # jsdelivr CDN# scriptFrom: unpkg # unpkg CDN# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 urltagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中,具体见项目github描述debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-nico # live2d模型的名字scale: 1hHeadPos: 0.5vHeadPos: 0.618display:superSample: 2width: 200height: 400position: right # 左侧还是右侧hOffset: 100vOffset: -15 # 距底部距离mobile:show: false # 手机端是否可见scale: 0.5react:opacityDefault: 0.7opacityOnHover: 0.2
就是这么简单!
hexo的Matery主题优化(二)相关推荐
- hexo的Matery主题优化(三)
个人博客作为效果参考:https://yunfulin.gitee.io/contact/ 直达链接: link 效果图: 一.Matery评论功能之(Valine) 1.创建应用 LeanCloud ...
- hexo的Matery主题优化(一)
特效:1.首页轮播冒泡 2.鼠标点击弹出文字 3.鼠标移动特效 4.动态标签栏 个人博客作为效果参考:https://yunfulin.gitee.io/ 直达链接: link 1.首页轮播冒泡 1. ...
- 基于Hexo的matery主题搭建博客并深度优化
本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
- hexo中matery主题的个性化定制
前言 上一篇讲了使用hexo初步搭建了一个个人博客,接下来说一下如何使用matery主题以及如何根据自己的想法进行个性化定制,效果展示金哥哥的个人博客.我会把我踩过的坑以及解决方法一一说明.基础的可以 ...
- Hexo系列matery主题踩坑优化记录
文章目录 下载 配置 添加 ArtiTalk 说说界面 总结 下载 下载主题 git clone https://github.com/blinkfox/hexo-theme-matery.git 配 ...
- 搭建 Hexo 个人博客和 Matery 主题的配置优化
文章目录 Hexo 的安装 安装 Git 安装 Node.js 升级 Node.js 版本 安装 Hexo 升级 Hexo 版本 初始化 Hexo 启动 Hexo 服务 Hexo 部署到 GitHub ...
- hexo博客搭建及主题优化(一)
个人博客 个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客 介 ...
- hexo博客matery主题的个性化配置
文章目录 一.matery主题的下载与安装 二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...
- Hexo博客主题安装和优化(一)
当你看到这篇文章的时候,想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面,如果还没有的话呢,请移步去Hexo+github搭建博客! 因为默认的Hexo主题实在太难看了,所以我们 ...
最新文章
- java jar 是什么文件_jar文件怎么打开?jar文件是什么?
- 18春《c语言》在线作业3,18春福师《C++语言程序设计》在线作业二【参考答案】...
- 实验九——基本数据类型存储及应用总结
- 2018届应届生android面试总结
- 1.8-samba 部署和优化-2
- 【原】关于AdaBoost的一些再思考
- Linux下查看软件安装路径(whereis)
- Java高并发编程详解系列-Balking设计模式
- swagger OAuth认证
- SpringBoot应用部署[转]
- 献给自己技术成长的第一年
- 完全相同的4个小矩形如图所示放置_使用全站仪测量的小知识,全是干货!
- java图片转换pdf_Java将图片转化为PDF的方法(1)
- CSS边框border属性
- 太可怕了!有些码农为啥写代码,写到监狱里去了?
- ChatGPT有多厉害,影响到谷歌地位?
- 长差分:LongDifference及AcemogluAER论文推介
- SOLIDWORKS 切割清单默认模板、内容丢失问题
- SpringBoot入门到精通 idea教学 (余胜军通俗易懂版本)
- 通达OA:2015年注定是不平凡的一年
热门文章
- 关于ComponentName的使用
- 错过了竟是一生的遺憾
- slambook2(ch11)—— Ubuntu18.04安装DBoW3 + 例程演示
- html 原生滚动条详解,看这一篇就够了!
- uni-app textarea解决点击软键盘上自带收起按钮输入框没有取消焦点的问题(监听软键盘自带收起按钮)
- 疫情期间,感受互联网带来的红利——让自己走在世界前沿
- QT Dialog pushbutton 取消焦点
- 为什么云计算必须变“硬”?
- 有些人,有些事,一转身就是一辈子
- HTC VIVE丨12. VRTK抓取机制——(VR交互机制2-Grab)