Devlog 站点样式演练 #2（组件与可读性）

本篇继续覆盖更多可视元素，用于全站样式核验。跳转到可访问性检查。

代码与界面示意 图 1：代码/界面混排

交互式折叠（Accordion）

为什么我的构建产出与开发预览不同？

常见原因：不同 NODE_ENV、Tailwind content 范围漏配、或 CSS 顺序冲突。

文件树

astro.config.mjs
package.json
文件夹src
- 文件夹components
  - Header.astro 一个重要文件
  - Title.astro
- 文件夹pages/
  - …

步骤示例

将组件导入到 MDX 文件中：

import { Steps } from '@astrojs/starlight/components';

用 <Steps> 将你的有序列表包裹起来。

天狼星，织女星，参宿四

同步选项卡

一些恒星：

猎户座
双子座

参宿五，参宿七，参宿四

一些系外行星：

猎户座
双子座

HD 34445 b，格利泽 179b，Wasp-82 b

代码块：标题 / 行高亮 / 注释标记

export function Card({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-2xl shadow-lg p-6 bg-card/60 backdrop-blur">
      <h3 className="text-xl font-semibold">{title}</h3> {/* [!code highlight] */}
      <div>{children}</div>
    </div>
  )
}
// TODO: 支持 asChild 渲染  // [!code warning]

export function mark(text: string, q: string) {
  if (!q) return text;
  const re = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "ig");
  return text.replace(re, "<mark>$1</mark>"); // [!code highlight]
}

混合语法高亮（CSS-in-JS / Tailwind 类）

export const Badge = ({ ok = false }) => (
  <span
    className={
      "inline-flex items-center px-2 py-0.5 rounded " +
      (ok ? "bg-green-500/20 text-green-300" : "bg-yellow-500/20 text-yellow-300") // [!code highlight]
    }
  >
    {ok ? "OK" : "Pending"}
  </span>
);

代码组（多语言切换）

export const clamp = (n: number, a: number, b: number) => Math.min(b, Math.max(a, n));

def clamp(n: float, a: float, b: float) -> float:
    return min(b, max(a, n))

pub fn clamp(n: f64, a: f64, b: f64) -> f64 { b.min(a.max(n)) }

Diff：Tailwind 类名收敛

.btn { @apply px-3 py-1 rounded-lg bg-purple-600 text-white hover:bg-purple-500; }
.btn { @apply px-3 py-1 rounded-lg bg-accent-600 text-white hover:bg-accent-600/90; }

终端：脚本与输出

rimraf .astro dist && astro build
# 输出略……

可访问性检查

检查项	结果	说明
对比度	✅	文字≥4.5:1
焦点环	✅	自定义 `:focus-visible`
语义标签	✅	按钮/链接语义明确

统一按钮风格
代码组语言标签可见
暗色模式下图片偏灰（待调 curves）

额外：可以用 <span style={{color:'var(--color-accent-600)'}}>自定义色</span> 对行内关键字着色；
对被删除/新增的文案可用 <del>删除</del> / <ins>新增</ins> 做“字符串标记”。

结论

此篇聚焦可读性与一致性，下一篇将验证搜索与分页的交互状态样式。