前端
未读
使用 GSAP ScrollTrigger 创建滚动驱动动画
GSAP是一个高性能的JavaScript动画库,ScrollTrigger是其插件,用于实现动画与页面滚动的同步。文章以一个示例为基础,展示了如何从零开始使用ScrollTrigger,核心功能包括:触发点(如元素或位置)定义动画开始与结束、滚动同步(scrub)控制动画进度、固定元素(pin)保持不动,以及使用onUpdate回调动态调整动画。参数如start和end指定触发范围,progress监控滚动进度。文章还介绍如何使动画提前结束并启用调试标记(markers)以优化用户体验。最终,ScrollTrigger的核心要素包括trigger启动元素、start/end定义动画窗口、scrub同步滚动、pin固定内容和progress监控。
前端
未读
CSS 绘制中间透明的圆形
这段代码是一个简单的HTML/CSS示例,用于实现一个中心对齐的圆形元素布局。HTML部分包含一个外层div(.area1)和一个内层圆形div(.circle),CSS代码使用flex布局将圆形元素水平居中,并通过box-shadow属性创建内阴影效果,模拟出圆形边框和填充外观。展示效果中,圆形尺寸固定为140px x 140px,圆形度为50%,并可通过箱影调整颜色或样式。
环境搭建
未读
从EPUB到Audiobook 将电子书转化为有声书(Azure、OpenAI)
epub_to_audiobook 是一个将epub电子书转换为MP3音频书的Python工具,支持使用Azure或OpenAI的语音合成服务,并能通过Docker容器化运行。为环境搭建,用户需准备Python环境或Docker环境,使用时Clone仓库,创建虚拟环境并安装依赖,或直接运行Docker容器。所需服务需先准备账号:Azure和OpenAI分别提供语音服务的接入方式,通过环境变量或API密钥进行配置,并指定所需的服务参数如模型、语音及输出路径等。使用前需要完成账号准备,根据技术水平可选择直接运行源码或使用Docker版。
环境搭建
未读
Github 使用工作流自动部署前端项目
这篇指南介绍了如何通过GitHub Actions配置Node.js项目的持续集成(CI)流程。其主要功能包括:在代码推送或创建Pull Request到main分支时自动运行;使用Node.js 20.17.0版本,支持pnpm作为包管理工具;自动化依赖安装、代码构建,并将构建结果(存放在./.output/目录下)通过SSH部署到远程服务器。部署后还会自动重启名为pixiBloom的Docker容器,所有敏感信息均通过GitHub Secrets安全存储并调用。 workflows/node.js.yml)
后端
未读
MongoDB 备份恢复
这篇文章介绍了MongoDB数据库备份和恢复的使用方法。首先,指导用户从MongoDB官网下载命令行工具,并定位bin目录,其中包含mongodump和mongorestore工具。备份操作使用mongodump命令,需要提供主机、端口、用户名、密码、数据库名和输出路径等参数示例格式给出。恢复操作使用mongorestore命令,参数类似,同样支持对数据库的指定。文章还提到常见认证错误及其解决方法,即添加--authenticationDatabase admin参数。整体内容基于命令行语法,强调备份和恢复作为数据库管理的关键步骤,帮助用户高效安全地操作。每个命令变量如host、port、username和targetPath都提供了解释,确保用户能根据实际情况应用。
前端
未读
Swiper Element(Web 组件) 更改样式
Swiper Web组件不允许使用标准 CSS 选择器(如 `.className`)修改其内部样式,这是由于组件的封装机制所致。为此,开发者需依赖组件公开的 `part` 属性或通过特定API进行样式覆盖。核心观点是,样式修改必须通过 `::part` 伪元素选择器或注入方法来实现,避免直接CSS干预。关键结论包括:利用 `part` 可针对按钮和滚动条等元素定制样式,示例显示了如何应用SCSS或内联样式调整;对于无 `part` 特性的元素,可使用 `injectStyles` API 或 `injectStylesUrls` 方法注入动态样式。总体而言,这些机制提供了安全且灵活的自定义路径,保持组件功能完整性。
前端
未读
Swiper 匀速无缝轮播
**文章摘要:**
本文简要介绍如何通过引入 Swiper 库创建一个基本的轮播图。代码包含了引入 Swiper 的 CSS 和 JS 文件、构建轮播容器的基本 HTML 结构、初始化 Swiper 实例并配置参数(速度、循环模式、自动播放等),以及使用 CSS 自定义轮播过渡动画的缓动函数为线性,以实现更平滑的切换效果。
**关键点:**
* **库引入:** 引入 Swiper CSS 和 JS。
* **轮播容器:** 创建 `swiper-container` 作为轮播容器,内部 `swiper-slide` 为轮播项。
* **Swiper初始化:** 通过 JS 初始化 Swiper,并配置 `speed`(切换速度)、`loop`(循环模式)、`autoplay`(自动播放)等参数。
* **过渡效果:** 设置 CSS `transition-timing-function` 为 `linear`,使轮播切换过渡更均匀平滑。
环境搭建
未读
获取 Pixiv RefreshToken
**标题:** pxder CLI工具操作指南:执行前准备与登录流程
**正文:**
本文提供了使用 `pxder` 命令行工具的必要步骤,该工具用以批量下载插画图片(源自 Pixiv)。
主要操作涉及:
1. **环境准备:** 确保已安装 Node.js(见相关安装链接)。
2. **安装 pxder:** 使用全局方式安装命令行工具,命令为 `npm i -g pxder`。
3. **登录流程(关键步骤):**
* 尝试直接执行登录命令 `pxder --login`。
* 若报错提及未知模块(如 `qs`),需手动全局安装该模块:`npm i -g (模块名)`,重复直至登录不再报错。
* 成功安装后续模块后,若浏览器未自动跳转,请手动执行登录授权。
* 若非自动跳转,需通过开发者工具追踪登录请求,在最后一个请求中找到 `code` 参数值,并将其输入到 `pxder --login` 命令后的空白处执行,快速完成授权(注意:`code` 容易随时间过期失效)。
4. **登出:** 使用 `pxder --logout` 命令。
5. **导出 Token:** 如需导出当前登录用户的 Token,可执行 `pxder --export-token`。
6. **更多详情:** 可参阅 `pxder` 的 GitHub仓库获取更详细使用方法。
环境搭建
未读
1Penal 搭建邮件服务器
这篇文章提供了一个详细指南,指导用户在Centos系统上使用1Panel管理面板和Maddy Mail 0.7.1软件搭建邮件服务器。主要内容包括域名准备,使用二级域名如mail.kafuuchino.com.cn并申请SSL证书;安装过程涉及通过1Panel应用商店部署Maddy Mail,并上传证书到Docker存储卷;配置阶段覆盖获取DKIM值添加DNS解析,以及设置A、MX、SPF等记录以提升邮件服务安全性;使用部分涉及添加用户账户,包括创建登录和存储账户,并确保服务器开放关键端口如25、143、465等;最后通过发送测试邮件验证功能。指南强调了域名解析和证书的重要性,确保整个过程顺利完成。