前言 说明一切从简 本篇拿essay界面举例,自己举一反三 正篇 首先找到“主题目录\anzhiyu\layout\includes\page\essay.pug” 修改如下 12345- .author-content.author-content-item.essayPage.single(style = i.top_background ? `background: url(${i.top_background}) left 28% / cover no-repeat;` : "")+ .author-content.author-content-item.essayPage.single(style = i.top_background && !i.top_background.endsWith('.mp4') ? `background: url(${i.top_background}) left 28% / cover no-repeat;` : &quo ...
前言这个前言我一上来就说不下去了,直接上流程 更新改动 11月11日:因为一直监听pjax会报错,我就改回去了,重新定位了最后一个动画的位置 11月12日:增加不同情况的结束加载事件,避免loaded添加不上,这下应该没问题了吧? 预览效果 ClickEnter 预览效果 主题配置文件文件修改添加css在主题配置文件里找到inject的head,添加一行link,如下 123inject: head: - <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> # loading用的fontawesome图标 建立新的pug文件在themes\anzhiyu\layout\includes\loading\里,新建文件clickenter.pug,内容如下 1234567891011121 ...
不清楚怎么用的可以看上一篇 Kouseki式首页背景图渐进式加载 · 改 这次直接提供JS123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124(function() { class ProgressiveLoad { constructor(smallSrc, largeSrc) { this.smallSrc = smallSrc; this.largeSrc = largeSrc; this.initTpl(); this.contain ...
方案一、通过宽度控制代码如下 1234/* 隐藏滚动条样式 */::-webkit-scrollbar { width: var(--scrollbar-width, 0px);} 12345678910111213141516171819let scrollTimeout;window.addEventListener('DOMContentLoaded', () => { hideScrollbar();});window.addEventListener('scroll', () => { showScrollbar(); clearTimeout(scrollTimeout); scrollTimeout = setTimeout(hideScrollbar, 1500);});function hideScrollbar() { document.documentElement.style.setProperty('--scroll ...
前言(小旦) 内容从简,修BUG的事,我就只在原文说明上少量修改,并把代码换了 9月26日:发现刷新网页不加载的问题 来自懒加载对应项未修改 9月27日:发现再次进入首页时,ProgressiveLoad类重复声明 避免重复定义,在定义ProgressiveLoad类前加判断(9月30日改动后废弃) 9月28日:发现跨页返回首页时,会重复创建ProgressiveLoad类并调用 新增每次加载前先清除已有的.pl-container元素 一图流有人想抄 9月29日:首页图下方的有个奇怪的边界的情况,其中一个原因是模糊的小图藏在后面 新增监听动画移除小图元素 另一个原因是夜间阅读模式,给出解决方案 9月30日:Safari浏览器缓存机制导致之前ProgressiveLoad类前加判断时无法显示首页图 使用立即执行函数表达式,给ProgressiveLoad创建一个单独作用域 样式预览 渐进式加载预览效果 原理是先加载小图文件并进行高斯模糊处理, ...
修复记录 【2024-8-22 19:21:53】修复了在谷歌邮箱中不正确显示的问题(删除了不兼容的position、justify-content、flex-wrap、align-items、top、flex-direction) 【2024-8-22 23:17:46】修复了图片显示大小,但在markdown图片插入跟在markdown代码块后面会大小失控,以及手机端markdown代码块无法调整宽度超出画面(无能为力),其余文本自动换行 先上效果 MAIL_TEMPLATE预览效果 MAIL_TEMPLATE_ADMIN模板预览效果 MAIL_TEMPLATE模板代码已经分享到了CodePen 将代码压缩(例如minify),然后进到twikoo后台-配置管理-邮件通知 在MAIL_TEMPLATE一项填入压缩后的代码 代码如下 123456 ...
欢迎,我是小旦 这是我博客的第一篇文章 今天用Github Page搭建了一个基于Hexo的静态博客 比起之前在NAS用Docker搭建Halo,这边看起来好很多,就是还要学一些新知识 界面美化、页面修改这些,我看看怎么折腾 更新日志迁移到了本站日志界面
AnZhiYu主题中大部分标签移植于店长的hexo-butterfly-tag-plugins-plus,转载请注明来自安知鱼 段落文本 p标签语法配置参数样式预览示例源码1{% p 样式参数(参数以空格划分), 文本内容 %} 字体: logo, code 颜色: red,yellow,green,cyan,blue,gray 大小: small, h4, h3, h2, h1, large, huge, ultra 对齐方向: left, center, right 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。Volantis A Wonderful Theme for Hexo 123456- 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %} ...