Astro Mochi Tones 主题完全指南

欢迎使用 Astro Mochi Tones 主题！这是一个基于 Astro 构建的博客主题，完美复刻了 Stellaris 主题的优雅设计与强大组件。

⚠️ 警告

本组件库目前处于 早期开发阶段 (Alpha)，可能会包含不可预料的错误。组件库包含大量未经审计的 AI 生成代码，请谨慎使用。

🚀 快速开始

安装

npm install

启动开发服务器

npm run dev

构建

npm run build

🎨 表达组件 (Express)

引入组件

import Mark from '../../components/express/Mark.astro';
import Note from '../../components/express/Note.astro';
// ... 其他组件按需引入

文本装饰

<Mark color="red">Red Mark</Mark> 或 <Mark color="cyan">Cyan Mark</Mark>
<Psw>悬停显示隐藏内容</Psw>
<Kbd>Ctrl</Kbd> + <Kbd>S</Kbd>
<Emp>重点词汇</Emp>
<U>下划线文本</U>
<Wavy>拼写错误标识</Wavy>
<Del>已废弃内容</Del>

效果演示：

高亮: Red Mark 或 Cyan Mark
黑幕:
按键: Ctrl + S
着重号: 重点词汇
下划线: 下划线文本
波浪线: 拼写错误标识
删除线: ~~已废弃内容~~

容器提示

<Note title="提示" color="blue">
  这是一个带有标题和内容的提示块。
</Note>

<Note color="warning">
  这里是一条没有标题的警告信息。
</Note>

效果演示：

卷轴与纸张

import Paper from '../../components/express/Paper.astro';
import Reel from '../../components/express/Reel.astro';

<Paper title="古老的卷轴" author="无名氏" date="1000 AD" style="underline">
Lorem ipsum dolor sit amet...
</Paper>

<Reel title="七言绝句" author="诗人">
春眠不觉晓，处处闻啼鸟。
</Reel>

效果演示：

古老的卷轴

无名氏 1000 AD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

七言绝句

诗人

春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。

引用与诗词

import Quot from '../../components/express/Quot.astro';
import Poetry from '../../components/express/Poetry.astro';

<Quot>
  "The only way to do great work is to love what you do."
</Quot>

<Poetry title="未选择的路" author="Robert Frost">
Two roads diverged in a yellow wood...
</Poetry>

效果演示：

“The only way to do great work is to love what you do.”

未选择的路

Robert Frost

Two roads diverged in a yellow wood, And sorry I could not travel both…

媒体组件

import Image from '../../components/express/Image.astro';
import Bvideo from '../../components/express/Bvideo.astro';
import Video from '../../components/express/Video.astro';

<Image src="..." desc="图片描述" download="true" />
<Bvideo bv="BV1ae4y127K5" />
<Video youtube="LB8KwiiUGy0" />

效果演示：

交互组件

import Checkbox from '../../components/express/Checkbox.astro';
import Radio from '../../components/express/Radio.astro';
import Copy from '../../components/express/Copy.astro';
import Link from '../../components/express/Link.astro';

<Checkbox checked color="green">任务已完成</Checkbox>
<Radio checked>选项 A</Radio>
<Copy text="npm install astro" />
<Link href="https://astro.build" title="Astro 文档" desc="构建更快的网站。" />

效果演示：

任务已完成任务待办选项 A 选项 B

npm install astro

Astro 文档构建更快的网站。https://astro.build/

📦 容器组件 (Container)

引入组件

import Border from '../../components/container/Border.astro';
import Folding from '../../components/container/Folding.astro';
import Tabs from '../../components/container/Tabs.astro';
import TabItem from '../../components/container/TabItem.astro';
import Split from '../../components/container/Split.astro';

边框 (Border)

<Border title="Tips">
  这是一个简单的边框容器。
</Border>

<Border title="Warning" color="orange">
  这是一个警告容器。
</Border>

效果演示：

Tips

这是一个简单的边框容器，适合包裹一段独立的内容。

Warning

请注意！这是一个橙色的警告容器。

折叠 (Folding)

<Folding title="点击展开查看详情">
  这里是隐藏的内容。
</Folding>

效果演示：

点击展开查看详情

这里是隐藏的内容，点击摘要即可查看。

默认展开

这个折叠块默认是展开状态的。

标签页 (Tabs)

<Tabs>
  <TabItem title="Tab 1">内容 1</TabItem>
  <TabItem title="Tab 2">
    <Border title="嵌套">内容 2</Border>
  </TabItem>
</Tabs>

效果演示：

可以在 Tabs 组件上使用 align 属性来设置导航条居中。

设置 active 属性可以更改默认打开的标签页下标。

这里可以嵌套其他组件。

Nested Box

你好！

双栏布局 (Split)

<Split>
  <div>左侧内容</div>
  <div>右侧内容</div>
</Split>

效果演示：

右侧内容

在桌面端，这段文字显示在通过片右侧；在移动端，它会堆叠在图片下方。

📊 数据组件 (Data)

引入组件

import Timeline from '../../components/data/Timeline.astro';
import TimelineNode from '../../components/data/TimelineNode.astro';
import Toc from '../../components/data/Toc.astro';
import Sites from '../../components/data/Sites.astro';
import GhCard from '../../components/data/GhCard.astro';
import OKR from '../../components/express/OKR.astro';
import KeyResult from '../../components/express/KeyResult.astro';
import Icon from '../../components/express/Icon.astro';
import Hashtag from '../../components/express/Hashtag.astro';

目录容器 (Toc)

<Toc title="本节目录" open>
  <ul>
    <li><a href="#timeline">时间轴</a></li>
    <li>
      <a href="#sites">站点与友链</a>
      <ul><li><a href="#github-card">GitHub 卡片</a></li></ul>
    </li>
  </ul>
</Toc>

效果演示：

数据组件目录

时间轴
站点与友链
- GitHub 卡片

时间轴 (Timeline)

<Timeline>
  <TimelineNode date="2023-11-07">
    **项目启动**
  </TimelineNode>
  <TimelineNode date="Step 1">
    **开发中**
  </TimelineNode>
</Timeline>

效果演示：

2023-11-07

项目启动 Stellaris 主题开始移植。

Step 1

打开 GitHub 访问仓库页面。

站点/友链 (Sites)

<Sites items={[
  {
    title: "Astro",
    url: "https://astro.build/",
    avatar: "https://astro.build/favicon.svg",
    description: "The web framework"
  }
]} />

效果演示：

AstroThe web framework

Stellaris ThemeHexo theme Stellaris.

GitHub 卡片

<GhCard user="vahiru" />
<GhCard repo="vahiru/Astro-Mochi-Tones" theme="light" />

效果演示：

GitHub profilevahiru

GitHub repositoryvahiru/Astro-Mochi-Tones

OKR 目标

<OKR o1="2025 年度目标">
  <KeyResult kr="开发" percent={1} status="completed">
    完成。
  </KeyResult>
</OKR>

效果演示：

OBJECTIVE

2025 年度目标

核心功能开发

Done

100%

Express, Data, Container 组件库完成。

文档编写

In progress

80%

完善使用指南。

其他数据

<Icon src="/favicon.svg" /> <Hashtag tag="Stellaris" color="purple" />

效果演示：

Stellaris

自定义主题

推荐配色

自定义颜色

Astro Mochi Tones 主题完全指南

🚀 快速开始

安装

启动开发服务器

构建

🎨 表达组件 (Express)

引入组件

文本装饰

容器提示

卷轴与纸张

引用与诗词

媒体组件

交互组件

📦 容器组件 (Container)

引入组件

边框 (Border)

折叠 (Folding)

标签页 (Tabs)

双栏布局 (Split)

右侧内容

📊 数据组件 (Data)

引入组件

目录容器 (Toc)

时间轴 (Timeline)

站点/友链 (Sites)

GitHub 卡片

OKR 目标

其他数据