余弦の博客

🔒 加密文章演示

Mon, 16 Feb 2026 16:00:00 GMT

此文章已加密，请在网页中查看

Shoka 主题 Markdown 语法演示

Sat, 07 Feb 2026 04:00:00 GMT

本文展示了从 Hexo Shoka 主题迁移的所有特殊 Markdown 语法。

文字特效

下划线 (ins)

++这是下划线文字++

++波浪下划线++{.wavy}

++着重点标记++{.dot}

这是下划线文字

波浪下划线

着重点标记

下划线颜色

++主色调++{.primary} ++成功++{.success} ++警告++{.warning} ++危险++{.danger} ++信息++{.info}

主色调成功警告危险信息

高亮 (mark)

==这是高亮文字==

这是高亮文字

上下标

H~2~O 是水的化学式
E = mc^2^ 是质能方程

H₂O 是水的化学式

E = mc² 是质能方程

颜色文字

[红色]{.red} [粉色]{.pink} [橙色]{.orange} [黄色]{.yellow} [绿色]{.green} [水色]{.aqua} [蓝色]{.blue} [紫色]{.purple} [灰色]{.grey}

红色粉色橙色黄色绿色水色蓝色紫色灰色

彩虹文字

[这段文字会有彩虹渐变效果]{.rainbow}

这段文字会有彩虹渐变效果

键盘键

[Ctrl]{.kbd} + [C]{.kbd} 复制，[Ctrl]{.kbd} + [V]{.kbd} 粘贴

Ctrl + C 复制，Ctrl + V 粘贴

隐藏文字 (Spoiler)

这里有一段!!隐藏文字，鼠标点击显示!!

这里有一段!!模糊文字，鼠标悬停显示!!{.blur}

这里有一段隐藏文字，鼠标点击显示

这里有一段模糊文字，鼠标悬停显示

标签块 (Labels)

[默认]{.label .default} [主要]{.label .primary} [信息]{.label .info} [成功]{.label .success} [警告]{.label .warning} [危险]{.label .danger}

默认主要信息成功警告危险

提醒块 (Note Blocks)

:::default
这是默认提醒块
:::

:::primary
这是主要提醒块，用于重要提示
:::

:::info
这是信息提醒块，用于提供额外信息
:::

:::success
这是成功提醒块，用于正面反馈
:::

:::warning
这是警告提醒块，请注意
:::

:::danger
这是危险提醒块，务必谨慎
:::

:::info no-icon
这是没有图标的信息块
:::

这是默认提醒块

这是主要提醒块，用于重要提示

这是信息提醒块，用于提供额外信息

这是成功提醒块，用于正面反馈

这是警告提醒块，请注意

这是危险提醒块，务必谨慎

这是没有图标的信息块

折叠块 (Collapse)

+++primary 点击展开详细内容
这里是折叠的内容，点击标题可以展开或收起。

支持 **Markdown** 格式化。

- 列表项 1
- 列表项 2
+++

+++warning 注意事项
这里列出一些需要注意的问题：

1. 注意事项一
2. 注意事项二
+++

+++danger 危险操作
请确保你知道自己在做什么！

```bash
rm -rf /  # 请勿执行此命令
```
+++

点击展开详细内容

这里是折叠的内容，点击标题可以展开或收起。

支持 Markdown 格式化。

列表项 1
列表项 2

注意事项

这里列出一些需要注意的问题：

注意事项一
注意事项二

危险操作

请确保你知道自己在做什么！

rm -rf /  # 请勿执行此命令

标签卡 (Tabs)

;;;tab1 JavaScript
```js
console.log('Hello, World!');
```
;;;

;;;tab1 Python
```python
print('Hello, World!')
```
;;;

;;;tab1 Rust
```rust
fn main() {
    println!("Hello, World!");
}
```
;;;

JavaScript Python Rust

console.log('Hello, World!');

print('Hello, World!')

fn main() {
    println!("Hello, World!");
}

注音

{取り返す^とりかえす}是日语中"取回"的意思。

{漢字^かんじ}的注音示例。

取り返す(とりかえす)是日语中"取回"的意思。

漢字(かんじ)的注音示例。

代码块增强

```js title="hello.js" url="https://example.com" linkText="查看源码" mark:1,3
const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);
```

```bash command:("$":1-3)
npm install astro
npm run dev
npm run build
```

const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);

npm install astro
npm run dev
npm run build

数学公式

行内公式：$E = mc^2$

块级公式：

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

行内公式：E=mc2E = mc^2E=mc2

块级公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=π ∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2

友链卡

{% links %}
- site: 余弦の博客
  url: https://blog.cosine.ren
  owner: cos
  desc: FE / ACG / 手工
  image: https://blog.cosine.ren/img/avatar.webp
  color: '#ed788b'
- site: 示例博客
  url: https://example.com
  owner: Alice
  desc: 一个热爱技术的博客
  image: https://api.dicebear.com/7.x/avataaars/svg?seed=Alice
  color: '#BEDCFF'
{% endlinks %}

多媒体

音频

{% media audio %}
- name: 示例音频
  url: https://music.163.com/#/song?id=3339210292
{% endmedia %}

音频歌单

{% media audio %}
- title: 诗岸歌单 山山～全是山山～
  list:
    - https://music.163.com/#/playlist?id=8676645748
- title: 『诗岸』全是山山！
  list:
    - https://music.163.com/#/playlist?id=17606384886
{% endmedia %}

视频

{% media video %}
- name: "测试 1"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
- name: "测试 2"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
{% endmedia %}

练习题

支持四种题型：单选题、多选题、判断题、填空题。

单选题

- 下列哪个是 JavaScript 的基本数据类型？{.quiz}
  - Object{.options}
  - Array{.options}
  - Symbol{.correct}
  - Function{.options}

> 解析：Symbol 是 ES6 引入的基本数据类型，而 Object、Array、Function 都是引用类型。

下列哪个是 JavaScript 的基本数据类型？
- Object
- Array
- Symbol
- Function

解析：Symbol 是 ES6 引入的基本数据类型，而 Object、Array、Function 都是引用类型。

多选题

- 以下哪些是 CSS 布局方式？{.quiz .multi}
  - Flexbox{.correct}
  - jQuery{.options}
  - Grid{.correct}
  - Float{.correct}

> 解析：Flexbox、Grid 和 Float 都是 CSS 布局方式。jQuery 是一个 JavaScript 库，不属于 CSS 布局。

以下哪些是 CSS 布局方式？
- Flexbox
- jQuery
- Grid
- Float

解析：Flexbox、Grid 和 Float 都是 CSS 布局方式。jQuery 是一个 JavaScript 库，不属于 CSS 布局。

判断题

- `const` 声明的变量不能重新赋值，但可以修改其属性。{.quiz .true}

> 解析：`const` 只保证变量绑定不可变，如果变量指向一个对象，其属性仍然可以修改。

- HTML 是一种编程语言。{.quiz}

> 解析：HTML（超文本标记语言）是一种标记语言，不是编程语言。它没有逻辑控制能力。

const 声明的变量不能重新赋值，但可以修改其属性。

解析：const 只保证变量绑定不可变，如果变量指向一个对象，其属性仍然可以修改。

HTML 是一种编程语言。

解析：HTML（超文本标记语言）是一种标记语言，不是编程语言。它没有逻辑控制能力。

填空题

- 在 JavaScript 中，`typeof null` 的结果是 [object]{.gap}。{.quiz .fill}

> 解析：这是一个历史遗留 bug。`null` 的类型标签与 object 相同，因此 `typeof null` 返回 `"object"`。常见错误答案是 [null]{.mistake}。

在 JavaScript 中，typeof null 的结果是 object。

解析：这是一个历史遗留 bug。null 的类型标签与 object 相同，因此 typeof null 返回 "object"。常见错误答案是 null。

CSS 中，Flexbox 适合一维布局，Grid 适合二维布局，而 Float 是传统的布局方式。

解析：Flexbox 是一维布局模型（行或列），Grid 是二维布局模型（行和列同时控制），Float 是 CSS2 时代的传统布局方式。

加密内容块 (Encrypted Block)

使用 :::encrypted{password="密码"} 语法可以创建加密区块。区块内的内容在构建时使用 AES-256-GCM 进行真正加密，密码不会出现在最终的 HTML 中。读者需要输入正确密码才能解密查看。

适用场景：防止搜索引擎/爬虫收录敏感内容（如私人资源链接、付费内容片段等）。

前端无法实现真正意义上的加密：密码总需要在客户端输入，密文和算法都对用户可见，安全性完全取决于密码强度。本功能的目的不是对抗有针对性的破解，而是防止搜索引擎和爬虫直接收录明文内容。对于这个场景，AES-256-GCM 已经足够：构建产物中只有密文，不含密码和明文，搜索引擎无法索引加密区块的内容。


:::encrypted{password="test"}
这里是加密的内容，支持完整的 Markdown 语法：

- **粗体**、*斜体*、~~删除线~~
- `行内代码`
- [链接](https://example.com)

```js
console.log('加密内容中的代码也有语法高亮！');
```

行内公式 $E = mc^2$ 也可以正常渲染。
:::

:::encrypted{password="another"}
每个加密块可以设置独立的密码。
:::

Infographic 信息图指南

Sat, 03 Jan 2026 04:00:00 GMT

本文将详细介绍如何在 Markdown 中使用 @antv/infographic 创建各种精美的信息图表。

什么是 Infographic

Infographic（信息图）是一种将数据、信息和知识以视觉化方式呈现的图表形式。相比传统的文字描述，信息图能够更直观、更有吸引力地传达信息。

在本博客中，你可以直接在 Markdown 代码块中使用 infographic 标记来创建各种类型的信息图，支持：

列表展示
流程说明
数据对比
层级结构
统计图表
象限分析
关系展示

基本语法

在代码块中使用 infographic 标记，第一行指定模板名称，然后使用类似 YAML 的语法定义数据：

```infographic
infographic <template-name>
data
  title 标题
  desc 描述
  items
    - label 条目名称
      desc 条目描述
      icon mdi/icon-name
```

列表类模板 (list-*)

适合展示信息列表、特性清单、技术栈等。

网格卡片布局

使用 list-grid-badge-card 模板展示卡片式列表：

infographic list-grid-badge-card
data
  title 前端技术栈
  desc 现代化前端开发常用技术
  items
    - label TypeScript
      desc 类型安全的 JavaScript 超集
      icon mdi/language-typescript
    - label React
      desc 用于构建用户界面的 JavaScript 库
      icon mdi/react
    - label Astro
      desc 现代化静态站点生成器
      icon mdi/rocket-launch
    - label Tailwind CSS
      desc 实用优先的 CSS 框架
      icon mdi/tailwind
    - label Vite
      desc 下一代前端构建工具
      icon mdi/lightning-bolt
    - label Biome
      desc 一体化的 Web 工具链
      icon mdi/cog

糖果风格卡片

使用 list-grid-candy-card-lite 创建更有趣的卡片样式：

infographic list-grid-candy-card-lite
data
  title 博客特色功能
  items
    - label 深色模式
      desc 优雅的主题切换
      icon mdi/theme-light-dark
    - label 全站搜索
      desc 基于 Pagefind 的无后端搜索
      icon mdi/magnify
    - label Markdown 增强
      desc 支持 GFM、Mermaid、Infographic
      icon mdi/markdown
    - label 智能推荐
      desc 基于语义相似度的文章推荐
      icon mdi/brain

水平箭头列表

使用 list-row-horizontal-icon-arrow 展示线性列表：

infographic list-row-horizontal-icon-arrow
data
  title 开发流程
  items
    - label 需求分析
      icon mdi/clipboard-text
    - label 设计方案
      icon mdi/palette
    - label 编码实现
      icon mdi/code-tags
    - label 测试部署
      icon mdi/rocket-launch

流程/顺序类模板 (sequence-*)

适合展示步骤、流程、时间线等有顺序关系的信息。

之字形步骤

使用 sequence-zigzag-steps-underline-text 展示流程步骤：

infographic sequence-zigzag-steps-underline-text
data
  title 博客搭建流程
  items
    - label 选择框架
      desc 选择 Astro 作为静态站点生成器
    - label 设计主题
      desc 参考 Shoka 主题进行设计
    - label 开发功能
      desc 实现文章系统、搜索、评论等功能
    - label 部署上线
      desc 使用 Vercel 进行自动化部署

圆形流程

使用 sequence-circular-simple 展示循环流程：

infographic sequence-circular-simple
data
  title PDCA 循环
  items
    - label Plan
      desc 制定计划
    - label Do
      desc 执行实施
    - label Check
      desc 检查验证
    - label Act
      desc 改进优化

垂直路线图

使用 sequence-roadmap-vertical-simple 展示时间线或路线图：

infographic sequence-roadmap-vertical-simple
data
  title 项目里程碑
  items
    - label 2024 Q1
      desc 项目启动，完成基础架构
    - label 2024 Q2
      desc 实现核心功能，开始内容迁移
    - label 2024 Q3
      desc 优化性能，添加高级功能
    - label 2024 Q4
      desc 正式发布，持续优化

金字塔结构

使用 sequence-pyramid-simple 展示层级递进关系：

infographic sequence-pyramid-simple
data
  title 马斯洛需求层次
  items
    - label 自我实现
    - label 尊重需求
    - label 社交需求
    - label 安全需求
    - label 生理需求
theme
  palette
    - #8b5cf6
    - #3b82f6
    - #06b6d4
    - #10b981
    - #f59e0b

对比类模板 (compare-*)

适合展示二元对比、优缺点分析等。

水平二元对比

使用 compare-binary-horizontal-simple-fold 进行对比：

infographic compare-binary-horizontal-simple-fold
data
  title SSR vs SSG
  items
    - label 服务端渲染 (SSR)
      children
        - label 实时生成
          desc 每次请求时渲染页面
        - label 动态内容
          desc 适合频繁更新的内容
        - label 服务器负载
          desc 需要服务器资源
    - label 静态生成 (SSG)
      children
        - label 构建时生成
          desc 提前生成所有页面
        - label 静态内容
          desc 适合内容相对稳定的场景
        - label CDN 友好
          desc 可以部署到 CDN 边缘节点

SWOT 分析

使用 compare-swot 进行 SWOT 分析：

infographic compare-swot
data
  title 技术博客 SWOT 分析
  items
    - label 优势 (Strengths)
      children
        - label 技术积累
        - label 个人品牌
        - label 知识沉淀
    - label 劣势 (Weaknesses)
      children
        - label 时间投入
        - label 持续更新压力
        - label 初期流量低
    - label 机会 (Opportunities)
      children
        - label 技术社区活跃
        - label 开源生态发展
        - label 个人成长空间
    - label 威胁 (Threats)
      children
        - label 内容同质化
        - label 平台竞争
        - label 技术快速迭代

层级类模板 (hierarchy-*)

适合展示组织结构、分类体系等树形关系。

系统分层结构

使用 hierarchy-structure 展示多层架构，非常适合展示系统架构、模块分层：

infographic hierarchy-structure
data
  title 系统分层结构
  desc 展示不同层级的模块与功能分组
  items
    - label 展现层
      children
        - label 小程序
        - label APP
        - label PAD
        - label 客户端
        - label WEB
    - label 应用层
      children
        - label 核心模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 基础模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 其他模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
    - label 平台层
      children
        - label 模块1
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块2
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块3
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4

科技风格树形图

使用 hierarchy-tree-tech-style-capsule-item 展示层级结构：

infographic hierarchy-tree-tech-style-capsule-item
data
  title 前端技术体系
  items
    - label 前端开发
      children
        - label 基础技术
          children
            - label HTML
            - label CSS
            - label JavaScript
        - label 框架/库
          children
            - label React
            - label Vue
            - label Astro
        - label 工程化
          children
            - label Vite
            - label Webpack
            - label Rollup

圆角矩形树形图

使用 hierarchy-tree-curved-line-rounded-rect-node 展示层级：

infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 博客内容分类
  items
    - label 技术文章
      children
        - label 前端
          children
            - label React
            - label TypeScript
        - label 后端
          children
            - label Node.js
            - label 数据库
    - label 生活随笔
      children
        - label 年度总结
        - label 读书笔记

图表类模板 (chart-*)

适合展示统计数据、数值对比等。

柱状图

使用 chart-column-simple 展示数据对比：

infographic chart-column-simple
data
  title 月度文章发布统计
  items
    - label 1月
      value 5
    - label 2月
      value 8
    - label 3月
      value 12
    - label 4月
      value 6
    - label 5月
      value 10
    - label 6月
      value 15

条形图

使用 chart-bar-plain-text 展示横向对比：

infographic chart-bar-plain-text
data
  title 编程语言使用占比
  items
    - label TypeScript
      value 45
    - label JavaScript
      value 25
    - label Python
      value 15
    - label Go
      value 10
    - label Others
      value 5

饼图

使用 chart-pie-plain-text 展示占比分布：

infographic chart-pie-plain-text
data
  title 访问来源分布
  items
    - label 搜索引擎
      value 45
    - label 社交媒体
      value 30
    - label 直接访问
      value 15
    - label 外部链接
      value 10

环形图

使用 chart-pie-donut-pill-badge 创建环形图：

infographic chart-pie-donut-pill-badge
data
  title 技术栈占比
  items
    - label 前端
      value 50
    - label 后端
      value 30
    - label DevOps
      value 20

折线图

使用 chart-line-plain-text 展示趋势：

infographic chart-line-plain-text
data
  title 博客访问量趋势
  items
    - label 第1周
      value 100
    - label 第2周
      value 150
    - label 第3周
      value 200
    - label 第4周
      value 280
    - label 第5周
      value 350
    - label 第6周
      value 420

象限分析 (quadrant-*)

适合展示四象限分析、优先级矩阵等。

简单卡片象限

使用 quadrant-quarter-simple-card 进行象限分析：

infographic quadrant-quarter-simple-card
data
  title 四象限分析
  items
    - label 重要且紧急
      desc 直接规避风险
      illus notify
    - label 重要不紧急
      desc 采取风险控制措施
      illus coffee
    - label 不重要但紧急
      desc 通过保险转移风险
      illus diary
    - label 不重要不紧急
      desc 选择接受风险
      illus invest

关系图 (relation-*)

适合展示元素间的关联关系。

圆形图标关系

使用 relation-circle-icon-badge 展示关系网络：

infographic relation-circle-circular-progress
data
  title 子公司盈利分析
  desc 各子公司财务表现，盈利同比增长
  items
    - label 云计算子公司
      value 25
      desc 年度净利润率达25%，成为集团核心增长引擎
      icon mingcute/cardano-ada-fill
    - label 人工智能子公司
      value 40
      desc AI业务快速扩张，盈利同比增长40%
      icon mingcute/openai-fill
    - label 物联网子公司
      value 1000
      desc IoT设备出货量突破千万，盈利稳步提升
      icon mingcute/medium-fill
    - label 金融科技子公司
      value 18
      desc 数字支付业务增长迅猛，净利润率18%
      icon mingcute/paypal-fill
    - label 新能源子公司
      value 50
      desc 绿色能源项目实现规模化盈利，增长潜力巨大
      icon mingcute/drone-fill

主题定制

可以通过 theme 块自定义颜色方案：

infographic list-grid-badge-card
data
  title 自定义配色示例
  items
    - label 主色调
      desc 品牌主色
    - label 辅助色
      desc 强调色彩
    - label 中性色
      desc 背景文字
theme
  palette
    - #3b82f6
    - #8b5cf6
    - #f97316
    - #06b6d4
    - #10b981

实用技巧

1. 选择合适的模板

根据要展示的信息类型选择对应的模板：

列表信息 → list-*
流程步骤 → sequence-*
数据对比 → compare-* 或 chart-*
层级关系 → hierarchy-*
优先级分析 → quadrant-*
关联关系 → relation-*

2. 合理使用图标

使用 Material Design Icons 让信息图更生动：

icon mdi/rocket-launch
icon mdi/heart
icon mdi/lightbulb
icon mdi/chart-line

3. 控制信息密度

每个信息图不要包含过多条目（建议 3-8 个）
使用简洁的标签和描述
复杂信息可以拆分成多个信息图

4. 注意主题适配

信息图会自动跟随博客的深色/浅色主题切换，无需额外配置。

总结

Infographic 为 Markdown 文档提供了强大的可视化能力，能够让技术博客、文档、笔记更加生动易读。合理使用各种模板，可以显著提升内容的表现力和可读性。

更多模板和详细文档，请访问 Infographic 官方网站。

关闭目录编号示例

Sat, 06 Jan 2024 16:00:00 GMT

本文展示如何关闭目录的自动编号功能。

目录编号功能

默认情况下，astro-koharu 会使用 CSS 计数器为目录自动添加层级编号，如：

1. 第一章
- 1.1. 第一节
- 1.2. 第二节
1. 第二章

关闭编号

通过设置 tocNumbering: false 可以关闭特定文章的编号：

---
title: 我的文章
tocNumbering: false
---

效果对比

开启编号（默认）

目录项会显示 1., 1.1., 1.1.1. 这样的编号。

关闭编号

目录项只显示标题文本，没有编号前缀。

本文效果

本文已设置 tocNumbering: false，你可以查看右侧目录（桌面端）或展开目录（移动端）来查看效果。

技术实现

编号功能通过纯 CSS 计数器实现，零运行时开销：

.toc-numbering {
  counter-reset: h2;
}

.toc-numbering h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
}

使用建议

以下场景可能需要关闭编号：

随笔类文章
标题本身已有编号
内容结构较松散的文章
个人偏好

总结

目录编号是一个可选功能，根据文章类型灵活使用即可。

Hello World

Thu, 04 Jan 2024 16:00:00 GMT

你好，世界！这是我的第一篇随笔。

关于这篇文章

这篇文章故意没有设置 description 字段，用于测试以下功能：

自动描述提取 - 系统会自动从正文提取前 150 字作为描述
AI 摘要 - 如果运行了 pnpm generate:summaries，会使用 AI 生成的摘要

随笔分类

随笔分类适合记录：

生活感悟
年度总结
随想随记
个人成长

写作建议

写博客是一件有趣的事情。这里有一些建议：

保持更新

定期更新能让博客保持活力。哪怕是简短的记录，也比长期沉寂好。

记录真实

真实的记录比完美的文字更有价值。不必追求每篇都是精品。

享受过程

写作本身就是一种思考和整理的过程，享受这个过程吧。

结语

这就是一篇简单的随笔示例。希望你也能在这里记录自己的故事。

祝你写作愉快！

示例周刊 Vol.1

Wed, 03 Jan 2024 16:00:00 GMT

这是一期示例周刊，展示周刊/系列文章功能的使用方式。

关于周刊功能

周刊是 astro-koharu 的特色功能之一，适合发布定期更新的系列内容，如：

技术周刊
读书笔记系列
学习记录
项目进度更新

周刊配置

在 config/site.yaml 中配置：

featuredSeries:
  categoryName: 周刊       # 分类名称
  label: 我的周刊          # 显示标签
  fullName: 我的技术周刊
  description: 周刊描述...
  cover: /img/weekly_header.webp
  enabled: true            # 设为 false 可关闭

周刊特点

专属页面 - 周刊有独立的 /weekly 页面
首页展示 - 最新一期会在首页置顶展示
独立列表 - 周刊不会出现在普通文章列表中
系列导航 - 周刊之间有上下篇导航

本期内容示例

工具推荐

工具	用途	链接
Biome	代码检查	biome.dev
Motion	动画库	motion.dev

本周学习

这周学习了以下内容：

Astro 内容集合
Tailwind 主题配置
Motion 动画进阶

下期预告

下期将介绍更多进阶功能，敬请期待！

感谢阅读本期周刊！

主题定制指南

Tue, 02 Jan 2024 16:00:00 GMT

本文介绍如何定制 astro-koharu 的外观和样式。

嵌套分类说明

本文使用了嵌套分类 [笔记, 前端]，这会创建层级关系：

URL: /categories/note/front-end
面包屑: 笔记 → 前端

在 frontmatter 中这样配置：

categories:
  - [笔记, 前端]

配色定制

CSS 变量

主题颜色通过 CSS 变量定义，位于 src/styles/index.css：

:root {
  --primary-color: #ff6b9d;
  --secondary-color: #7dd3fc;
  /* ...更多变量 */
}

.dark {
  --primary-color: #f472b6;
  --secondary-color: #38bdf8;
}

Tailwind 配置

编辑 tailwind.config.ts 自定义主题：

export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
        secondary: 'var(--secondary-color)',
      },
    },
  },
};

布局调整

内容宽度

在 src/constants/layout.ts 中调整布局常量：

export const LAYOUT = {
  maxWidth: '1200px',
  sidebarWidth: '300px',
  contentPadding: '1.5rem',
};

响应式断点

主题使用 Tailwind 的默认断点：

断点	宽度	用途
sm	640px	小型手机
md	768px	平板
lg	1024px	桌面
xl	1280px	大屏幕

动画效果

Motion 配置

动画使用 Motion 库，配置位于 src/constants/anim/：

// spring.ts - 弹簧动画
export const springConfig = {
  stiffness: 100,
  damping: 10,
};

// variants.ts - 动画变体
export const fadeIn = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

禁用动画

对于偏好减少动画的用户，主题会自动响应 prefers-reduced-motion 媒体查询。

圣诞特效

主题内置可选的圣诞特效，在 site-config.ts 中配置：

export const christmasConfig = {
  enabled: false,  // 设为 true 启用
  features: {
    snowfall: true,        // 雪花飘落
    christmasColorScheme: true,  // 圣诞配色
    christmasHat: true,    // 圣诞帽
  },
};

总结

通过修改以上配置，你可以轻松打造属于自己风格的博客。如有问题，欢迎在 GitHub 提 Issue。

Markdown 增强功能演示

Mon, 01 Jan 2024 16:00:00 GMT

本文展示 astro-koharu 支持的所有 Markdown 增强功能。

链接嵌入功能

astro-koharu 支持自动嵌入独行链接，包括 Tweet 和通用链接预览。

Tweet 嵌入测试

下面是一条独行的 Twitter 链接，应该自动转换为 Tweet 组件：

这是普通段落中的链接 Vercel Tweet，不应该被嵌入。

使用新域名 x.com 的 Tweet：

通用链接预览测试

这是段落中的链接 react-tweet，不应该被嵌入。

下面是一个独行的普通链接，应该显示 OG 预览卡片：

github.com

GitHub - vercel/react-tweet: Embed tweets in your React application.

Embed tweets in your React application. Contribute to vercel/react-tweet development by creating an account on GitHub.

https://github.com/vercel/react-tweet

这是没有 OG 图的链接

react-tweet.vercel.app

Introduction – react-tweet

Embed tweets in your React application.

https://react-tweet.vercel.app/

这是获取不到 OG 信息的链接

https://zhuanlan.zhihu.com/p/1900483903984243480

zhuanlan.zhihu.com

Codepen 链接嵌入

See the Pen YPKBrJX by botteu (@botteu) on CodePen.

链接嵌入规则

独行的 Twitter/X 链接自动转换为 Tweet 组件
独行的其他链接显示 OG 预览卡片
段落内的链接保持原样
支持深色/浅色主题切换

代码高亮

支持多种编程语言的语法高亮，并自动跟随主题切换。

JavaScript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return {
    message: "Welcome to astro-koharu",
    timestamp: Date.now(),
  };
}

greet("World");

TypeScript

interface BlogPost {
  title: string;
  date: Date;
  tags: string[];
  content: string;
}

const post: BlogPost = {
  title: "My First Post",
  date: new Date(),
  tags: ["astro", "blog"],
  content: "Hello World!",
};

Python

def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

print(fibonacci(10))

Bash

#!/bin/bash
# Start development server
pnpm install
pnpm dev

echo "Server is running at http://localhost:4321"

GFM 表格

功能	支持状态	说明
表格	✅	支持对齐
任务列表	✅	复选框
删除线	✅	删除文本
自动链接	✅	自动识别 URL

任务列表

安装 astro-koharu
配置站点信息
写第一篇文章
部署到 Vercel

Mermaid 图表

流程图

flowchart LR
    A[编写文章] --> B[本地预览]
    B --> C{满意吗?}
    C -->|是| D[推送代码]
    C -->|否| A
    D --> E[自动部署]
    E --> F[上线成功]

时序图

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器

    U->>B: 访问博客
    B->>S: 请求页面
    S-->>B: 返回 HTML
    B-->>U: 渲染页面

饼图

pie title 博客内容分布
    "技术笔记" : 45
    "生活随笔" : 25
    "项目分享" : 20
    "其他" : 10

文本样式

粗体文本
斜体文本
删除线
行内代码
链接文本

引用

这是一段引用文本。

astro-koharu 让博客搭建变得简单而优雅。

标题层级

本文展示了 h2-h6 各级标题，它们都会自动生成锚点链接，方便分享和引用。

三级标题

四级标题

五级标题

六级标题

分割线

列表

无序列表

项目一
- 子项目 A
- 子项目 B
项目二
项目三

有序列表

第一步
第二步
1. 子步骤 A
2. 子步骤 B
  1. 子步骤 C
第三步

图片

图片会自动应用 LQIP（低质量图片占位符）效果：

示例图片

Shoka 兼容 Markdown 语法

除了上述标准 Markdown 增强外，astro-koharu 还支持从 Hexo Shoka 主题迁移的丰富扩展语法，包括：

文字特效 — 下划线 ins、高亮 mark、上下标 _sub / ^sup、颜色文字
隐藏文字 — Spoiler 粒子动画隐藏文字和模糊效果
注音标注 — Ruby 漢字(かんじ)
容器块 — 提醒块 :::info、折叠块 +++primary 标题、标签卡 ;;;tab
友链卡片 — YAML 数据渲染为交互卡片
音视频播放器 — 支持网易云/QQ 音乐歌单
数学公式 — KaTeX 行内 E=mc2E=mc^2E=mc2 和块级 $$...$$
代码块增强 — title、mark 行高亮、command 提示符
练习题系统 — 单选、多选、判断、填空四种题型
加密内容块 — :::encrypted AES-256-GCM 加密，防止爬虫收录

所有功能均可在 config/site.yaml 中独立开关。完整语法演示和用法请参阅 Shoka 主题 Markdown 语法演示。

加密内容块

使用 :::encrypted{password="密码"} 语法创建加密区块。内容在构建时使用 AES-256-GCM 真正加密，密码不会出现在最终 HTML 中，有效防止搜索引擎和爬虫收录敏感内容。

加密块内的 Markdown 会获得与普通内容完全相同的渲染处理（Shiki 代码高亮、KaTeX 公式等），解密后直接展示。

前端无法实现真正意义上的加密，因为密码需在客户端输入，密文和算法对用户可见，安全性完全取决于密码强度。本功能的目的是防止搜索引擎和爬虫直接收录明文内容，而非对抗有针对性的破解。

:::encrypted{password="demo"}
这段内容已加密，输入密码 `demo` 即可查看。

支持 **完整 Markdown 语法**，包括代码块：

```python
print("Hello from encrypted block!")
```

:::

总结

以上展示了 astro-koharu 支持的主要 Markdown 功能。更多功能请参考使用指南。

欢迎使用 astro-koharu

Sun, 31 Dec 2023 16:00:00 GMT

欢迎使用 astro-koharu 博客主题！

关于这个主题

astro-koharu 是一个基于 Astro 5.x 构建的现代化博客系统，设计灵感来自 Hexo 的 Shoka 主题。它具有以下特点：

性能优异 - 基于 Astro 静态站点生成，加载速度快
优雅设计 - 萌系/二次元风格，粉蓝配色
功能丰富 - 多级分类、标签、目录、搜索等
响应式 - 完美适配桌面和移动设备

快速开始

1. 配置你的博客

编辑 config/site.yaml 文件：

site:
  title: 你的博客名称
  author: 你的名字
  description: 你的博客简介
  # ...更多配置

2. 写第一篇文章

在 src/content/blog/ 目录下创建 Markdown 文件：

---
title: 我的第一篇文章
date: 2024-01-01
tags:
  - 标签1
categories:
  - 分类名
---

文章内容...

3. 部署上线

推荐使用 Vercel 一键部署：

了解更多

查看 Markdown 功能演示了解所有 Markdown 增强功能
查看使用指南了解详细配置说明

祝你使用愉快！