PPysolate SpineREAD THE CODE · UNDERSTAND THE SYSTEM
课程与章节
源码索引 / CURRENT IMPLEMENTATION

site/src/pages/code/[id].astro

22 行 · 点击行号可定位;函数链接随声明位置更新,不手填行号。

---
import { Code } from 'astro:components';
import Layout from '../../layouts/Docs.astro';
import sources from '../../../.generated/sources.json';
export function getStaticPaths() { return sources.map(source=>({params:{id:source.id},props:{source}})); }
const { source } = Astro.props;
const headings = source.symbols.map(s=>({depth:2,slug:s.id,text:s.label}));
const transformers = [{ line(node, line) {
  node.properties.id = `L${line}`;
  node.children.unshift({type:'element',tagName:'a',properties:{href:`#L${line}`,className:['line-number'],'data-line':line,'aria-label':`第 ${line} 行`},children:[]});
  for (const s of source.symbols.filter(s=>s.line===line)) {
    node.children.unshift({type:'element',tagName:'span',properties:{id:s.id,className:['symbol-anchor'],'aria-hidden':'true'},children:[]});
  }
}}];
---
<Layout title={source.name} headings={headings}>
  <div class="eyebrow"><a href="/code/">源码索引</a> / CURRENT IMPLEMENTATION</div>
  <h1 class="filename">{source.name}</h1>
  <p class="lede">{source.code.split('\n').length-1} 行 · 点击行号可定位;函数链接随声明位置更新,不手填行号。</p>
  {source.symbols.length>0 && <details class="function-jump"><summary>跳到函数 / 声明</summary><nav>{source.symbols.map(s=><a href={`#${s.id}`}>{s.label}<small>L{s.line}</small></a>)}</nav></details>}
  <div class="source-code numbered"><Code code={source.code.replace(/\n$/,'')} lang={source.lang} theme="github-dark-default" wrap={true} transformers={transformers}/></div>
</Layout>