手册
文章 标签 系列 关于
手册

next.js 中加载和使用 Web Components

HenryZ  发布于  收录于  系列 NextJS 手册 Web开发手册

由于 Next.js 默认是服务端加载模式，
所以需要在 useEffect 中 import Web 组件（仅在客户端加载的静态组件）。

示例：

import { useEffect } from "react";

function Home() {
    useEffect(() => {
        import("../public/components/my-loading.js"), [];
    });

    return (
        <>
            <my-loading></mc-loading>
        </>
    );
}

export default Home;
阅读全文
 Web组件

rust 连接字符串

HenryZ  发布于  收录于  系列 Rust手册

在 Rust 中，有几种方法可以连接字符串。你可以使用 + 运算符，format! 宏或 push_str() 方法。下面是一些示例代码：

直接测试代码可以使用官方提供的 rust playground

fn main() {
    let s1 = "Hello";
    let s2 = "World";

    // 使用+运算符连接字符串
    let result = s1.to_string() + " " + s2;
    println!("{}", result); // 输出: "Hello World"

	//注意，如下方式是错误的：
    // let result = s1 + " " + s2;
    // Error:
	//    `+` cannot be used to concatenate two `&str`strings`
	//    note: string concatenation requires an owned `String` on the left

    // 使用format!宏连接字符串
    let result = format!("{} {}", s1, s2);
    println!("{}", result); // 输出: "Hello World"

    // 使用push_str方法连接字符串
    let mut result = s1.to_string();
    result.push_str(" ");
    result.push_str(s2);
    println!("{}", result); // 输出: "Hello World"
}
阅读全文

应用容器、虚拟机工具

HenryZ  发布于  收录于  系列 开发者工具
阅读全文
 容器, 虚拟机

next.js export 静态 Image src 图片路径

HenryZ  发布于  收录于  系列 NextJS 手册

默认情况，当 export 静态网站时，图片因为路径问题无法正常显示。
处理方法：自定义一个 image loader

  1. next.config.js 中添加一条配置
const nextConfig = {
    images: {
        loader: "custom",
    },
};
  1. 项目页面中添加一个函数
function imageLoader({ src }) {
    return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY (in /public dir)
}
  1. 使用 Image 标签时，添加一个 loader 参数
<Image
	src="icon.png"
	loader={imageLoader}
	width={14}
	height={14}
	alt="icon"
/>

参考：

阅读全文
 NextJS

Rust WASM 获取当前网页的URL

HenryZ  发布于  收录于  系列 Rust手册 Web开发手册

Rust 写的 WASM 放在网页端使用，想在Rust代码中获悉当前网页的网址该如何实现？

首先要在 rust 项目的依赖文件中启用 web-sys 的 Window 和 Document 特性，示例：

Cargo.toml

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3.66"
features = ["Document", "Window"]

然后使用（类似JS的方式访问）浏览器API接口，示例：

阅读全文
 WASM

CSS 选择器 父级元素

HenryZ  发布于

有时候，某个父级元素没有特征，需要依靠子元素来定位父级元素。

css select parent element/node/tag by child elements

可使用 CSS 函数式伪类 :has() 来实现。

示例1：

<div>
	<li>
		<span class="active"></span>
	</li>
</div>

li:has(> span.active) { /* 会选择 li tag */ }
div:has(li > span.active) { /* 会选择 div tag */ }

示例2:

阅读全文
 CSS, Web前端

JS 捕获键盘快捷键（组合键）

HenryZ  发布于
  • 使用 onkeydown (or onkeyup) 事件，而不是 onkeypress
function handleKeyEvent(e) {
	// ctrl/meta + enter
	if (e.keyCode == 13) {
	// if (e.key == "Enter") {
		if (e.ctrlKey || e.metaKey) {
		alert("ctrl/meta + enter")
		}
	}
}

document.onkeydown = KeyPress;
  • Alt key, e.altKey
  • Ctrl + Z, keyCode==90 and e.ctrlKey
阅读全文

Web 网页随浏览器切换亮暗主题色

HenryZ  发布于  收录于  系列 Web开发手册

使用 color-scheme 让网页随浏览器自动切换亮暗主题色（dark/light themes）

HTML:

<meta name="color-scheme" content="light dark">

CSS:

:root {
	color-scheme: light dark; /* both supported */

	/* defaults to light theme */
	--text-color: black;
	--bkg-color: white;
}



@media (prefers-color-scheme: dark) {
	:root{
	  /* for dark theme */
		--text-color: white;
		--bkg-color: black;
	}
}

body {
  background: var(--bkg-color);
  color: var(--text-color);
}

logo / favicon 图片

<html>
<head>
<link rel="icon" href="/favicon-light.png" type="image/png" media="(prefers-color-scheme: light)"/>
<link rel="icon" href="/favicon-dark.png" type="image/png" media="(prefers-color-scheme: dark)"/>
</head>
</html>
阅读全文
 HTML, CSS