查看“︁首页”︁的源代码

<div class="main-page-container">

<!-- ========== Hero 区 ========== -->
<div class="hero-section">
    <div class="hero-title">全栈开发者的技术实验室</div>
    <div class="hero-subtitle">从 JVM 字节码到 ESP32 引脚，偶尔写诗</div>
    <div class="hero-stats">
        <span class="hero-stat">📚 {{NUMBEROFPAGES}} 页笔记</span>
        <span class="hero-stat">📝 {{NUMBEROFARTICLES}} 篇技术文章</span>
        <span class="hero-stat">✏️ {{NUMBEROFEDITS}} 次编辑</span>
    </div>
</div>

<!-- ========== 技术支柱 ========== -->
<div class="section-heading">🧱 技术支柱</div>
<div class="pillars-grid">

    <!-- 后端与分布式 -->
    <div class="pillar-card">
        <div class="pillar-icon">☁️</div>
        <div class="pillar-title"><a href="/index.php?title=Category:后端与分布式">后端与分布式</a></div>
        <div class="pillar-desc">
            数据库引擎、JVM 底层机制、分布式共识、并发模型、微服务架构。从 CRUD 到 CRDT，从单机事务到全球部署。
        </div>
        <div class="pillar-meta">涵盖 {{PAGESINCATEGORY:Database}} 篇数据库笔记 · {{PAGESINCATEGORY:JVM}} 篇 JVM 笔记</div>
        <a href="/index.php?title=Category:后端与分布式" class="pillar-link">浏览分类 →</a>
    </div>

    <!-- 系统与底层 -->
    <div class="pillar-card">
        <div class="pillar-icon">⚡</div>
        <div class="pillar-title"><a href="/index.php?title=Category:系统与底层">系统与底层</a></div>
        <div class="pillar-desc">
            Linux 内核与 eBPF、嵌入式开发、汇编语言、硬件交互。在寄存器级别理解计算机，在引脚级别驯服硬件。
        </div>
        <div class="pillar-meta">涵盖 {{PAGESINCATEGORY:Linux}} 篇 Linux 笔记 · {{PAGESINCATEGORY:Embedded}} 篇嵌入式笔记</div>
        <a href="/index.php?title=Category:系统与底层" class="pillar-link">浏览分类 →</a>
    </div>

    <!-- AI 与算法 -->
    <div class="pillar-card">
        <div class="pillar-icon">🤖</div>
        <div class="pillar-title"><a href="/index.php?title=Category:AI与算法">AI 与算法</a></div>
        <div class="pillar-desc">
            深度学习实践、本地大模型部署、经典算法与 LeetCode 题解。从反向传播到 CRDT 编码，从数学直觉到工程落地。
        </div>
        <div class="pillar-meta">涵盖 {{PAGESINCATEGORY:Algorithm}} 道算法题 · {{PAGESINCATEGORY:Deep Learning}} 篇深度学习笔记</div>
        <a href="/index.php?title=Category:AI与算法" class="pillar-link">浏览分类 →</a>
    </div>

</div>

<!-- ========== 随机翻翻 ========== -->
<div class="random-section">
    <a href="{{SERVER}}{{SCRIPTPATH}}/index.php?title=Special:Random" class="random-btn">
        🎲 随便翻翻
    </a>
</div>

<!-- ========== 双栏：最近更新 + 本周精选 ========== -->
<div class="two-column">

    <!-- 最近更新 -->
    <div class="column-box">
        <div class="column-title">🆕 最近更新</div>
        {{Special:RecentChanges/5}}
    </div>

    <!-- 本周精选 -->
    <div class="column-box">
        <div class="column-title">⭐ 本周精选</div>
        <div class="featured-article">
            <div class="featured-title"><a href="/index.php?title=Yjs_varint_encoding">Yjs varint encoding</a></div>
            <div class="featured-desc">CRDT 中的变长整数编码为何值得单独成文？因为它决定了同步时的带宽效率和解码速度。</div>
        </div>
        <div class="featured-article">
            <div class="featured-title"><a href="/index.php?title=Leveraging_Ollama_to_Build_Your_Local_LLM_Helper">Leveraging Ollama</a></div>
            <div class="featured-desc">在本地跑大模型不只是为了隐私，更是为了把 AI 变成你开发流程的一部分。</div>
        </div>
        <p style="font-size:0.8rem;color:#9ca3af;margin-top:1rem;">💡 精选文章每周手动更新</p>
    </div>

</div>

<!-- ========== 知识版图 ========== -->
<div class="stats-panel">
    <div class="section-heading" style="border:none;margin:0 0 1rem 0;">📊 知识版图</div>
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:Database}}</div>
            <div class="stat-label">数据库</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:Algorithm}}</div>
            <div class="stat-label">算法题目</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:Concurrency}}</div>
            <div class="stat-label">并发</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:HTTP}}</div>
            <div class="stat-label">HTTP 协议栈</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:Embedded}}</div>
            <div class="stat-label">嵌入式</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">{{PAGESINCATEGORY:Deep Learning}}</div>
            <div class="stat-label">深度学习</div>
        </div>
    </div>
</div>

<!-- ========== 此刻在折腾 ========== -->
<div class="status-section">
    <div class="section-heading">🛠️ 此刻在折腾</div>
    <div class="status-item"><span class="status-icon">🔬</span> Kubernetes Storage Class 调优</div>
    <div class="status-item"><span class="status-icon">🔊</span> ESP32 + MAX98357A 音频输出链路</div>
    <div class="status-item"><span class="status-icon">📖</span> 重读《Designing Data-Intensive Applications》</div>
    <div class="status-item"><span class="status-icon">🤔</span> <a href="/index.php?title=Why_float_division_is_faster_than_integer_division">为什么 float 除法比整数除法快？</a></div>
</div>

<!-- ========== 诗词角落 ========== -->
<div class="poetry-section">
    <div class="mw-collapsible mw-collapsed">
        <div class="section-heading" style="border:none;margin:0;cursor:pointer;">
            🌙 诗词角落 <small style="font-weight:normal;color:#9ca3af;">（点击展开）</small>
        </div>
        <div class="mw-collapsible-content poetry-grid">
            <div class="poetry-item"><a href="/index.php?title=五言:咏霞·其一">咏霞·其一</a></div>
            <div class="poetry-item"><a href="/index.php?title=五言:咏霞·其二">咏霞·其二</a></div>
            <div class="poetry-item"><a href="/index.php?title=七言:冬雪">七言·冬雪</a></div>
            <div class="poetry-item"><a href="/index.php?title=七言:夜路">七言·夜路</a></div>
            <div class="poetry-item"><a href="/index.php?title=相见欢:残霞">相见欢·残霞</a></div>
            <div class="poetry-item"><a href="/index.php?title=骈文:落霞赋">落霞赋</a></div>
            <div class="poetry-item"><a href="/index.php?title=蝶恋花:小夏">蝶恋花·小夏</a></div>
            <div class="poetry-item"><a href="/index.php?title=五言:初雪">五言·初雪</a></div>
        </div>
    </div>
</div>

<!-- ========== 页脚 ========== -->
<div class="main-footer">
    <p>始于某年某月 · 持续建设中 · <a href="/index.php?title=Special:Categories">浏览全部分类</a></p>
    <p style="margin-top:0.5rem;font-size:0.75rem;">
        五言：<a href="/index.php?title=五言:初雪">初雪</a> · 
        七言：<a href="/index.php?title=七言:夜路">夜路</a>
    </p>
</div>

</div>