KLucenの启示录

原生 Emoji#

效果：Emoji 没有任何特殊标记语法——直接用系统输入法打出来即可，正文、标题、frontmatter 里都能用，渲染时由各操作系统提供彩色字形，不需要额外的转译插件或客户端字典。

🌸 站点装修记录 🎉

• 主题色换成了粉紫 🎨
• 侧栏挂上了音乐播放器 🎵
• 说说的心情图标也换成 Material Symbols 了 😂

源码

1
🌸 站点装修记录 🎉
2

3
- 主题色换成了粉紫 🎨
4
- 侧栏挂上了音乐播放器 🎵
5
- 说说的心情图标也换成 Material Symbols 了 😂

本站在动态（说说）的 frontmatter 里也用了 Emoji 之外的图标字段，见下一节。

图标：标识符写法#

效果：图标不写成正文里的 Markdown，而是以「集合前缀:图标名」的标识符形式出现在站点配置、导航栏、侧栏卡片、自定义组件中，构建期被静态提取并内联成 SVG 矢量图。

本站实际用到的位置：

• 动态的心情图标：mood: material-symbols:headphones-rounded（见动态页里每条说说左上角的图标）
• 侧栏分类、标签、系列卡片的小图标
• 导航栏条目的 icon 字段

本站主题可用的图标集合：

图标名可以在 Icones 上检索，找到后取其 前缀:名称 即可。

源码（写在配置或 frontmatter 里，不是正文语法）

1
# 动态的心情图标
2
mood: material-symbols:music-note-outline-rounded
3

4
# 导航栏条目
5
- name: 系列
6
  url: /series/
7
  icon: material-symbols:auto-stories-outline-rounded

为什么这样设计#

• 零额外负担：图标在构建期按实际引用提取，不引入整套图标字体包，也不产生运行时请求；
• 跟随主题：图标以 currentColor 绘制，深浅色模式与主题色切换时自动适配，不需要为暗色模式单独准备一套资源。