TL;DR​

当 SSH 提示：

Are you sure you want to continue connecting (yes/no/[fingerprint])?

这里没有默认选项。

• 你必须输入 yes 并回车，才会把服务器指纹写入 ~/.ssh/known_hosts
• 直接回车 = 拒绝 = 立刻断开，然后你就会看到 Host key verification failed.

问题现象：SSH 一直 Host key verification failed​

今天我想在另外一台电脑上，把打包好的 Docusaurus 静态网站上传到服务器上。

然后就需要重新配置一下 SSH 链接。
我之前是把服务器的 key 保存到了 iCloud 上，这次就在这台电脑上下载下来用。

在连接的时候，一直报错：

Host key verification failed.
FAIL

具体实际显示如图：

看起来很像是 key 的验证问题。

我先确认了一下：

• IP 地址一样
• 登录用的 key（pem / 私钥）是同一个
• 服务器有多个 SSH Host Key（ED25519 / RSA / ECDSA）
• 其中有一个指纹和客户端提示的完全一致
• 新电脑本地没有旧的 known_hosts 记录（第一次连接）

按理说，这种情况只要第一次连接的时候确认指纹就可以了。

按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。

一开始，我想从它的官方库里找找，看看有没有直接用 CSS 写好的源码，发现没有，就找了最容易查看细节的 SVG 的文件。

把它导入 figma 之后，发现啥用也没有，我以为能直接看背景矩形的圆角，发现无论是这个背景还是 CSS 文字都是路径，没办法直接测量圆角。

然后我又想看一下 CSS 与边框的距离，发现这些数字也不是挺精确...大概 34px 吧，不知道是不是软件的问题，算啦，就简单粗略的还原一下吧。圆角的问题，这里我直接覆盖一个新的矩形，调一下透明度，然后调整圆角，直到和 logo 的圆角看起来一致就好了，大概 68px，这里注意一下，CSS 最后一个 S 的弧度和这个圆角似乎也保持了一致。再看宽度和高度是 440px。背景紫色是 #663399，这个官方仓库也写明了。

这几天我把 Docusaurus 升级到了 3.6，主要是因为这个版本引入了 Rspack 和 SWC 等库，把打包速度提升了好几倍。以前打包大概要一两分钟，现在只需要五六秒就搞定了！

升级过程其实很简单，就是在 package.json 里把版本号改成最新的 3.6.1（当下最新版）。

随着现代网页设计的发展，CSS 动画已逐渐成为构建用户体验良好、互动性强的网站的关键。相比于静态的页面布局，动画能为用户带来更丰富的视觉体验，也能帮助网页更好地传达信息。

那么，为什么要用 CSS 动画呢？简单来说，CSS 动画可以通过视觉效果引导用户注意页面上的重要内容，例如按钮、链接、图标等，使用户的交互体验更加直观、自然。通过适当的动画设计，页面可以显得更具活力和吸引力，提高用户的留存率与参与度。

CSS 动画在网页中的应用也变得越来越重要。无论是加载动画、鼠标悬停效果，还是页面滚动时的动态内容展示，CSS 动画都能够轻松实现。再由于 CSS 动画轻量和高效的特性，我们可以在不影响页面性能的前提下，增强网站的互动性与用户体验。

这篇文章将详细介绍 CSS 动画的基础知识、关键技巧和常见应用，帮助初学者全面掌握 CSS 动画的使用方法，使大家能够轻松地为网页添加动态效果，提升网页开发和设计的专业性以及吸引力。

什么是CSS动画？​

CSS 动画是通过定义一系列关键帧或过渡效果，使网页中的元素在指定时间内发生变化的一种技术。它能让网页元素平滑地改变属性，例如位置、大小、颜色、透明度等。

在现代网页设计中，CSS 动画有多种用途，常见的包括：

• 加载动画：帮助用户了解页面正在加载，可以缓解因为等待而带来的焦虑感。
• 交互效果：如按钮悬停、点击效果等，当用户与页面交互时，动画可以反馈出响应状态，提升用户的互动体验。
• 滚动效果：在页面滚动时展示的动画内容，使得页面不再是静态的、单一的文本和图片，增加了视觉层次感。

在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。本文将分享 10 个 CSS 一行代码技巧。

1. 居中对齐​

居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。

display: grid; place-items: center;

JavaScript 是一种功能强大的编程语言，我们可以通过使用一行代码实现很多功能。在日常开发中，我们经常会遇到需要快速实现某些功能的情况。下面让我们一起看看 12个有用的 JavaScript 一行代码技巧。

1. 生成随机颜色​

JavaScript 中可以通过以下方式快速生成一个随机颜色：

let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);

这行代码会生成一个六位的十六进制数，可以用作 CSS 颜色值。

2. 获取 URL 参数​

如果你想获取 URL 参数，可以通过以下一行代码实现：

前言​

在现代前端开发中，打包工具已经成为不可或缺的一部分。它们可以将多个文件合并为一个或多个文件，使前端应用的加载和运行速度更快。目前，Vite 和 Webpack 是最受欢迎的打包工具之一。本文将介绍它们之间的比较和区别，以帮助你选择适合自己项目的工具。

什么是 Vite？​

Vite 是一种新型的前端构建工具，旨在提高开发过程中的开发体验和构建速度。它支持所有的现代前端框架，如 Vue、React、Angular等，以及原生的 HTML/CSS/JS 应用。

Vite 的核心理念是“快速开发”。它采用了一种新的开发方式，即在开发过程中不需要事先打包应用程序，而是在应用程序运行时即时编译和构建。这种方式使得开发者可以更快地编写代码，而无需等待长时间的编译和构建过程。

什么是 Webpack？​

Webpack 是一个广泛使用的打包工具，为现代 Web 应用程序提供了强大的静态资源管理功能。Webpack 可以将多个文件打包成一个或多个文件，并使它们在浏览器中快速加载。Webpack 是一个高度可配置的工具，因此可以根据项目的需要进行定制。

Webpack 的核心理念是“模块化”。它支持使用各种语言和框架编写模块，并将它们打包成可在浏览器中使用的 JavaScript 文件。Webpack 还提供了强大的插件系统，可以扩展其功能。

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。

React 框架简介​

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式，使得开发者可以将一个 Web 应用程序拆分成多个组件，每个组件负责不同的功能，从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术，可以最小化 DOM 操作，从而提高性能。另外，React 还拥有丰富的生态系统，包括 React Router、Redux、React Native 等等，可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

我们在前端开发中，经常会有居中某个元素的需求。因为 CSS 对于居中的方式有多种多样，在不同场景下有不同的效果，需要特别记住它们的应用场景才能够正常的居中元素。那么这篇文章，我们就看一下在 CSS 中，水平居中一个元素的不同方法和技巧，帮助你在前端开发中更加游刃有余。

使用 text-align 居中行内元素​

text-align 不仅可以居中文本，还可以居中行内元素（如文本或图片）。把父元素的 'text-align' 设置为 center，然后把子元素的 display 属性设置为 inline 就可以了。

.parent-element {
  text-align: center;
}

在开发大型 Vue 项目的时候，有的组件会嵌套的很深，如果需要引入外层其他目录的组件，需要编写很长一段相对路径。假如有如下组件目录结构：

/Layout/Header/NavBar.vue
/Base/BaseLink.vue

如果在 NavBar 中引入 BaseLink 组件，需要使用下面的路径进行导入：

NavBar.vue
<script>
import BaseLink from '../../Base/BaseLink.vue';
</script>

这里使用了两个 ../ 才访问到 Base 目录，如果这个时候，我们给 ../../ 设置一个别名，例如 @，那么就可以使导入路径更简洁，变成：

@/Base/BaseLink.vue

Vite 支持设置路径别名，来支持这种形式的导入。