Blogkitchen-sink
META · 排版试验场

组件厨房

这一页把站点的全部排版与交互组件过一遍:写新文章前来这里对照, 加新组件后先在这里补一个用例。🚀

双链也是一等公民:像 读懂 FLASH 这样直接引用另一篇, 被引用的一侧会自动长出「反向链接」面板;指向不存在笔记的链接 渲染成死链样式(不炸构建):一篇还没写的笔记

§1Markdown 基础

正文是衬线的(Source Serif 4 + Noto Serif SC),加粗斜体行内代码链接删除线,以及 emoji 短码 ✨ 📷 🎻。 中英混排由 remark-cjk-friendly 处理,脚注看这里1,还有一个长一点的脚注2

这是普通引用(blockquote),保持安静的样子。

普通表格自动获得横向滚动容器与 .tbl 样式:

方案首屏 JSCJK 搜索结论
lunr(旧站)全量索引下载无分词,搜不到弃用
Pagefind分块按需内建支持采用

§2代码块

带文件名、行高亮 {2} 与词高亮:

train.py
optimizer = AdamW(model.parameters(), lr=3e-4)
scheduler = cosine_with_warmup(optimizer, warmup=500)   # 高亮这一行
for batch in loader:
    loss = model(batch).loss
    loss.backward()

diff 标注([!code ++] / [!code --]):

ts
export function siteMarkdown(opts?: Opts) {
  const plugins = [remarkCjkFriendly, remarkMath]; 
  const plugins = [remarkCjkFriendly, remarkGemoji, remarkMath]; 
  return { remarkPlugins: plugins };
}

长代码默认折叠(collapse):

deploy.sh展开 · expandCollapse
bash
#!/usr/bin/env bash
set -euo pipefail
pnpm build
pagefind --site dist
ossutil sync dist/ oss://longtimenohack --update --delete \
  --meta Cache-Control:max-age=300
ossutil sync dist/_astro/ oss://longtimenohack/_astro/ --update \
  --meta Cache-Control:max-age=31536000,immutable
echo "done."

§3数学

行内 θL(θ)\nabla_\theta \mathcal{L}(\theta) 与块级公式(选中复制会得到 TeX 源码):

Lrecon=rRC^(r)C(r)22+λLeik\mathcal{L}_{\text{recon}} = \sum_{r \in \mathcal{R}} \left\lVert \hat{C}(r) - C(r) \right\rVert_2^2 + \lambda\, \mathcal{L}_{\text{eik}}

§4图与排版

渐变示意图

单图 + 题注:点击可放大(medium-zoom)。

宽幅示意

wide 图突破正文列宽,用于全景/时间线大图。

§5流程图与手绘

graph LR
  A[Markdown / MDX] --> B{remark<br/>rehype}
  B --> C[静态 HTML]
  B -.WIKI=1.-> D[inkstone 编辑层]
  C --> E[(阿里云 OSS)]
渲染管线手绘图
Excalidraw 导出 SVG 直接嵌入;暗色主题下自动反色。

§6视频

本地视频:预载 metadata,海报图先行。
B 站嵌入(lazy iframe)。

§7交互 Demo

Demo · 方波的傅里叶叠加
Demo · 方波的傅里叶叠加
k = 3

拖动滑块增加奇次谐波项数,正弦叠加逐渐逼近方波 —— demo 模块与文章同目录(wave.ts), 读取全局 CSS 变量,自动跟随板块 accent 与明暗主题。

§8学术组件

StreetSurf— Extending Multi-view Implicit Surface Reconstruction to Street Views
surfacestreet-viewarXiv 2023 · Jianfei Guo et al. · arXiv · Code
城市级街景的多视图隐式表面重建,视角受限、尺度悬殊。
解耦近景/远景/天空的分层表示 + 面向街景的采样与初始化策略。

关键词徽章:SDF NeRF 3DGS plain

  1. 写作:本地 MDX 或 wiki 模式所见即所得
  2. 构建:GitHub Actions → astro build → pagefind
  3. 发布:增量同步阿里云 OSS
PJLab-ADG/neuralsimneuralsim: 3D surface reconstruction and simulation based on 3D neural rendering.Python★ 671⑂ 39

Footnotes

  1. 悬停脚注编号即可预览内容,无需跳转 —— 移动端点击仍可跳到文末。

  2. 脚注里也可以有 代码加粗,甚至数学 eiπ+1=0e^{i\pi}+1=0

输入关键词,全站正文即刻可搜(中文分词友好)。
    ↑↓ 选择 · Enter 打开 · Esc 关闭Pagefind