环境搭建
未读
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`，使轮播切换过渡更均匀平滑。
前端
未读
js获取0-1之间的随机数，获取1-10之间的随机数
文章介绍了JavaScript中随机数生成的基本方法，重点关注如何创建不同范围的随机整数。首先，示例展示了生成0-1之间随机小数的代码，使用Math.random()函数。接下来，演示了如何生成1-10之间的随机整数，通过Math.floor()函数与Math.random()结合实现。随后，提供了自定义函数来生成任意两个数之间的随机整数，第一个函数可取起始值但不可能达到结束值，第二个函数可包括结束值；后者使用箭头函数形式实现类似功能。整体上，这些代码示例清晰地展示了随机数生成在不同场景下的应用，帮助开发者快速理解和使用基本随机功能，确保生成的数字精确符合指定范围要求。
前端
未读
iframe通信
以下是可以从上述代码中提取的简明摘要：
这段HTML代码示例展示了**父页面与iframe嵌入的子页面之间如何进行跨文档通信**，主要使用`postMessage`方法。
1. **父页面作用**:
- 在iframe加载完成后，使用`postMessage`向子页面发送消息。
- 监听`message`事件，接收子页面传回的消息并输出。
2. **子页面作用**:
- 监听父页面通过`postMessage`发送的消息。
- 收到消息后向父页面发送确认信息。
**通信示例**:
- 父页面向子页面发送字符串 `"父容器传递给子容器的数据"`。
- 子页面接收到后弹窗提示 `"确认收到消息"`，并返回确认消息。
该示例展示了Web中**跨域或同域框架间通过postMessage安全传递数据**的基本方法。