坤の技术手记

小站搭建记录：动漫壁纸与透明卡片

Tue, 13 Oct 2026 10:03:00 GMT

设计起点

小站以余弦博客使用的 Koharu 主题为基础，保留原有的导航、文章列表、分类、归档和阅读目录。

在这个基础上加入四套动漫壁纸，以及覆盖在壁纸上的玻璃卡片。图片全部由本站提供，访问时不需要等待壁纸来源网站。

这次的定制

首页壁纸可以切换：海贼王、火影忍者、奥特曼、死神。
壁纸偏好保存在浏览器中，切换页面后继续沿用。
浅色与深色模式都有对应的卡片背景。
文章正文的底色比列表卡片更实，保证代码和公式的可读性。
保留全文搜索、目录、代码复制、分类、标签、归档和 RSS。
关闭示例统计、音乐与在线编辑配置，日常内容通过 Git 管理。

以后从哪里维护

文件或目录	内容
`config/site.yaml`	名称、简介、导航、分类、友链
`src/content/blog/`	文章 Markdown
`src/pages/about.md`	关于页面
`public/img/anime/`	动漫壁纸与缩略图
`src/constants/anime-wallpapers.ts`	壁纸名称、路径与顺序
`src/styles/theme/anime-glass.css`	透明卡片和背景样式

文章的固定链接与源码都可以保留，未来迁移到其他静态托管服务时也不需要重新录入内容。

开源来源

感谢 Koharu 与余弦の博客。主题原始许可证与上游说明保留在源码中，本站定制样式独立于主题核心文件，便于后续维护。

Markdown 排版实验室：代码、公式与图表

Tue, 13 Oct 2026 10:02:00 GMT

这是一篇排版示例

这篇文章用于展示技术博客的常见排版。可以下载本页的 Markdown 源文件，复制需要的写法，再删除这篇示例。

代码块

代码块后写上语言名称，就能自动高亮。代码区域也支持复制与全屏查看。

BinarySearch.java

public static int binarySearch(int[] values, int target) {
    int left = 0;
    int right = values.length - 1;
    while (left <= right) {
        int mid = left + (right - left) / 2;
        if (values[mid] == target) return mid;
        if (values[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1;
}

代码中的区间是闭区间 [left, right]，循环条件对应 left <= right。排序数组是使用这段算法的前提。

数学公式

行内公式使用一对美元符号：折半查找的时间复杂度是 O(log⁡n)O(\log n)O(logn)。

独立公式使用两对美元符号：

∑k=1nk=n(n+1)2\sum_{k=1}^{n} k = \frac{n(n+1)}{2}k=1∑nk=2n(n+1)

对比表格

方法	前提	时间复杂度
顺序查找	无需排序	O(n)O(n)O(n)
折半查找	有序、支持随机访问	O(log⁡n)O(\log n)O(logn)

流程图

flowchart TD
  A[写下 Markdown] --> B[本地预览]
  B --> C{内容检查通过？}
  C -->|修改| A
  C -->|通过| D[提交到 Git]
  D --> E[构建并部署]

提醒与折叠内容

技术笔记最好记录版本、前提和验证方式。下次回看时，这些信息比单独的一段命令更有用。

+++ 点击展开一段补充说明

可以把推导细节、长输出或补充代码放进折叠块，让主线更容易阅读。

+++

让文章容易找到

每篇文章设置一个简短描述、一个主要分类和几个准确标签。目录跟随标题层级生成，分类和标签页面在构建时自动更新。

用 Git 发布一篇新的技术笔记

Tue, 13 Oct 2026 10:01:00 GMT

文章放在哪里

博客文章位于 src/content/blog/。可以直接新建 Markdown 文件，也可以运行主题提供的新建命令：

pnpm koharu new post

标题可以使用中文。建议给 link 设置稳定的英文短名，这样以后修改标题也不会改变文章链接。

一篇文章的模板

新建 src/content/blog/my-first-note.md：

---
title: 我的第一篇技术笔记
date: '2026-10-13 20:00:00'
link: my-first-note
description: 用一句话介绍这篇文章讲什么。
cover: /img/anime/naruto-thumb.webp
categories: [技术笔记]
tags: [Java, 学习笔记]
draft: false
---

在第二个 --- 下面开始写正文即可。draft: true 的文章只会出现在本地开发环境，正式构建不会发布。

在本地检查

首次拿到源码后，安装依赖，再启动本地服务：

corepack enable
pnpm install --frozen-lockfile
pnpm dev

浏览器打开终端给出的地址。发布前执行：

pnpm check
pnpm build

提交到 Git

git add src/content/blog public/img config/site.yaml
git commit -m "docs: add my first note"
git push

推送到 main 后，GitHub Actions 会自动更新博客。 正式域名是坤の技术手记，无需再手动上传网站文件。

在仓库的 Actions 页面可以查看发布进度。流程依次完成依赖安装、路径测试、类型检查、生产构建和 Pages 部署；绿色成功标记表示这次更新已发布。若流程失败，打开失败的步骤查看原因，修正后重新提交即可。

仓库已经在 Settings → Pages 中选择了 GitHub Actions，发布工作流位于 .github/workflows/pages.yml。config/site.yaml 的 site.url 为 https://kun.zhuoruan.xyz，自定义域名使用根路径，导航、图片、字体、RSS 和搜索均随配置生成。

如果使用早先的 Sites 地址，那个地址仍通过 Sites 的发布流程单独更新。

图片和壁纸

文章图片放在 public/img/，正文中这样引用：

![图片说明](/img/my-project.webp)

四套壁纸在 public/img/anime/；壁纸名称与路径在 src/constants/anime-wallpapers.ts。替换文件后重新构建即可。

常用文章属性

属性	用途
`link`	稳定的文章 URL
`updated`	最近更新时间
`sticky: true`	首页置顶
`draft: true`	草稿，不进入正式构建
`cover`	列表卡片封面
`categories`	分类，可使用多级分类
`tags`	标签

写作时先用简单的结构，等内容变多以后再细分分类。

Hello，新世界

Tue, 13 Oct 2026 10:00:00 GMT

从这里开始

欢迎来到 坤の技术手记。

这是小站的开站示例文章，可以随时改成自己的第一篇笔记，或者直接删除。现在先把这个属于自己的地方搭好，之后再一点点写进真正的探索。

记录代码，也收藏热爱。

小站的几个角落

技术笔记：整理概念、代码与思路。
工具与部署：记录环境配置、Git 和服务器实践。
站点手记：保存更新记录和项目想法。

文章太多时，可以用导航里的搜索、分类、标签和归档找到它们。

换一个喜欢的世界

首页提供四套壁纸：海贼王、火影忍者、奥特曼与死神。点「换个世界」里的名字即可切换，下次访问时会记住当前浏览器的选择。

透明卡片负责保留壁纸的氛围，文章正文负责让阅读安静下来。也可以在右上角切换明暗模式。

下一篇，从一段 Markdown 开始

不必先准备完美的长文。一个踩坑记录、一段代码、一个终于想明白的概念，都可以成为一篇文章。

发文方法已经放在 Git 发文指南中。写完，提交，再慢慢积累。