这篇文章用来记录当前博客从初始化到逐步美化的过程，也作为首页文章卡片的示例：它包含分类、标签、摘要和封面，展示效果会比 Hexo 默认的 Hello World 更完整。

博客结构

这个站点基于 Hexo 构建，主题使用 Butterfly。文章主要放在 source/_posts 目录下，图片资源放在 source/img 目录下，主题相关配置集中在 _config.butterfly.yml 中。

常用配置包括：

  • 首页文章卡片封面
  • 文章分类和标签
  • 首页摘要显示方式
  • 顶部图、背景图和侧栏组件
  • 分类卡片、轮播图、音乐播放器等扩展模块

文章写作

每篇文章开头都可以通过 Front-matter 自定义展示效果。比较常用的字段有 title、categories、tags、description、cover 和 top_img。

示例：

1
2
3
4
5
6
7
8
9
10
---
title: 文章标题
categories:
  - 技术笔记
tags:
  - Hexo
description: 首页卡片摘要
cover: /img/example-cover.png
top_img: /img/example-banner.png
---

本地预览

修改内容后，可以在本地生成并预览：

1
2
npm run build
npx hexo server

之后打开本地地址，就能查看首页卡片、文章详情页和分类标签是否显示正常。