编程笔记
文章 标签 系列 关于
编程笔记

CSS flex 三栏-中间元素自动最大宽度或高度

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

使用 flex 布局，两端元素默认内容宽度，中间元素自动扩充到最大宽度。
|left| <- center -> |right|

HTML

<div class="h">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

<br />

<div class="v">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

CSS

div {
  border: 1px solid #ccc;
}

.h {
  /* 水平/横向 */
  display: flex;
  flex-direction: row;
}

.v {
  /* 垂直/纵向 */
  display: flex;
  flex-direction: column;
  height: 300px; /* 需要设置固定高度 */
}

.middle {
  flex: 1 1 auto; /* flex-grow | flex-shrink | flex-basis */
  align-items: center; /* 元素水平居中 */
  text-align: center; /* 文本水平居中 */
  align-content: center; /* 元素垂直居中 */
}
.left,
.right {
  /* nothing */
}
阅读全文
 Web前端

pandoc 模板基本语法和变量

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

转换命令示例： pandoc --standalone --template template.html doc.md -o doc.html

官方文档： https://pandoc.org/MANUAL.html#templates

模板文件基本语法介绍：

在 $-- 和行尾之间的任何内容都将被视为注释，不会出现在输出结果中。

$-- comment line

在模板中，可以使用 $…$ or ${…} 作为变量和控制结构的标记。这两种样式也可以在同一模板中混用，但每种情况下的开头和结尾定界符必须匹配。开头定界符后面可以跟随一个或多个空格或制表符，这些将被忽略。结尾定界符前面可以有一个或多个空格或制表符，这些也将被忽略。

阅读全文
 Pandoc

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