随笔：草稿箱和todolist

发布于 2026-09-04 · 更新于 2026-09-04 23:05

随想随笔

草稿箱

前端开发串讲（以 Astro 框架为例）

文件树如下

第一层是内容Markdown、MDX和数据；第二层是remark/rehype插件，负责把底层内容翻译成浏览器可渲染的 HTML——举个很经典的例子：remark 把 Markdown 里的 [^] 脚注语法翻译成标准脚注 HTML，rehype-popover 再把标准脚注改造成”悬浮框的零件”（触发器按钮 + 内容模板）⚠️——也就是你正在看的这个悬浮框本身⚠️。再往上一层是第三层的组件与模板，翻译好的 HTML 在这里套进页面骨架——这些写法并非自创，而是 Astro 定下的规矩，长成最终的样子。而这套规矩本身，就是第四层的Astro框架——它定义并执行了从第一层到第三层的全部规范。而这些规范执行完毕后，npm run build 的终点是第五层的dist产物——整个流水线最终沉淀为纯 HTML、CSS、JS，也就是浏览器唯一能消化的形态。第六层是服务器——dist/ 产物被GitHub-Pages部署推到线上，其他人才能访问。最后一层是浏览器——用户访问站点时，它向服务器请求页面，解析 HTML、加载 CSS、执行 JS，把内容最终画出来。

相关知识

整体上，这些概念可以这样串起来理解：你写 Markdown/MDX 内容 → 框架按”内容集合”的规则组织 → 构建时输出成静态 HTML（或视需要走 SSR）→ 部署到线上 → 页面用组件化方式搭建、加一些动画 → 最后靠良好的 SEO 让人搜得到。

一、语言层

JavaScript / TypeScript:绝大多数现代博客框架的底层语言(Hexo、Next.js、Astro、VitePress 都是)
Go:Hugo,编译型语言,构建速度是它的核心卖点
Ruby:Jekyll,历史悠久,GitHub Pages 原生支持
HTML/CSS:无论选什么框架,最终产出的都是这三样,自己纯手撸本质就是直接写这三样 + 用 JS 加交互

二、框架层（个人博客）

静态站点生成器（SSG）—— 主流选择

Hugo — Go 语言写的，编译速度极快，适合内容多的博客，主题生态成熟
Hexo — Node.js，中文社区用得很多，插件和主题丰富，配置简单
VitePress — Vue 官方出品，基于 Vite，速度快，也常用来做文档站
VuePress — VitePress 的前身，同样是 Vue 生态，功能更成熟但速度不如 VitePress
Jekyll — Ruby 写的，GitHub Pages 原生支持，历史最悠久之一
Astro — 近两年很火，“零 JS 默认”理念，性能极佳，支持多框架混用
Docusaurus — Meta 出的，React 生态，偏文档站但也能做博客

全栈框架（更灵活，也更重）

Next.js — React 生态，SSG/SSR 都支持，适合想要更多自定义交互的博客
Nuxt.js — Vue 版的 Next.js

自己纯手撸

直接用 React/Vue + 打包工具（Vite/Webpack）从零搭，完全自己控制路由、内容渲染逻辑（比如自己写 Markdown 解析、自己设计数据结构）。灵活度最高，但要自己造很多轮子（RSS、SEO、图片优化等）。

三、内容层

Markdown

一种轻量级标记语法，用 # 标题、**加粗**、- 列表 这类简单符号写文本，框架会自动把它转成 HTML。写博客文章的标准格式，几乎所有博客框架都支持。

MDX

“Markdown + JSX” 的缩写。让你在 Markdown 文件里直接嵌入 React 组件，比如：

# 我的文章

这是普通文字，下面插入一个交互图表：

<InteractiveChart data={...} />

继续写文字...

适合需要在文章里插入自定义组件（图表、代码演示、Demo）的场景。Next.js、Astro、Docusaurus 都原生支持。

内容集合（Content Collections）

Astro 提出并流行开的概念：把同类内容（比如所有博客文章）归到一个”集合”里，用 schema（比如 Zod）定义每篇文章必须有哪些字段（标题、日期、标签等），框架在构建时自动做类型校验。好处是内容格式统一、写错字段会报错，而不是上线后才发现。

组件化（Componentization）

把 UI 拆成一个个可复用的小模块（组件），比如”导航栏组件”、“文章卡片组件”、“评论区组件”。React/Vue 的核心思想。好处是改一处、处处生效，代码不重复。

动画（Animation）

页面交互效果，比如页面切换过渡、鼠标悬停效果、滚动触发的渐入效果。常用库：Framer Motion（React）、GSAP、CSS transition/animation。博客里适度加一点能提升体验，但不是必需。

Frontmatter

每篇文章头部的元信息(标题、日期、标签、摘要),这是内容集合能自动校验的基础

四、渲染方式

SSG（Static Output /静态输出）

构建时（build time）就把所有页面提前生成成纯 HTML 文件，用户访问时直接返回现成文件，不需要服务器实时计算。速度快、可以放在任何静态托管上（GitHub Pages、Vercel、Netlify）。博客类内容基本都适合这种方式，因为内容不常变。

SSR（Server-Side Rendering，服务端渲染）

与静态输出相对：每次用户请求页面时，服务器实时生成 HTML 再返回。适合内容频繁变化、需要根据用户身份显示不同内容的场景（比如登录后的个性化页面）。Next.js 支持 SSG 和 SSR 混用。个人博客一般用不到 SSR，除非有评论系统实时更新之类需求。

五、部署方式

部署（Deployment）

把构建好的网站发布到公网让别人能访问的过程。常见方式：

GitHub Pages:免费、和 GitHub 仓库联动,纯静态站首选
ercel / Netlify:push 代码自动构建部署,对 Next.js/Astro 支持最好,也有免费额度
自建服务器+ Nginx:除非有特殊需求(自定义域名逻辑、想练手运维),否则没必要

对比维度	🎯 选调生	国考	省考
本质定位	省委组织部选的后备干部苗子，重点培养	中央垂直系统招人（国税、海关、部委）	本省各层级机关招普通公务员
报考门槛 ⭐	最高：仅应届、限双一流/本省高校，需党员/学生干部/校级荣誉	应届+往届，大专起，不限党员干部	应届+往届，部分限户籍
应届限制 ⭐	绝大多数只招当年应届，毕业即失去资格	往届可报	往届可报
工资来源	当地财政	中央财政（工资相对更高更稳）	地方财政
下基层 ⭐	强制2年（乡镇/街道），档案在组织部	无强制，报哪去哪	无强制
晋升空间 ⭐	最大：组织部跟踪培养，转正定级更高，提拔有政策倾斜	中：靠单位内部晋升	中：靠单位内部晋升
竞争难度 ⭐	最小（门槛筛掉大部分人）	最卷（热门岗几千比1）	中等，三不限岗很卷
报考时间	各省不同，与国省考错开，可多线兼报	10月报名，11-12月笔试	次年2-3月笔试
适合人群	应届+条件达标+愿下基层+走党政晋升	想进垂直系统、愿全国流动	已毕业、想留本市稳定上班

前端经验：sol 前端能力一般，可以先让 codex 生成视觉效果图再移植开发，或者先写 prompt 去 AIStudio 的 build 生成 apps，然后下载源码丢给 codex，其次是让 grok4.6 先生成前端 ui mvp 再丢给 codex 后续开发也行，以及还能选 Sonnet5 性价比高效果比 GPT 强很多很多

todo

名词解释

思路实现

草稿箱