https://blog.syarolia.com夏萝莉亚Halo v2.24.1zh-cnhttps://blog-oss.syarolia.com/syarolia.jpghttps://blog.syarolia.comWed, 3 Jun 2026 16:20:36 GMThttps://blog.syarolia.com/archives/wwqQh3tY本文介绍了在前端动画开发中越来越流行的滚动驱动交互方式，重点讲解了如何使用 GSAP（GreenSock Animation Platform）及其插件 ScrollTrigger，实现随着页面滚动播放动画的效果。文章通过实际示例，从基础入手，详细阐述了 ScrollTrigger 的核心功能，包括滚动触发、动画同步、元素固定等。作者提供了示例代码，演示如何设置滚动触发器以同步动画与滚动位置，确保动画在特定的滚动区域内完成。同时，还分析了每行代码的功能，帮助读者理解如何通过注册插件、创建动画和设置触发器参数来实现交互效果。此外，内文还强调了将 markers 用于调试的重要性，以便更直观地观察动画的开始与结束位置。最后，文章总结了 ScrollTrigger 的关键概念，供读者参考。]]>/archives/wwqQh3tY夏萝莉亚前端Sat, 28 Feb 2026 09:18:24 GMThttps://blog.syarolia.com/archives/epub2audiobook%20 epub_to_audiobook 是一个将epub电子书转换为MP3音频书的Python工具，支持使用Azure或OpenAI的语音合成服务，并能通过Docker容器化运行。为环境搭建，用户需准备Python环境或Docker环境，使用时Clone仓库，创建虚拟环境并安装依赖，或直接运行Docker容器。所需服务需先准备账号：Azure和OpenAI分别提供语音服务的接入方式，通过环境变量或API密钥进行配置，并指定所需的服务参数如模型、语音及输出路径等。使用前需要完成账号准备，根据技术水平可选择直接运行源码或使用Docker版。]]>/archives/epub2audiobook%20夏萝莉亚环境搭建Mon, 23 Sep 2024 07:56:04 GMThttps://blog.syarolia.com/archives/github-workflow-automated-deployment-projects 这篇指南介绍了如何通过GitHub Actions配置Node.js项目的持续集成（CI）流程。其主要功能包括：在代码推送或创建Pull Request到main分支时自动运行；使用Node.js 20.17.0版本，支持pnpm作为包管理工具；自动化依赖安装、代码构建，并将构建结果（存放在./.output/目录下）通过SSH部署到远程服务器。部署后还会自动重启名为pixiBloom的Docker容器，所有敏感信息均通过GitHub Secrets安全存储并调用。 workflows/node.js.yml）]]>/archives/github-workflow-automated-deployment-projects夏萝莉亚环境搭建Fri, 20 Sep 2024 08:04:46 GMThttps://blog.syarolia.com/archives/mongodb-backup-recovery 这篇文章介绍了MongoDB数据库备份和恢复的使用方法。首先，指导用户从MongoDB官网下载命令行工具，并定位bin目录，其中包含mongodump和mongorestore工具。备份操作使用mongodump命令，需要提供主机、端口、用户名、密码、数据库名和输出路径等参数示例格式给出。恢复操作使用mongorestore命令，参数类似，同样支持对数据库的指定。文章还提到常见认证错误及其解决方法，即添加--authenticationDatabase admin参数。整体内容基于命令行语法，强调备份和恢复作为数据库管理的关键步骤，帮助用户高效安全地操作。每个命令变量如host、port、username和targetPath都提供了解释，确保用户能根据实际情况应用。]]>/archives/mongodb-backup-recovery夏萝莉亚后端Fri, 30 Aug 2024 01:02:40 GMThttps://blog.syarolia.com/archives/swiper-element-change-style Swiper Web组件不允许使用标准 CSS 选择器（如 `.className`）修改其内部样式，这是由于组件的封装机制所致。为此，开发者需依赖组件公开的 `part` 属性或通过特定API进行样式覆盖。核心观点是，样式修改必须通过 `::part` 伪元素选择器或注入方法来实现，避免直接CSS干预。关键结论包括：利用 `part` 可针对按钮和滚动条等元素定制样式，示例显示了如何应用SCSS或内联样式调整；对于无 `part` 特性的元素，可使用 `injectStyles` API 或 `injectStylesUrls` 方法注入动态样式。总体而言，这些机制提供了安全且灵活的自定义路径，保持组件功能完整性。]]>/archives/swiper-element-change-style夏萝莉亚前端Fri, 23 Aug 2024 08:37:34 GMThttps://blog.syarolia.com/archives/swiper-uniform-and-seamless-rotation **文章摘要：** 本文简要介绍如何通过引入 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`，使轮播切换过渡更均匀平滑。]]>/archives/swiper-uniform-and-seamless-rotation夏萝莉亚前端Wed, 21 Aug 2024 08:45:45 GMThttps://blog.syarolia.com/archives/1719900360866 **标题：** 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仓库获取更详细使用方法。]]>/archives/1719900360866夏萝莉亚环境搭建Tue, 2 Jul 2024 06:08:21 GMThttps://blog.syarolia.com/archives/1718160909945 这篇文章提供了一个详细指南，指导用户在Centos系统上使用1Panel管理面板和Maddy Mail 0.7.1软件搭建邮件服务器。主要内容包括域名准备，使用二级域名如mail.kafuuchino.com.cn并申请SSL证书；安装过程涉及通过1Panel应用商店部署Maddy Mail，并上传证书到Docker存储卷；配置阶段覆盖获取DKIM值添加DNS解析，以及设置A、MX、SPF等记录以提升邮件服务安全性；使用部分涉及添加用户账户，包括创建登录和存储账户，并确保服务器开放关键端口如25、143、465等；最后通过发送测试邮件验证功能。指南强调了域名解析和证书的重要性，确保整个过程顺利完成。]]>/archives/1718160909945夏萝莉亚环境搭建Wed, 12 Jun 2024 09:09:58 GMT