写下一篇简短的出行手记，留存当时清冽的空气与高原阳光。

晨曦微露的金山

清晨五点半，气温逼近零度。呵出的白气在镜头遮光罩上凝成细碎的水雾，手指在快门线上有些发僵。

随着地平线第一缕晨光穿透云层，主峰山尖开始从冷灰色泛出金红，再到整片山体如同被点燃一般璀璨——这就是常说的“日照金山”。在按下快门记录的同时，其实双眼所见的辽阔感远胜于任何照片。

“山就在那里，不悲不喜，静候着每一个路过的人。”

旷野公路的独行漫步

高原的公路笔直地伸向天际，两旁是枯黄苍凉的草甸与安详啃草的牦牛。远离了网络的喧嚣与各种消息通知的轰炸，人的思考反倒变得澄澈起来：

摄影器材随行备忘

轻量化出行是长途跋涉的真理，这次的行囊极简：

1. 机身：全画幅轻量机身
2. 镜头：24-70mm 挂机变焦（兼顾风光与人文小景）
3. 配件：CPL 偏振镜、两块备用电池、碳纤维便携三脚架

归途重新投入工作，心里多了一块平稳的锚点。愿我们既能专注眼前的代码与生活，也有随时奔赴山海的坦然。

本文是一份全要素排版速查指南，演示常用样式在真实场景中的呈现效果。

1. 原生 Markdown 基础元素

标题与层级

在文章中合理组织二级、三级标题，右侧的粘性目录（TOC）会自动生成并跟随滚动高亮。

引用与列表

读书破万卷，下笔如有神。好的排版如润物细无声，让读者的视线舒适停留。

• 无序列表项：适合陈列同层级要点
  • 嵌套层级子项
• 待办清单：
  • 完成博客基础设施搭建
  • 调优自定义手帐主题
  • 撰写系列深度技术博文

2. FlatPaper 手帐 Note 便签组件

FlatPaper 支持六种不同语意的彩色便签。当提供标题参数时，便签还会自动渲染为原生 <details> 可折叠手风琴！

3. 选项卡 Tabs 切换组件

当需要对比不同环境下的命令或代码时，使用 Tabs 是最省空间且直观的方案：

1

npm install hexo-theme-flatpaper --save

1

pnpm add hexo-theme-flatpaper

1

yarn add hexo-theme-flatpaper

4. 表格排版示例

合理组合以上排版元素，你的手账博客也能兼具极高的美感与实用性！

本文梳理了在实际开发中总结的前端工程化三大支柱：规范约束、状态流转与可复用组件抽象。

一、规范先于编码

好的工程化始于统一的团队共识。通过工具链把共识变成自动化检查，比人工 Code Review 更加可靠：

• ESLint & Prettier：语法风格与代码质量底线，杜绝无意义的格式分歧。
• Husky & Lint-Staged：在 git commit 时拦截不合规的代码。
• Commitlint：统一遵循 Angular 规范的 Conventional Commits（feat:, fix:, refactor:）。

1
2
3
4
5
6
7

// package.json scripts 规范
{
  "scripts": {
    "lint": "eslint src --ext .vue,.js,.ts",
    "format": "prettier --write src/"
  }
}

二、Vue 3 组合式 API 的设计权衡

Vue 3 的 Composition API 赋予了开发者极大的自由度，但自由往往也伴随着混乱的风险。

下面是一个实用的窗口尺寸监听 hook 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowResize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const update = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => window.addEventListener('resize', update))
  onUnmounted(() => window.removeEventListener('resize', update))

  return { width, height }
}

三、结语

工程化的终极目标从来不是堆砌前沿工具，而是以最低的心智负担交付最高质量的产品。在开发过程中多做一次抽象复盘，未来就能少打几次补丁。

这篇文章记录下整个站点的搭建历程，包括自定义域名配置、双分支协作流以及主题特性的调优要点。

为什么选择 FlatPaper 主题？

市面上大部分技术博客主题大多走极简科技风或 Material Design，但看多了容易产生视觉疲劳。FlatPaper 的不同之处在于：

• 纸张质感：页面底色微黄，带有细微的纸张噪点与撕纸毛边效果。
• 便签与胶带元素：文章标签像手撕胶带，提示块（Note）像随手贴上的便签纸。
• 安静的交互：没有过于浮夸的动效，阅读时注意力能完全集中在文字本身。

核心架构与 Git 双分支工作流

在将博客托管到 GitHub Pages 时，一个常见痛点是：编译后的静态网页与未编译的 Hexo 源码容易混在一起。

本站采用了优雅的双分支管理方案：

日常更新发布只需一行命令：

1
2

# 本地编译并一键发布上线
hexo clean && hexo g --config _config.yml,_config.flatpaper.yml && hexo d --config _config.yml,_config.flatpaper.yml

自定义域名与 CNAME 配置

绑定自己的域名（如 www.vueweb.cn）时，最稳妥的做法是将 CNAME 文件放在 source/CNAME 下：

1

www.vueweb.cn

这样每次 Hexo 编译时，都会自动将 CNAME 复制到生成的 public/ 根目录下，不会因为执行了 hexo clean 而被意外清除导致域名解绑。

总结

一个舒服的写作环境能极大提升记录的欲望。接下来本站会围绕前端工程、日常踩坑和设计思考持续更新，欢迎订阅 RSS 一同交流。