T11d 代码 Tab 切换冒烟测试

#元 #测试 共 636 字 约 2 分钟

T11d 渲染验证。展示 tab shortcode 与代码块组合时的常见三种场景。 如果切换 tab 后代码块没有跟随切换,说明 tab.css 的 :checked+label+.shortcode-tab-item 选择器没生效。

1. 跨平台命令切换(macOS / Windows / Linux)

最常见的用法 —— 同一个目的,不同 shell 给不同命令。

podman compose exec openclaw-gateway \
  node dist/index.js channels login --channel feishu
podman compose exec openclaw-gateway `
  node dist/index.js channels login --channel feishu
sudo podman compose exec openclaw-gateway \
  node dist/index.js channels login --channel feishu

使用配套 APP 扫描生成的二维码进行后续配置即可。

2. 多语言代码示例切换(同一算法)

适合「同一个概念,不同语言怎么写」的科普场景。

def gcd(a: int, b: int) -> int:
    while b:
        a, b = b, a % b
    return a
function gcd(a: number, b: number): number {
  while (b !== 0) {
    [a, b] = [b, a % b];
  }
  return a;
}
func gcd(a, b int) int {
    for b != 0 {
        a, b = b, a%b
    }
    return a
}
fn gcd(mut a: u64, mut b: u64) -> u64 {
    while b != 0 {
        let t = b;
        b = a % b;
        a = t;
    }
    a
}

3. 多配置格式切换(YAML / TOML / JSON)

「随你喜欢哪种格式」型的配置示例。

server:
  host: 0.0.0.0
  port: 8080
channels:
  - name: feishu
    enabled: true
[server]
host = "0.0.0.0"
port = 8080

[[channels]]
name = "feishu"
enabled = true
{
  "server": { "host": "0.0.0.0", "port": 8080 },
  "channels": [{ "name": "feishu", "enabled": true }]
}

4. tab + highlight shortcode(带 title 条)

如果想给代码块加个标题条(Hugo highlight shortcode 自带),把 fenced block 换成 {{< highlight >}} 即可:

.env.development
DATABASE_URL=postgres://localhost:5432/inkstone_dev
DEBUG=true
LOG_LEVEL=debug
.env.production
DATABASE_URL=postgres://prod-db:5432/inkstone
DEBUG=false
LOG_LEVEL=warn

自检清单

  • tab 切换:点不同 label,代码块跟随切换(CSS only,不依赖 JS)
  • 选中态:当前 tab 的 label 下有 2px 下划线
  • 嵌套:fenced code block 与 {{< highlight >}} 都能正常渲染
  • emoji label:🍎 / 🪟 / 🐧 正常显示
  • position 属性:第 3 节用 position="start",labels 应靠左对齐
  • 暗色模式:切到 dark theme 后,下划线颜色对调(--color-shortcode-tab-label-bottom