Mizuki Next Theme

外观

日记页面

约 1350 字大约 5 分钟

2025-08-17

日记页面配置教程

Mizuki 主题内置了一个优雅的日记（Diary）页面，用于分享你的日常点滴、心情感悟或生活瞬间。与传统博客文章不同，日记更侧重于简短、即时的记录，通常会搭配图片。

本教程将详细指导你如何添加、修改和管理日记内容。

1. 核心概念：页面与数据分离

Mizuki

src

pages

diary.astro

data

diary.ts

在 Mizuki 主题中，日记页面的展示逻辑和内容数据是分开的：

  • 展示逻辑: src/pages/diary.astro

    • 这个文件负责日记页面的HTML结构、CSS样式和JavaScript交互逻辑。
    • 它定义了日记条目如何在页面上排列、图片如何展示、日期如何格式化等。
    • 通常情况下，你不需要修改这个文件。

  • 内容数据: src/data/diary.ts

    • 这个文件是日记内容的"数据库"。所有的日记条目都以数组的形式存储在这里。
    • 每一篇日记都是一个对象，包含 id, content, date 和 images 等属性。
    • 添加、修改或删除日记，都在这个文件中操作。

2. src/data/diary.ts 文件详解

打开 src/data/diary.ts，你会看到类似下面的代码结构：

src/data/diary.ts
export interface DiaryItem {
	id: number;
	content: string;
	date: string;
	images?: string[];
	location?: string;
	mood?: string;
	tags?: string[];
}

// 示例日记数据
const diaryData: DiaryItem[] = [
	{
		id: 1,
		content:
			"The falling speed of cherry blossoms is five centimeters per second!",
		date: "2025-01-15T10:30:00Z",
		images: ["/images/diary/sakura.jpg", "/images/diary/1.jpg"],
	},
];

数据结构说明:

  • interface DiaryItem: 这是一个TypeScript接口，它定义了每一篇日记必须包含的字段和它们的类型。

    • id: number: (必填) 日记的唯一标识符。必须是数字，且不能重复。通常按时间顺序递增。
    • content: string: (必填) 日记的正文内容。可以是纯文本，也可以包含换行符 ()。
    • date: string: (必填) 日记的发布日期和时间。必须是ISO 8601格式的字符串，例如 2025-01-15T10:30:00Z。Z 表示UTC时间，主题会自动将其转换为本地时间显示。
    • images?: string[]: (可选) 日记附带的图片路径数组。? 表示这个字段是可选的。如果一篇日记没有图片，可以省略这个属性。

  • export const diaryData: DiaryItem[] = [...]: 这是实际的日记数据数组。

    • 数组中的每一个对象都遵循上面 DiaryItem 接口的定义。
    • 日记在页面上的显示顺序通常是按照数组中的顺序，从上到下排列。

3. 添加一篇新日记

按照以下步骤添加一篇新的日记：

  1. 准备图片（如果需要）:

    • 将你想要展示的图片文件（如 my-new-photo.webp）复制到项目的 public 目录下。建议创建一个专门的文件夹，例如 public/images/diary/。
    • 注意: 路径是从 public 文件夹开始计算的。如果图片放在 public/images/diary/ 下，那么它的路径就是 /images/diary/my-new-photo.webp。

  2. 编辑 diary.ts 文件:

    • 打开 src/data/diary.ts。
    • 在 diaryData 数组中，复制一个现有的日记对象作为模板。
    • 修改模板中的属性：
      • id: 给一个新的、唯一的数字（例如，在最后一篇日记的id基础上加1）。
      • content: 输入你的日记内容。如果需要换行，可以使用 。
      • date: 设置日记的日期和时间。你可以在网上搜索"ISO 8601 时间生成器"来获取正确格式的字符串。
      • images: (如果有图片) 添加图片的路径数组。如果没有图片，可以直接删除 images 这一行。

  3. 示例：添加一篇新日记

    假设我们要在现有两篇日记后添加一篇新的，内容如下：

    • 内容："今天尝试了新的咖啡配方，味道很棒！"
    • 日期：2025年1月20日下午3点
    • 图片：coffee.jpg (已放入 public/images/diary/ 目录)

    修改后的 diaryData 数组会是这样：

    export const diaryData: DiaryItem[] = [
  {
    id: 1,
    content: "The falling speed of cherry blossoms is five centimeters per second!",
    date: "2025-01-15T10:30:00Z",
    images: ["/images/diary/sakura.jpg", "/images/diary/1.jpg"],
  },
  {
    id: 2,
    content: "今日は晴れで、公園でピクニックをしました。とても楽しかったです！",
    date: "2025-01-10T14:00:00Z",
  },
  // --- 这是我们新添加的日记 ---
  {
    id: 3, // 新的ID
    content: "今天尝试了新的咖啡配方，味道很棒！绵密的奶泡是关键。", // 内容，使用换行
    date: "2025-01-20T15:00:00Z", // 新的日期
    images: ["/images/diary/coffee.jpg"], // 新的图片路径
  },
];

4. 修改或删除日记

  • 修改日记: 直接在 diaryData 数组中找到对应的日记对象，修改其 content, date 或 images 属性即可。
  • 删除日记: 找到对应的日记对象，将其从数组中完全移除。注意不要留下多余的逗号，以免造成语法错误。

5. 最佳实践与建议

  • 图片优化: 建议使用现代的图片格式如 .webp，并在上传前进行压缩，以保证页面加载速度。
  • 日期格式: 严格遵守 ISO 8601 格式 (YYYY-MM-DDTHH:mm:ssZ)，否则日期可能无法正确显示。
  • ID管理: 保持 id 的连续性和唯一性，这有助于你管理日记，也便于未来可能的功能扩展（如按ID查询）。
  • 内容排版: 在 content 中适当使用 进行换行，可以让你的日记在页面上显示得更美观、易读。

通过以上步骤，你就可以轻松地管理你的日记页面了。定期更新 src/data/diary.ts，让你的博客充满生活气息吧！

版权归属：LyraVoid Team

许可证：署名 4.0 国际 (CC-BY-4.0)