环境搭建
未读
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）
前端
未读
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`，使轮播切换过渡更均匀平滑。