オンライン教科書の修正方法

ファイルの構成

教材のタイトルや表示順は、1つのJSONファイルで管理します。本文は、章ごとに別のMarkdownファイルへ保存します。

src/
├─ data/
│  └─ courses.json
└─ content/
   └─ chapters/
      └─ course-id/
         ├─ introduction.md
         └─ practice.md

章の作成にはtemplates/chapter-template.mdを使用できます。

教材を追加する

src/data/courses.jsonの配列へ、教材のオブジェクトを追加します。

{
  "id": "new-course",
  "title": "教材のタイトル",
  "description": "教材全体の説明を一文で書きます。",
  "chapters": ["introduction", "practice"]
}

• id: URLや章との関連付けに使う、重複しない名前
• title: 教材一覧に表示する名前
• description: 教材で学べる内容の説明
• chapters: 章のchapterSlugを表示したい順番で並べた一覧

教材は、courses.jsonでオブジェクトを並べた順番に表示されます。

章を書く

templates/chapter-template.mdをコピーし、src/content/chapters/<教材ID>/に保存します。章ごとに1つのMarkdownファイルを作ります。

---
chapterSlug: introduction
course: new-course
title: 章のタイトル
description: この章で学ぶことを一文で書きます。
author: あなたの名前
---

chapterSlugは章のURLと、courses.jsonのchaptersで使用します。一度決めたら変更しないようにします。

frontmatterの下に、Markdownで本文を書きます。見出し、箇条書き、コード例などを使用できます。

章の順番を設定する

章を追加したら、対象教材のchaptersへchapterSlugを追加します。

"chapters": [
  "introduction",
  "practice"
]

ここに並べた順番が、章一覧、章番号、前後の章へのリンクへ反映されます。

表示を確認する

Markdownファイルとcourses.jsonを保存し、教材一覧から章を開いて確認します。設定漏れ、重複、存在しない章がある場合は、ビルド時にエラーとして表示されます。

公開方法

オンライン教科書はCloudFlareで公開されています。