沉默是金

使用 next-intl 在 Next.js 应用中开启国际化

Wed, 01 Jan 2025 09:43:12 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/nextjs/i18n-with-next-intl

目前 Next.js 推荐的路由方式是 App Router，所以本文不再介绍 Pages Router，感兴趣的请阅读官方文档 next-intl Pages Router。

next-intl 为 App Router 提供了两种配置选项：

带有路由：使用路由片段 locale 或者域名，例如 /en/about 和 en.example.com/about。
不带路由：基于用户设置。

由于第一种方式在后续的路由跳转必须携带 locale 参数，比较不方便，因此本文选择介绍第二种不带路由的方式。

一、准备工作

使用 pnpm 创建项目

pnpm create next-app

运行项目，本文在此页面上进行配置

二、安装和配置

1. 安装 next-intl

pnpm add next-intl

2. 在根目录创建 `messages` 文件夹，并在此文件夹下创建 `zh.json` 和 `en.json`

Home 为命名空间，后面需要用到，可以在 json 中声明多个，表示不同场景。

en.json

{
  "Home": {
    "step1": "Get started by editing",
    "step2": "Save and see your changes instantly.",
    "deploy": "Deploy now",
    "docs": "Read our docs",
    "learn": "Learn",
    "examples": "Examples",
    "goto": "Go to"
  },
  "List": {
    "loading": "Loading...",
    "desc": "There is nothing here.",
    "text": "Click me"
  }
}

zh.json

{
  "Home": {
    "step1": "开始编辑",
    "step2": "保存并立即查看您的更改。",
    "deploy": "现在部署",
    "docs": "阅读文档",
    "learn": "学习",
    "examples": "例子",
    "goto": "前往"
  },
  "List": {
    "loading": "加载中...",
    "desc": "这里什么也没有。",
    "text": "点击我"
  }
}

3. 配置 `next.config.mjs`

import createNextIntlPlugin from 'next-intl/plugin';
 
const withNextIntl = createNextIntlPlugin();
 
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
export default withNextIntl(nextConfig);

4. 创建 `i18n/config.js`，保存配置

// 系统支持的语言列表
export const locales = ['en', 'zh']

export const defaultLocale = 'en'

5. 创建 `i18n/service.js`，获取、设置区域

next-intl 在 cookie 中设置了 NEXT_LOCALE 字段，用来保存区域配置。

获取区域配置优先级如下：

从 cookies 中读取 NEXT_LOCALE，有值则直接返回
从 headers 中读取解析 accept-language，并判断是否在系统支持的语言中

'use server';

import { cookies, headers } from 'next/headers';

import { defaultLocale, locales } from './config';

const COOKIE_NAME = 'NEXT_LOCALE';

export async function getUserLocale() {
  // 读取 cookie
  const locale = (await cookies()).get(COOKIE_NAME)?.value
  if (locale) return locale

  // 读取请求头 accept-language
  const acceptLanguage = (await headers()).get('accept-language')

  // 解析请求头
  const parsedLocale = acceptLanguage?.split(',')[0].split('-')[0]

  // 如果不在系统支持的语言列表，使用默认语言
  return locales.includes(parsedLocale) ? parsedLocale : defaultLocale;
}

export async function setUserLocale(locale) {
  (await cookies()).set(COOKIE_NAME, locale);
}

6. 创建 `i18n/request.js`，返回国际化配置

import { getRequestConfig } from 'next-intl/server';

import { getUserLocale } from './service'

export default getRequestConfig(async () => {
  const locale = await getUserLocale()

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

7. 修改 `app/layout.js`

使用 getLocale 和 getMessages 可以获取 i18n/request.js 返回的语言配置，将 locale 设置到 html 的 lang 属性，将 messages 传递给 NextIntlClientProvider。

import { Geist, Geist_Mono } from "next/font/google";
import { NextIntlClientProvider } from 'next-intl';
import { getLocale, getMessages } from 'next-intl/server';

import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({ children }) {
  const locale = await getLocale()
  const messages = await getMessages()

  return (
    
      
        
          {children}
        
      
    
  );
}

三、使用

同步服务端组件与客户端组件

文本数量较少的情况下，建议将文本通过 props 传递给客户端组件。在客户端组件中调用 useTranslations 会将 next-intl 代码打包进客户端 js 中，导致 bundle 体积增大，影响加载性能。

调用 useTranslations，传入命名空间

const t = useTranslations('Home')

在 jsx 中调用

{t('docs')}

异步服务端组件

import { getTranslations } from 'next-intl/server'

const sleep = (ms) => new Promise(r => setTimeout(r, ms))

export default async function Page() {
  await sleep(2000)
  const t = await getTranslations('List')

  return (
    
      {t('desc')}
    
  )
}

关于其他更多用法，例如插值语法、富文本、HTML 标记、数组、数字格式、日期时间格式等，请参考文档 https://next-intl.dev/docs/usage/messages。

四、语言切换

创建 components/LocaleSwitcher.js 组件，并在 app/page.js 中引入

'use client'

import { useTransition } from 'react'

import { setUserLocale } from '@/i18n/service'
import { defaultLocale } from '@/i18n/config';

export default function LocaleSwitcher({ defaultValue = defaultLocale }) {
  const [isPending, startTransition] = useTransition();

  function onChange(locale) {
    startTransition(() => {
      setUserLocale(locale);
    });
  }

  return (
    
  )
}

由于我们之前在 Server Action setUserLocale 中通过 cookies 设置了语言区域，Next.js 会将新的 cookie 和 DOM 返回给客户端。

效果如下：

五、最后

在线预览地址：https://next-intl-study.vercel.app/

完整代码仓库：https://github.com/zb81/next-intl-study

看完了？说点什么呢

动态排版

Wed, 11 Dec 2024 06:42:34 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/fe/dynamic-composing

问题一

因为不用考虑每一个区域的大小，而且只能在一个矩形容器中放入三种矩形内容，所以排版方式是有穷的，共 36 种。

计算方式如下：

布局组合：

一行三列、上一下二、上二下一、左一右二、左二右一、三行一列。

共 6 种布局组合。
文本、图片、列表的排列可能：

A(3,3) = 6
两者相乘，得到 36 种排版.

问题二

可以用一个嵌套数组表示排版结构，外层数组表示行，内层数组表示每一行包括的列。例如：

// 左一右二布局
[
  [
    {
      type: 'img', // 图片
      content: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg', // 图片链接
    },
    {
      type: 'list', // 列表
      content: ['apple', 'banana', 'orange']
    },
  ],
  [
    {
      type: 'img', // 图片
      content: 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg', // 图片链接
    },
    {
      type: 'text', // 文本
      content: 'Hello, world! Hello, world!', // 文本内容
    },
  ],
]

问题三

通过 grid 布局以及 grid-area 和 grid-template-areas 可以实现。

完整代码如下：





  
  
  Document

效果如图：

看完了？说点什么呢

给七牛云域名添加 https 证书

Mon, 29 Apr 2024 06:12:37 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/toss/qiniu-https

本文以腾讯云服务为例，介绍如何给七牛云自定义域名添加 https 证书。

关于 certbot 的安装，请参考官方文档：certbot.eff.org 。

一、先将域名指定到云服务器

添加一条 A 类型的解析记录，指定到云服务器实例 IP：

二、配置云服务器 Nginx

配置 Nginx 的原因是 Let's Encrypt 需要验证网站的所有权才能颁发证书，我们使用 HTTP-01 的方式：

# nginx.conf
server {
    listen 80;
    server_name cdn.example.com;
    
    location ^~  /.well-known/acme-challenge/ {
        default_type "text/plain";
        root  /home/letsencrypt/;
    }
}

重启 Nginx 服务：

nginx -s reload

三、签发证书

certbot certonly --email xxx@xxx.com --webroot -w /home/letsencrypt -d cdn.example.com

输出以下结果，代表签发成功：

四、上传证书

五、将域名指向七牛云

将刚刚添加的 A 类型解析记录修改为 CNAME 类型，值填写七牛云的域名（xxxxxx-asdfc.qiniudns.com）：

看完了？说点什么呢

从零搭建一个自定义明暗主题系统

Mon, 08 Apr 2024 14:59:30 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/fe/build-light-dark-theme

最近准备用 React + Antd + UnoCSS 开发一个和 NestJS Admin 配套的系统，想加个自定义主题功能，效果如下图，也可以点击这里或这里体验。

一、需求

用户可以自定义主题颜色，需要实时响应；
用户可以切换明暗模式，需要实时改变背景和文字颜色；
当用户切换系统主题时，网页需要作出响应；
主题颜色和明暗模式需要缓存至 localStorage。

二、准备工作

这里使用的是 pnpm，用 npm 或 yarn 等包管理工具的记得替换命令。

1. 创建项目

首先，拉取 vite 模板：

pnpm create vite my-theme --template react-ts

清空 src 目录：

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
  ,
)

// App.tsx
function App() {
  return (
    App
  )
}

export default App

启动项目：

pnpm run dev

2. 安装 Antd

pnpm add antd

// App.tsx
import { Button } from 'antd'

function App() {
  return (
    
      
      
    
  )
}

export default App

3. 安装并配置 UnoCSS

开始之前，先推荐两个 VSCode 插件：

UnoCSS

这个插件会读取 uno.config.ts ，提供了类名的提示以及预览：
Iconify IntelliSense

这个插件提供了图标名称的提示和预览功能：

1) 安装并引入

因为后续会用的 CSS 图标，这里顺带安装一下图标库。(体积很大，70M，你想要的 SVG 图标这里都有)

pnpm add unocss @iconify/json -D

配置 vite.config.ts：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), UnoCSS()],
})

在 main.tsx 中引入：

// main.tsx
import 'virtual:uno.css'

2) 配置文件

在项目根目录创建 uno.config.ts 配置文件：

// uno.config.ts
import { defineConfig, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      extraProperties: {
        'display': 'inline-block',
        'height': '1.2em',
        'width': '1.2em',
        'vertical-align': 'middle',
      },
      warn: true,
    }),
  ],
})

更多配置选项，请阅读 UnoCSS 文档。

关于图标的使用方法和配置，请看这里。

3) 样式重置

pnpm add @unocss/reset

在 main.tsx 中引入：

import '@unocss/reset/tailwind-compat.css'

4) 测试

在 App.tsx 中随便写点代码：

// App.tsx
import { Button } from 'antd'

function App() {
  return (
    
      
      

      Hello, world!
      
        
        
      
    
  )
}

export default App

三、需求实现

1. 自定义主题颜色

1) 组件引入并绑定状态

// App.tsx
import { Button, ColorPicker } from "antd";
import { useState } from "react";

function App() {
  const [primaryColor, setPrimaryColor] = useState("#01bfff");

  return (
    
       setPrimaryColor(c)}
      />

      {}

      
      
    
  );
}

export default App;

2) 和 Antd 组件同步

新版本的 Antd 采用了 CSS-in-JS 方案以及梯度变量演变算法，只需要提供一个基础变量 colorPrimary ，主题相关的其它配色就能推算出来，比如按钮点击的波纹颜色等等。

所以，我们只需要将 primaryColro 通过 ConfigProvider 提供给 Antd 就可以了：

// App.tsx
import { Button, ColorPicker, ConfigProvider, ThemeConfig } from "antd";
import { useState } from "react";

function App() {
  const [primaryColor, setPrimaryColor] = useState("#01bfff");

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
  };

  return (
    
      
        
           setPrimaryColor(c)}
          />

          {primaryColor}

          
          
        
      
    
  );
}

export default App;

3) 和其他颜色同步

这里使用 CSS 变量的方案来保持颜色同步：

给根元素添加一个 CSS 变量 --primary-color;
给 UnoCSS 添加一个颜色 primary: 'var(--primary-color)'；
添加一个副作用，让 primaryColro 和 --primary-color 保持同步。

// uno.config.ts
import { defineConfig, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      primary: 'var(--primary-color)', // 这里定义了一个颜色，通过 `text-primary` 的方式使用
    },
  },
  // ... rest config
})

// App.tsx
import { Button, ColorPicker, ConfigProvider, ThemeConfig } from "antd";
import { useEffect, useState } from "react";

function App() {
  const [primaryColor, setPrimaryColor] = useState("#01bfff");

  useEffect(() => {
    document.documentElement.style.setProperty("--primary-color", primaryColor);
  }, [primaryColor]);

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
  };

  return (
    
      
         setPrimaryColor(c)}
        />

        {/* 这里使用了在 UnoCSS 中定义的 primary */}
        {primaryColor}

        
        
      
    
  );
}

export default App;

2. 明暗模块切换

安装 classnames 方便组装类名：

pnpm add classnames

1) 封装切换组件

先给图标按钮加个 shortcut 组合类：

// uno.config.ts
import { defineConfig, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  shortcuts: {
    btn: 'p-2 font-semibold rounded-lg select-none cursor-pointer hover:bg-[#8882] dark:hover:bg-[#fff2]',
  },
  // ... rest config
})

创建组件 ToggleTheme.tsx：

// ToggleTheme.tsx
import { Popover } from "antd";
import classnames from "classnames";

function upperFirst(str: string) {
  return `${str[0].toUpperCase()}${str.slice(1)}`;
}

export type ColorMode = "light" | "dark" | "auto";

const iconMap = {
  light: ,
  dark: ,
  auto: ,
};

const modes = ["light", "dark", "auto"] as const;

interface Props {
  mode: ColorMode;
  onChange: (mode: ColorMode) => void;
}

function ToggleTheme({ mode, onChange }: Props) {
  const modeList = (
    
      {modes.map((m) => (
         onChange(m)}
        >
          {iconMap[m]}
          {upperFirst(m)}
        
      ))}
    
  );

  return (
    
      {/* 这里也使用了 shortcut `btn` */}
      {iconMap[mode!]}
    
  );
}

export default ToggleTheme;

2) 引入组件

// App.tsx
import { Button, ColorPicker, ConfigProvider, ThemeConfig } from "antd";
import { useEffect, useState } from "react";
import ToggleTheme, { ColorMode } from "./ToggleTheme";

function App() {
  // 其他代码

  // 保存明暗模式
  const [mode, setMode] = useState("light");

  return (
    
      
        {/* 其他代码 */}

         setMode(m)} />
      
    
  );
}

export default App;

3) 绑定 dark 类

目前常用的黑暗模式方案是给根元素添加一个 dark 类，然后在代码中通过 dark:text-yellow 指定黑暗模式下的样式：

.dark .dark\:text-yellow {
    --un-text-opacity: 1;
    color: rgb(250 204 21 / var(--un-text-opacity));
}

使用 useEffect 同步 dark 类：

// App.tsx
import { Button, ColorPicker, ConfigProvider, ThemeConfig } from "antd";
import { useEffect, useState } from "react";
import ToggleTheme, { ColorMode } from "./ToggleTheme";

function App() {
  const [mode, setMode] = useState("light");
  useEffect(() => {
    document.documentElement.classList.toggle("dark", mode === "dark");
  }, [mode]);

  return (
    
            {/* ... */}
      {/* 使用 dark:text-yellow 指定黑暗模式下的文字颜色 */}
      Light or dark
    
  );
}

export default App;

4) 使用 CSS 变量同步颜色

新建 main.css：

/* main.css */
:root {
  /* 明亮模式的颜色 */
  --c-bg: #fff;
  --c-scrollbar: #eee;
  --c-scrollbar-hover: #bbb;
  --c-text-color: #333;
}

html {
  /* 使用 CSS 变量 */
  background-color: var(--c-bg);
  transition: background-color .25s;
  color: var(--c-text-color);
  overflow-x: hidden;
  overflow-y: scroll;
}

html.dark {
  /* 黑暗模式的颜色 */
  --c-bg: #333;
  --c-scrollbar: #111;
  --c-scrollbar-hover: #222;
  --c-text-color: #fff;
}

* {
  scrollbar-color: var(--c-scrollbar) var(--c-bg);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--c-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-scrollbar-hover);
}

引入 main.tsx：

// main.tsx
import './main.css'

效果如下：

5) 同步 Antd

Antd 暴露的 theme 提供了几种颜色算法，我们需要用到这两种：

defaultAlgorithm 默认算法
darkAlgorithm 黑暗模式的算法

我们需要根据 mode 给 ConfgProvider 提供不同的算法：

// App.tsx
import { /* ... */ theme } from "antd"; // 引入 theme
import { useEffect, useState } from "react";
import ToggleTheme, { ColorMode } from "./ToggleTheme";

function App() {
    // ...

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
    // 黑暗模式使用 darkAlgorithm
    algorithm: mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm,
  };

  return (
    
      {/* ... */}
    
  );
}

export default App;

效果如下：(注意看 zzz 按钮的背景颜色)

3. 监听系统主题

刚刚我们实现了手动切换明暗模式，现在来实现根据当前的系统主题使用对应的模式。

1) 获取并监听系统主题

CSS 提供了媒体查询 prefers-color-scheme: dark 用来监听系统明暗模式，如果我们想读取，需要调用 window.matchMedia，该方法需要传入一个查询字符串，并返回一个 MediaQueryList对象：

matches 布尔值
addEventListener 添加监听事件处理函数

为了更好的逻辑封装和复用，创建一个自定义 hook usePreferredDark.ts，返回系统是否处于黑暗模式：

import { useState } from 'react'

export function usePreferredDark() {
  // 使用系统当前的明暗模式作为初始值
  const [matches, setMatches] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches)

  // 监听系统的明暗模式变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    setMatches(e.matches)
  })

  return matches
}

测试：

// App.tsx
import { usePreferredDark } from "./usePreferredDark";

function App() {
    // ...
  const preferredDark = usePreferredDark()

  useEffect(() => {
    document.documentElement.classList.toggle("dark", preferredDark);
  }, [preferredDark]);

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
    algorithm: preferredDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
  };

  return (
    
      {/* ... */}
    
  );
}

export default App;

效果如下：

2) 结合 mode

监听系统主题我们实现了，现在需要把 preferredDark 和 mode 结合起来判断当前网页是否处于黑暗模式，封装一个自定义 hook useDark.ts，如果是黑暗模式，返回 true：

// useDark.ts
import { useMemo } from 'react'
import { usePreferredDark } from './usePreferredDark'
import type { ColorMode } from './ToggleTheme'

export function useDark(mode: ColorMode) { // 外部传入，用户选择的明暗模式
  const preferredDark = usePreferredDark() // 当前系统是否是黑暗模式
  const isDark = useMemo(() => {
    return mode === 'dark' || (preferredDark && mode !== 'light') // 简化后的逻辑
  }, [mode, preferredDark])

  return isDark
}

逻辑解释：

因为 mode 是用户选择的，所以它优先级最高，如果 mode === 'dark'，直接短路返回 true；
如果 mode === 'light'，返回 false
如果 mode === 'auto'，返回当前系统是否处于黑暗模式

测试：

// App.tsx
import { useDark } from "./useDark";

function App() {
     // ...
  const [mode, setMode] = useState("light");
  // 当前是否处于黑暗模式
  const isDark = useDark(mode);
  useEffect(() => {
    document.documentElement.classList.toggle("dark", isDark);
  }, [isDark]);

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
  };

  return (
    
        {/* ... */}
    
  );
}

export default App;

效果如下：

最后修改 mode 的初始值为 auto：

// App.tsx
function App() {
  // ...

  const [mode, setMode] = useState("auto"); // 这里

  return (
    // ...
  );
}

export default App;

4. 缓存至 localStorage

这个实现起来很简单，直接使用 ahooks 提供的 useLocalStorageState 即可。

1) 安装 ahooks

pnpm add ahooks

2) 替换 `useState`

// App.tsx
import { useLocalStorageState } from "ahooks"; // 引入

// 定义 key 常量
const PRIMARY_COLOR_KEY = "app_primary_color";
const COLOR_MODE_KEY = "app_color_mode";

function App() {
  const [primaryColor, setPrimaryColor] = useLocalStorageState(
    PRIMARY_COLOR_KEY,
    {
      defaultValue: "#01bfff",
      serializer: (v) => v, // 因为我们存的本身就是字符串，不需要 JSON 序列化
      deserializer: (v) => v,
    }
  );

  useEffect(() => {
    document.documentElement.style.setProperty(
      "--primary-color",
      primaryColor! // 注意这里非空断言
    );
  }, [primaryColor]);

  const [mode, setMode] = useLocalStorageState(COLOR_MODE_KEY, {
    defaultValue: "auto",
    serializer: (v) => v,
    deserializer: (v) => v as ColorMode,
  });

  const isDark = useDark(mode!);
  useEffect(() => {
    document.documentElement.classList.toggle("dark", isDark);
  }, [isDark]);

  const antdTheme: ThemeConfig = {
    token: { colorPrimary: primaryColor },
    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
  };

  return (
    
      
         setPrimaryColor(c)}
        />

        
          {primaryColor}
        

        
        

        {/* 注意这里非空断言 */}
         setMode(m)} />
      

      Light or dark
    
  );
}

export default App;

效果如下：

3) 背景闪烁

刷新页面的时候，明显可以感觉到背景颜色闪烁了一下。这是因为根元素的 dark 类是通过 JS 设置的，我们的代码会在 html 创建之后执行。

解决方案：在 index.html 的 head 中插入一段脚本：




  
    
    
    
    Vite + React + TS

四、总结技术要点

window.matchMedia API
Antd ConfigProvider
useLocalStorageState
CSS 变量

完整代码见 GitHub。

看完了？说点什么呢

攒钱！努力！

Fri, 29 Mar 2024 09:17:29 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/notes/1

保时米给我的刺激

昨晚看了小米汽车的发布会直播，不得不说，顶配版 29.99 万的售价真的很不错。然而对于没攒什么钱的我来说，卖 19.99 万也还是买不起。这是我的问题，不是小米的问题。

发布会结束后，我一直在想最近两年冲动消费了多少次，到现在想买大件的时候才发现手里根本没几个钱。工作三年了，除了那一堆赛博垃圾，啥也没有。

在这里立个 Flag ：理智消费，逐渐享受攒钱的快乐，今年下半年提辆车，开回家过年。

折腾博客主题

年前就在推特上发现了这个颜值很高的博客主题 Shiro ，直到最近想学习 Next.js 和 Nest.js 才决定折腾一波。昨晚住在楼上的两个韩国人太吵，吵得我到一点还没睡着。TMD 不睡了，直接起床开整。一开始我没去看文档，硬生生折腾到四点钟，终于通了，上床睡觉。

早上来到公司打开控制台发现客户端的请求会报跨域，我就想是不是哪个地方没配置。打开文档才看到，后端服务在 docker-compose 之前要创建 .env 环境变量，配置 JWT Secret 、Allow Origins 什么的。这一次很快，十分钟不到就重新部署了一遍。

中午吃完饭把前端从 Vercel 迁移到了腾讯云，速度提升了很多。

后续计划

搞明白文档中提到的文本宏、云函数等功能的用法和实现原理
学习前端 Shiro 和后端 mx-core 的源码 (相当于学习 Next 和 Nest)

看完了？说点什么呢

ECharts 部署教程

Tue, 10 Oct 2023 14:57:19 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/toss/echarts-deploy

国内的网络环境访问 ECharts 文档经常会抽风，访问速度很慢，或者压根加载不出来。这篇教程会教你如何在本机或内网部署一个站点，提升文档访问速度。

一、准备工作

新建一个文件夹，用于存放站点相关源码，直接使用命令创建并进入：

mkdir echarts-deploy && cd echarts-deploy

在此目录下，将下面所有仓库的代码全部克隆下来（仓库体积较大，耐心等待）：

echarts-website

git clone https://github.com/apache/echarts-website.git

echarts-www

git clone https://github.com/apache/echarts-www.git

echarts-examples

git clone https://github.com/apache/echarts-examples.git

echarts-doc

git clone https://github.com/apache/echarts-doc.git

echarts-theme-builder

git clone https://github.com/apache/echarts-theme-builder.git

echarts-handbook

git clone https://github.com/apache/echarts-handbook.git

二、构建

这几个仓库分为主仓库（echarts-website）和子仓库（其他），我们要先构建子仓库的代码，构建成功后，脚本会将构建产物复制到 echarts-website 目录下。也就是说，echarts-website 目录就是网站的根目录，后面要注意修改配置文件中的路径。

项目比较老，文档中没有说明 Node 版本，踩了不少坑。最好使用 Node 14，如果报错，再尝试 Node 16。

1. echarts-handbook

进入 echarts-handbook 目录，执行 npm i 安装依赖
修改 configs/config.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口
执行 npm run build:localsite 打包，打印出下面的日志，说明构建成功

2. echarts-examples

进入 echarts-examples 目录，执行 npm i 安装依赖
执行 npm run localsite 打包，打印出下面的日志，说明构建成功

3. echarts-doc

进入 echarts-doc 目录，执行 npm i 安装依赖
修改 config/env.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口
执行 npm run localsite 打包，打印出下面的日志，说明构建成功

4. echarts-www

进入 echarts-doc 目录，执行 npm i 安装依赖
修改 config/env.localsite.js 中的地址，改成你要部署的主机 IP 和端口，我这里放在本地的 3000 端口
执行 npm run localsite 打包，打印出下面的日志，说明构建成功（这个过程比较长，耐心等待）

三、测试

我这里使用 node 的 serve 包来测试。

全局安装 serve

npm i serve -g

回到 echarts-website 目录
启动服务（-p 指定端口，默认 3000）

serve . -p 3000

访问 http://localhost:3000

四、其他

最终生成的 echarts-website 目录就是网站的根目录，包含所有文件，可以在这个目录的基础上构建 Docker 镜像，或者使用 Nginx 提供服务。

关于 Docker 和 Nginx 的用法不在本文讨论范围，感兴趣的朋友可以自己折腾。

看完了？说点什么呢

给 React 事件添加类型的几种姿势

Mon, 22 May 2023 13:23:56 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/react/annotate-types-for-react-events

本文参考了 Matt Pocock 的文章 Event Types in React and TypeScript ，有条件的可以阅读英文原版。

一、前言

用 React 和 TypeScript 开发时，会经常碰到这个报错：

当我们给不同的 DOM 元素添加事件处理函数时，onChange 中参数 e 接收到的事件类型是不同的，我们必须为e 指定正确的类型。

二、解决方案

1. 鼠标悬浮

我们把鼠标悬浮在 onChange 上，IDE 会给出相应的类型，直接复制，再将类型添加给声明的事件处理函数：

我们需要的是 ?: 后面的这部分代码。

2. 内联函数

当我们只想为 e 添加类型时，首先要知道 e 的类型是什么。

创建一个内联事件处理函数，将鼠标悬浮在参数 e 上，IDE 会给出正确的类型，选中并复制：

然后添加到我们的处理函数中：

3. 使用 `React.ComponentProps`

React.ComponentProps 是一个类型工具，用于获取组件或元素的类型。

4. `EventFor` 工具类型

第三种方案非常方便，但是如果我们只是想给 e 添加类型，有没有更优雅的写法呢？

我们可以用 TypeScript 内置的工具类型 Parameters 、NonNullable 以及索引访问来实现：

解释一下上面的代码：

React.ComponentProps<'input'>['onChange'] 在第三种方案中用过，但是这个类型包含 undefined ，需要使用 NonNullable 把它去掉；
NonNullable 用于去除某个类型中的 null 和 undefined ；
Parameters 用于获取某个函数的所有参数类型，返回一个类型数组，再使用 [0] 取出第一个参数的类型。

如此一来，我们就拿到了参数 e 的正确类型。

但是，上面这种写法有点冗杂，我们可以再进一步，封装一个工具类型：

type GetEventHandlers<
  T extends keyof JSX.IntrinsicElements,
> = Extract

type EventFor<
  TElement extends keyof JSX.IntrinsicElements,
  THandler extends GetEventHandlers,
> = JSX.IntrinsicElements[TElement][THandler] extends
  | (((e: infer TEvent) => any) | undefined)
  ? TEvent
  : never

上面这段代码需要一些类型体操的知识，这里只解释大概原理：

JSX.IntrinsicElements 是一个 interface ，其中声明了所有 HTML 元素的类型；
GetEventHandlers 接收一个元素类型，通过 Extract 提取该元素所有 onXxxx 形式的属性，也就是所有的事件：
EventFor 接收两个泛型，分别代表元素类型和事件名称，根据这两个泛型从 JSX.IntrinsicElements 中取出对应事件的处理函数的类型声明，然后通过 extends 以及 infer 关键字推断参数 e 的类型并返回。

效果：

看完了？说点什么呢

OMZ 美化

Wed, 29 Jun 2022 12:46:18 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/dev-env/omz-beautify

仅支持 MacOS / Linux / WSL

由于经常折腾开发环境，将 shell 美化过程记录一下，方便以后查阅。

效果图：

一、安装 oh-my-zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

安装成功后，之前的 .zshrc 文件会被重命名为 .zshrc.pre-oh-my-zsh ，你需要将 shell 配置迁移到新的 .zshrc 。

二、安装 spaceship 主题

1. 克隆仓库

git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

2. 链接主题目录至 oh-my-zsh

ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

3. 编辑 `.zshrc`

ZSH_THEME="spaceship"

SPACESHIP_TIME_SHOW="true" # 显示时间
SPACESHIP_USER_SHOW="always" # 显示用户名
SPACESHIP_USER_COLOR="212" # 猛男粉配色

三、安装插件

1. autojump

这个插件会根据输入的关键字进行目录联想，假设在某一时刻进入过 ~/work/test 目录。当你在终端输入 j te 时，插件会进行联想，匹配到 ~/work/test 目录，然后进入。

安装

MacOS
```
brew install autojump
```
Debian / Ubuntu
```
sudo apt install autojump
```

修改 .zshrc ，在 plugins 中添加 autojump
```
plugins=(
  git 
  autojump
)
```

2. zsh-autosuggestions

输入命令时，终端会自动提示你接下来可能要输入的命令，这时按下方向右键 → 便可输出这些命令，非常方便。

安装

git clone https://gitee.com/phpxxo/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

修改 .zshrc ，在 plugins 中添加

plugins=(
  git
  autojump
  zsh-autosuggestions
)

3. zsh-syntax-highlighting

输入命令时，错误的命令将显示为红色，正确的命令显示为绿色。

安装

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

修改 .zshrc ，在 plugins 中添加

plugins=(
  git
  autojump
  zsh-autosuggestions
  zsh-syntax-highlighting
)

看完了？说点什么呢

C 语言中输入缓冲区的坑

Sat, 16 Apr 2022 02:10:41 GMT

该渲染由 marked 生成，可能存在排版问题，最佳体验请前往：https://zb81.icu/posts/basics/pitfalls-of-input-buffer-in-c

最近在学 C，跟着《C Primer Plus》做案例的时候碰到了一个问题，导致程序陷入了死循环，代码如下：

#include 
#include "hotel.h"

int menu(void) {
    int code, status;

    printf(
        "\n%s%s\n"
        "1) Fairfield Arms           2) Hotel Olympic\n"
        "3) Chertworthy Plaza        4) The Stockton\n"
        "5) quit\n"
        "Enter the number of the desired hotel: ",
        STARS, STARS
    );

    while((status = scanf("%d", &code)) != 1 || (code<1 || code>5)) {
        printf("Enter an integer from 1 to 5, please: ");
    }

    return code;
}

这个函数的功能是，打印一个菜单供用户选择，将用户选择的选项结果返回。程序需要对错误的输入进行处理：

用户输入的不是数字
用户输入的数字不在 1-5 的范围内

如果是上面两种情况之一，则进入 while 循环，提示用户输入正确的数字。

针对第二种错误，上面的代码可以正常运行：

但是，当我们输入一个字母后，问题出现了：

出现这个 bug 的时候，我记得之前好像在哪里也碰到过，就把《C Primer Plus》的目录往前翻，翻到 4.4(printf() 和 scanf()) 那一章，找到了答案：

如果遇到一个非数字字符，scanf() 会将该字符放回输入，不会把值赋给指定变量。程序在下一次读取输入时，首先读到的就是刚刚放回的字符。

所以，while 循环条件表达式中的 scanf("%d", &code) 每次从输入中读到的都是字符 'a'，条件永远为 true，程序崩溃。

二、输入缓冲区

上面这段话有几个加粗的地方：输入。

这里的 “输入” 是啥？有什么用？其实，“输入” 指的就是输入缓冲区，这里我们只讨论行缓冲(通过换行符刷新缓冲区)。

首先，我们粗略地分析这张 gif 图片展示的输入输出的流程：

输入设备依次输入字符(键盘) -> 字符进入缓冲区 -> 按下回车 -> 输出设备依次输入字符(显示器)

如果没有缓冲区，每次按下键盘，程序会立即将刚刚输入的字符输出到显示器上，就像这样：

hheelllloo,,wwoorrlldd!!

是不是觉得非常难受？而且，由于输入的字符立即被输出，当我们不小心输错字符的时候，无法通过退格键进行修改，输入缓冲区帮助我们解决了这些问题。每输入一个字符，程序会将该字符暂时存放在某一块内存中，按下回车键，程序将这些字符作为一个块进行依次读取。

读取缓冲区字符的方式

1. scanf()

int n;
while(scanf("%d", &n) != 1) {
  printf("Enter an integer, please: ");
}

假设缓冲区中有这些字符：123abcd

scanf() 函数从缓冲区中读取字符(每读取一个，缓冲区中的字符就会少一个)，发现第一个字符是 '1'，可以转成 int，于是继续往后读取，直到遇见 'a'。然后，通过转换说明 "%d" 将 "123" 转换为 int 类型写入内存，返回成功操作的个数 1，退出 while 循环。此时，缓冲区剩下的字符是 abcd，供后续的函数读取，比如 scanf("%*s")、getchar() 等。

但是，如果缓冲区中的字符一开始就是 abcd 呢？程序会陷入死循环，因为缓冲区的字符没人读了，一直卡在那里，while 循环的条件一直成立。

所以，解决方案呼之欲出，只要我们在循环内部将这些垃圾字符读走就 ok 了。

int n;
while(scanf("%d", &n) != 1) {
  scanf("%*s");
  printf("Enter an integer, please: ");
}

我们在循环内部加了一行 scanf("%*s");，修饰符 '*' 的作用是跳过赋值操作，这行语句可以帮助我们将没用的字符读走，直到下一个空格。

其实，这种做法还有一个问题，如果缓冲区中是 abcd efg ，中间有个空格的话，循环会多跑一遍，打印的提示语句会重复。

2. getchar()

除了上面的做法，更常用、更优秀的方案是使用 getchar() 函数，该函数用于读取一个字符，并将结果返回：

char ch;
while((ch = getchar()) != EOF){
  printf("%c", ch);
}

上面代码的效果有点类似于 echo ，读取缓冲区中的字符并将其输出。

所以，我们可以修改一下之前的代码：

int n;
while(scanf("%d", &n) != 1) {
  while(getchar() != '\n') continue;
  printf("Enter an integer, please: ");
}

这一次，我们在循环内部加了一行代码 while(getchar() != '\n') continue; (这里的 continue 写不写无所谓)，将缓冲区中的垃圾字符全部读走。

注意这里的条件 getchar() != '\n' ，为什么要判断？

如果不加这个条件，程序将陷入无限循环，会一直“吞掉”用户的输入，后续的代码永远无法运行，尽管用户按了回车键(换行符 '\n' 也会存入缓冲区)。

当用户按下回车，意味着程序需要开启一段新的逻辑，所以，如果缓冲区中出现了换行符，应该退出循环，将后续的字符交给其他函数处理。

三、总结

当 scanf() 函数的赋值操作失败时，会将读取的字符放回输入缓冲区，我们需要及时地将这些无效的字符处理掉(使用 getchar() 函数)。

此外，开发终端应用时，应充分考虑用户的错误输入并妥善地处理。

看完了？说点什么呢

沉默是金

使用 next-intl 在 Next.js 应用中开启国际化

一、准备工作

二、安装和配置

1. 安装 next-intl

2. 在根目录创建 messages 文件夹，并在此文件夹下创建 zh.json 和 en.json

3. 配置 next.config.mjs

4. 创建 i18n/config.js，保存配置

5. 创建 i18n/service.js，获取、设置区域

6. 创建 i18n/request.js，返回国际化配置

7. 修改 app/layout.js

三、使用

同步服务端组件与客户端组件

异步服务端组件

四、语言切换

五、最后

动态排版

问题一

问题二

问题三

给七牛云域名添加 https 证书

一、先将域名指定到云服务器

二、配置云服务器 Nginx

三、签发证书

四、上传证书

五、将域名指向七牛云

从零搭建一个自定义明暗主题系统

一、需求

二、准备工作

1. 创建项目

2. 安装 Antd

3. 安装并配置 UnoCSS

1) 安装并引入

2) 配置文件

3) 样式重置

4) 测试

Hello, world!

三、需求实现

1. 自定义主题颜色

1) 组件引入并绑定状态

2) 和 Antd 组件同步

3) 和其他颜色同步

2. 明暗模块切换

1) 封装切换组件

2) 引入组件

3) 绑定 dark 类

Light or dark

4) 使用 CSS 变量同步颜色

5) 同步 Antd

3. 监听系统主题

1) 获取并监听系统主题

2) 结合 mode

4. 缓存至 localStorage

1) 安装 ahooks

2) 替换 useState

Light or dark

3) 背景闪烁

四、总结技术要点

攒钱！努力！

保时米给我的刺激

折腾博客主题

后续计划

ECharts 部署教程

一、准备工作

二、构建

1. echarts-handbook

2. echarts-examples

3. echarts-doc

4. echarts-www

三、测试

四、其他

给 React 事件添加类型的几种姿势

一、前言

二、解决方案

1. 鼠标悬浮

2. 内联函数

3. 使用 React.ComponentProps

4. EventFor 工具类型

OMZ 美化

一、安装 oh-my-zsh

2. 在根目录创建 `messages` 文件夹，并在此文件夹下创建 `zh.json` 和 `en.json`

3. 配置 `next.config.mjs`

4. 创建 `i18n/config.js`，保存配置

5. 创建 `i18n/service.js`，获取、设置区域

6. 创建 `i18n/request.js`，返回国际化配置

7. 修改 `app/layout.js`

2) 替换 `useState`

3. 使用 `React.ComponentProps`

4. `EventFor` 工具类型

3. 编辑 `.zshrc`