RavelloH's Blog
LOAD COMPLETED.
LOADING
.
.
.
NeutralPress
分类:前端 - 第 1 页 | RavelloH's Blog
Topics. Themes. Paths.
分类:前端
整理 & 索引 前端 下的所有子分类及文章。
最近更新于
18 小时前
。
此分类共包含 0 个子分类,
14 篇文章。
当前正在查看 分类列表。
第 1 页,共 1 页。
正在查看第 1 - 14 篇文章。
Back / 返回上一级分类
Timepulse:现代化高颜值计时器
Timepulse:现代化高颜值计时器
2025/04/03
开发
/
前端
---
#React
#Next.js
#倒计时
#JavaScript
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
#React
#Next.js
#倒计时
#JavaScript
TimePulse 是一个具有现代化 UI 和交互的倒计时网页应用,致力于提供极佳的视觉体验。它采用玻璃态设计和流畅动画效果,支持多计时器管理、数据本地存储与云端同步、智能节假日识别以及 PWA 离线访问等功能,并开放了核心源码。
React 实现外链提示
React 实现外链提示
2025/02/11
开发
/
前端
---
#React
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
#React
React 实现的外链预览组件,旨在优化站内外部链接的交互体验。当用户将鼠标悬停在 target="_blank" 的超链接上时,该组件会弹出一个包含目标网页截图、域名及安全提示的模糊背景悬浮窗。文章详细介绍了如何利用 Canvas 分析图片亮度以实现文字颜色的自适应调整,并提供了包含网页截图功能的完整版以及仅保留背景模糊效果的轻量化 Mini 版两种实现代码。
Next.js 实现 PJAX 刷新
Next.js 实现 PJAX 刷新
2025/02/05
开发
/
前端
---
#React
#Next.js
#PJAX
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题,提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播,实现了类似 SPA 的页面局部加载与过渡动画效果,该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题,提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播,实现了类似 SPA 的页面局部加载与过渡动画效果,该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
Zustand 实现 React 全局状态管理
Zustand 实现 React 全局状态管理
2025/02/05
开发
/
前端
---
#React
#Zustand
#Hooks
#React
#Zustand
#Hooks
一种基于 Zustand 库的 React 全局状态管理方案。该方案通过封装 useBroadcast、useEvent 和 useFunction 三个自定义 Hook,分别实现了全局广播、事件管理及动态函数注册调用,有效解决了 React 组件间通信繁琐及 Context API 使用不便的问题。
#React
#Zustand
#Hooks
一种基于 Zustand 库的 React 全局状态管理方案。该方案通过封装 useBroadcast、useEvent 和 useFunction 三个自定义 Hook,分别实现了全局广播、事件管理及动态函数注册调用,有效解决了 React 组件间通信繁琐及 Context API 使用不便的问题。
React 实现图片点击放大
React 实现图片点击放大
2025/02/05
开发
/
前端
---
#React
#图片
#React
#图片
React 中实现图片点击放大效果的组件开发指南。该组件通过 useEffect 监听带有 data-zoomable 属性的图片,利用 DOM 操作(克隆节点、计算位置)配合 CSS Transform 实现平滑的位移与缩放动画,并特别处理了 React Strict Mode 下可能出现的重复触发问题,适用于博客等内容展示场景。
#React
#图片
React 中实现图片点击放大效果的组件开发指南。该组件通过 useEffect 监听带有 data-zoomable 属性的图片,利用 DOM 操作(克隆节点、计算位置)配合 CSS Transform 实现平滑的位移与缩放动画,并特别处理了 React Strict Mode 下可能出现的重复触发问题,适用于博客等内容展示场景。
我妥协了,React 与 Pjax 不可兼得
我妥协了,React 与 Pjax 不可兼得
2024/10/20
开发
/
前端
---
#React
#PJAX
#JavaScript
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突,作者最终决定放弃 Pjax,转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果,并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突,作者最终决定放弃 Pjax,转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果,并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
RThemeV3:全面升级
RThemeV3:全面升级
2023/08/15
开发
/
前端
---
#JavaScript
#node.js
#JavaScript
#node.js
一款完全重构的高性能、无依赖且采用单页应用(SPA)架构的静态博客主题。该版本在 Google PageSpeed 测试中取得满分,集成了自动化部署、全站搜索及丰富的多媒体组件,本文详细介绍了其各项特性、部署流程、模板修改方法以及高级功能的配置指南。
#JavaScript
#node.js
一款完全重构的高性能、无依赖且采用单页应用(SPA)架构的静态博客主题。该版本在 Google PageSpeed 测试中取得满分,集成了自动化部署、全站搜索及丰富的多媒体组件,本文详细介绍了其各项特性、部署流程、模板修改方法以及高级功能的配置指南。
RPageSearchV2:更快速高级的全站搜索
RPageSearchV2:更快速高级的全站搜索
2023/08/12
开发
/
前端
---
#全文搜索
#搜索引擎
#node.js
#全文搜索
#搜索引擎
#node.js
RPageSearch V2 是一个面向静态网站的高性能全站搜索解决方案。文章详细介绍了 V2 版本的更新特性,包括基于 Web Worker 的异步运算、正则表达式模糊搜索以及毫秒级的索引速度,并提供了从目录结构配置、索引数据生成到前端页面接入的完整部署指南。
#全文搜索
#搜索引擎
#node.js
RPageSearch V2 是一个面向静态网站的高性能全站搜索解决方案。文章详细介绍了 V2 版本的更新特性,包括基于 Web Worker 的异步运算、正则表达式模糊搜索以及毫秒级的索引速度,并提供了从目录结构配置、索引数据生成到前端页面接入的完整部署指南。
Virgule.js 现已发布
Virgule.js 现已发布
2022/12/26
开发
/
前端
---
#JavaScript
#JavaScript
Virgule.js 是一个轻量级的 JavaScript 打字机特效库,由作者对博客首页原有特效重构而成。该项目将代码量从 530 行压缩至 370 行,新增了跳过空格、自定义速度及快捷引用目标等功能,并通过“斜杠覆盖-随机字符-目标文字”的三阶段逻辑实现优雅的文本过渡动画,现已开源并支持简单的函数调用。
#JavaScript
Virgule.js 是一个轻量级的 JavaScript 打字机特效库,由作者对博客首页原有特效重构而成。该项目将代码量从 530 行压缩至 370 行,新增了跳过空格、自定义速度及快捷引用目标等功能,并通过“斜杠覆盖-随机字符-目标文字”的三阶段逻辑实现优雅的文本过渡动画,现已开源并支持简单的函数调用。
静态站实现全站搜索
静态站实现全站搜索
2022/08/25
开发
/
前端
---
#全文搜索
#搜索引擎
#JavaScript
#Python
#全文搜索
#搜索引擎
#JavaScript
#Python
静态网站全站搜索功能的纯前端实现方案。作者通过 Python 脚本遍历站点 HTML 文件,提取标题、时间及正文内容生成 JSON 格式的索引文件,并配合前端 JavaScript 代码读取该索引,在客户端本地完成关键词检索、结果按相关度排序以及内容高亮显示,从而在不依赖后端数据库的情况下实现全站搜索。
#全文搜索
#搜索引擎
#JavaScript
#Python
静态网站全站搜索功能的纯前端实现方案。作者通过 Python 脚本遍历站点 HTML 文件,提取标题、时间及正文内容生成 JSON 格式的索引文件,并配合前端 JavaScript 代码读取该索引,在客户端本地完成关键词检索、结果按相关度排序以及内容高亮显示,从而在不依赖后端数据库的情况下实现全站搜索。
论静态页中伪动态的实现
论静态页中伪动态的实现
2022/07/08
开发
/
前端
---
#JavaScript
#Python
#JavaScript
#Python
伪动态是指在不改变静态站点本质的前提下,通过客户端脚本或自动化构建工具实现部分动态交互功能的技术。 文章以 GitHub Pages 为例,详细介绍了两种实现方法:一是利用 JavaScript 的 window.location 对象识别 URL 参数(如 ?text=value)来根据用户输入渲染不同内容;二是利用 GitHub Actions 配置定时任务或触发器,运行 Python 爬虫抓取数据并自动构建、提交页面更新,从而在无后端服务器的情况下实现内容的自动更迭与个性化展示。
#JavaScript
#Python
伪动态是指在不改变静态站点本质的前提下,通过客户端脚本或自动化构建工具实现部分动态交互功能的技术。 文章以 GitHub Pages 为例,详细介绍了两种实现方法:一是利用 JavaScript 的 window.location 对象识别 URL 参数(如 ?text=value)来根据用户输入渲染不同内容;二是利用 GitHub Actions 配置定时任务或触发器,运行 Python 爬虫抓取数据并自动构建、提交页面更新,从而在无后端服务器的情况下实现内容的自动更迭与个性化展示。
JS递归遍历伪数组
JS递归遍历伪数组
2022/02/06
开发
/
前端
---
#JavaScript
#JavaScript
JavaScript 遍历 getElementsByTagName 获取的伪数组的教程。阐述了如何处理 getElementsByTagName 返回的 HTMLCollection 集合,通过 for 循环逐项操作 DOM 元素,解决直接修改集合属性无效的问题,并提供了一个批量为 span 标签添加 CSS 动画特效的实际应用案例。
#JavaScript
JavaScript 遍历 getElementsByTagName 获取的伪数组的教程。阐述了如何处理 getElementsByTagName 返回的 HTMLCollection 集合,通过 for 循环逐项操作 DOM 元素,解决直接修改集合属性无效的问题,并提供了一个批量为 span 标签添加 CSS 动画特效的实际应用案例。
CSS+JS实现页面切换过渡
CSS+JS实现页面切换过渡
2021/07/18
开发
/
前端
---
#JavaScript
#css
#JavaScript
#css
使用 CSS 和 JavaScript 实现博客页面切换过渡效果的教程。主要介绍如何通过 CSS Keyframes 动画实现内容区域从屏幕左侧的飞入与飞出,并利用 JavaScript 的 window.onbeforeunload 事件监听离开动作以触发动画,同时使用 animation-fill-mode: forwards 属性解决网络延迟可能导致的动画状态重置问题。
#JavaScript
#css
使用 CSS 和 JavaScript 实现博客页面切换过渡效果的教程。主要介绍如何通过 CSS Keyframes 动画实现内容区域从屏幕左侧的飞入与飞出,并利用 JavaScript 的 window.onbeforeunload 事件监听离开动作以触发动画,同时使用 animation-fill-mode: forwards 属性解决网络延迟可能导致的动画状态重置问题。
RTheme v1 上线
RTheme v1 上线
2021/07/01
开发
/
前端
---
RTheme v1 个人博客主题的发布记录。作者为了替代原有的 Hexo 主题,自主开发了这款虽简陋但易于维护的新主题,并将项目源码上传至 GitHub。
RTheme v1 个人博客主题的发布记录。作者为了替代原有的 Hexo 主题,自主开发了这款虽简陋但易于维护的新主题,并将项目源码上传至 GitHub。
-
-
-
-
1
-
-
-
-
-