正篇 首先找到“主题目录\anzhiyu\layout\includes\page\essay.pug” - .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;` : "")+ if i.top_background &a ...

不清楚怎么用的可以看上一篇 Kouseki 式首页背景图渐进式加载・改 这次直接提供JS (function() { class ProgressiveLoad { constructor(smallSrc, largeSrc) { this.smallSrc = smallSrc; this.largeSrc = largeSrc; this.initTpl(); this.container.addEventListener('animationend', () => { this.smallStage.style.display = 'none'; }, {once: true}); } initTpl() { this.container = document.createElement('div'); this.sm ...

原教程 前言(小旦(原作者)) 内容从简，修BUG的事，我就只在原文说明上少量修改，并把代码换了 9月26日：发现刷新网页不加载的问题 来自懒加载对应项未修改 9月27日：发现再次进入首页时，ProgressiveLoad类重复声明 避免重复定义，在定义ProgressiveLoad类前加判断(9月30日改动后废弃) 9月28日：发现跨页返回首页时，会重复创建ProgressiveLoad类并调用 新增每次加载前先清除已有的.pl-container元素 一图流有人想抄 9月29日：首页图下方的有个奇怪的边界的情况，其中一个原因是模糊的小图藏在后面 新增监听动画移除小图元素 另一个原因是夜间阅读模式，给出解决方案 9月30日：Safari浏览器缓存机制导致之前ProgressiveLoad类前加判断时无法显示首页图 使用立即执行函数表达式，给ProgressiveLoad创建一个单独作用域 样式预览 原理是先加载小图文件并进行高斯模糊处理，在大图加载完成后再对大图进行加载。 操作步骤 效果二选一 选择仅渐变式加载或渐变式一图流其中一种效果 仅渐变式加载是Kouseki的教程版 ...

原教程 更直观的预览效果可前往博客主页预览 实现效果以及原理 修改 index_img 相关 pug 自定义 top /cover no-repeat 默认为 top 。这部分如需不同效果可自行修改 /static/index_media.css 的 home-media-container 或 home-media 元素 修改主题配置文件下的 index_img 增加 path 和 vpath，横屏壁纸路径为 path，竖屏壁纸路径为 vpath, 该功能实现横竖屏设备不同时加载不同横竖屏自定义壁纸，如无需区分可 path 与 vpath 这路径填同一个即可 增加主题配置文件下 index_video, 其中 path 与 vpath 与 index_img 的填写方法类似，但增加多 poster 与 vposter 选项，这两个选项为视频未加载出来时的加载 GIF 动画，可自定义为 GIF 加载条或者趣味表情包加载，效果如下 path 与 vpath 填对时，横屏与竖屏效果分别如下 鼠标出现时壁纸或视频壁纸放大到 105% 并跟随鼠标动态放大的效果 首次加载主页动态壁纸或壁纸 ...

预览效果 主题配置文件文件修改 添加css 在主题配置文件里找到 inject的 head，添加一行link，如下 - <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> # loading用的fontawesome图标 备份链接： https://cdn.jsdelivr.net/gh/kingkare/owo/css/all.css 建立新的pug文件 在 themes\anzhiyu\layout\includes\loading\里，新建文件 clickenter.pug，内容如下 #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') #loading-box-me #wrapper #mouse ...

安知鱼主题侧边个人卡片美化：切换图片背景 本教程基于安知鱼（AnZhiYu）主题，介绍如何通过 CSS 美化侧边栏个人信息卡片，实现自定义背景图切换的效果。 一、创建 custom.css 文件 进入博客根目录。 检查 source/css 文件夹是否存在（推荐在 source 目录下操作，Hexo 生成时会自动同步到 public）。如果不存在，请新建一个 css 文件夹。 在 css 文件夹内新建文件，命名为 custom.css。 最终源文件路径：source/css/custom.css 生成后路径：public/css/custom.css 二、添加代码至 custom.css 在 custom.css 文件中添加以下代码： /* 侧边栏头像卡片背景 */#aside-content > .card-widget.card-info::before { background: url('自定义图片路径'); border: 0; position: absolute; background-size: 100% 100%; ...

修改方法 主题文件修改 打开 themes\anzhiyu\layout\includes\top\top.pug 文件 将原本代码修改为 ` - let home_top_config = theme.home_top- let { title, subTitle, siteText,default_descr } = home_top_configif home_top_config.enable #home_top .swiper_container_card(style='height: auto;width: 100%') #bannerGroup #random-banner if theme.peoplecanvas.enable canvas#peoplecanvas else .banners-title .banners-title-big=title .bann ...

原版博客 LiuShen表情包收集 Hexo配置SWPP实现PWA 耗子面板和DPanel简单体验 琅環书生 云游的小项目 人潮汹涌模块修改 从Moments迁移到Ech0 仿 Heo 部分元素添加卡片式信息外框 搭建小空调页面 自定义加载动画魔改方案 安知鱼主题魔改之 index_img 兼容视频展示 开发者必备：高质量随机图 API 汇总与使用指南 告别固定背景：搭建动态随机图接口 以下为待折腾 https://oplog.cn/qexo/exts/talks.html Qexo说说前端页面美化 郭乐 https://github.com/MSCMDD/Qexo-Talks 外挂标签 站内地址 外挂标签 https://akilar.top/posts/615e2dec/ 站内地址 ...