Astro Mochi Tones 主题完全指南

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

项目地址：GitHub - vahiru/Astro-Mochi-Tones

⚠️ 警告

本组件库目前处于 早期开发阶段 (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>

效果演示：

引用与诗词

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>

效果演示：

媒体组件

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="构建更快的网站。" />

效果演示：

Astro 文档

构建更快的网站。

https://astro.build

open_in_new

---

📦 容器组件 (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>

效果演示：

折叠 (Folding)

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

效果演示：

chevron_right 点击展开查看详情

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

chevron_right 默认展开

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

标签页 (Tabs)

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

效果演示：

双栏布局 (Split)

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

效果演示：

---

📊 数据组件 (Data)

引入组件

import Timeline from '../../components/data/Timeline.astro';
import TimelineNode from '../../components/data/TimelineNode.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';

时间轴 (Timeline)

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

效果演示：

站点/友链 (Sites)

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

效果演示：

GitHub 卡片

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

效果演示：

OKR 目标

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

效果演示：

其他数据

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

效果演示：

#Stellaris