サンプル / Read me
このファイルはサンプルです。編集しないでください。
このリポジトリはAstroとGitHubを用いたサイトにおける、Markdownファイルの管理のためのサンプルです。
こちらのエディタから編集し、単純なCMSとして使用することができます。
使用可能なタグ
- # h1要素(見出し1)に使用 冒頭にページタイトルを自動で追加するため、理由がない限り必要なし(当ページ上の”サンプルページ”が該当)
- ## h2要素(見出し2)に使用
- ### h3要素(見出し3)に使用
- #### h4要素(見出し4)に使用
- [テキスト](URL) URLリンクを貼る こんな感じ
- **テキスト** 太字
- _テキスト_ 斜体
など
拡張子
マークダウンファイルの拡張子は “.md” です。
*それ以外にも将来、より複雑なことができる “.mdx” や “.mdoc” なども導入するかもしれません。(通常のマークダウンに比べ編集に少し高度な知識を要するので、導入は未定)
フロントマター
mdファイルの上部にある、”---” に囲まれた情報は「フロントマター」といって、Webサイトに必要な情報を伝えるためのものです。
”:” の左側は「キー」といって、フロントマターの情報の属性を表すものです。キーは変えたり消したりしないでください。
”:” の右側は「値」といって、Webサイトに渡す情報の中身です。内容に合わせて編集してください。
以下は現時点で必要なフロントマターですが、そのまま実装するかは未定です。
- title - そのページのタイトルを表します。ブラウザのタブに表示されたり、見出しとして使用されます。空欄にしないでください。
- tags - そのページのタグを表します。”[]” は消さずに、その内側に書きます。複数のタグをつける場合は、”,” で区切ってください。現状表示されません。
- author - そのページの著者を表します。現状表示されません。空欄にしないでください。
- publishDate - そのページが書かれた日付を表します。YYYY-MM-DD形式で書いてください。空欄にしないでください。
コミットとプッシュ
書き終わったら左のアクティビティバーの上から3番目のアイコン(青丸がついてるはず)をクリックして、上のテキストボックスにコミットメッセージ(何を更新したか記すメッセージ)を書いて、“Commit & Push”を押してください。しばらくすると更新がウェブサーバーにデプロイされ、astro-md-test.pages.devに反映されます。
プレビュー
テキストエディタの右上にあるアイコンの内、左端の虫眼鏡のついたアイコンをクリックするとマークダウンのプレビューが開きます。サイトで表示されるページとは少し異なりますが、イメージがしやすくなるでしょう。
アウトライン
便利な機能として、アウトラインというものがあります。
テキストエディタの左側、EXPLORER と書かれたエリアの下にある OUTLINE をクリックすると、文書中の見出しがリストされているのがわかります。目当ての見出しをクリックすることでそこにジャンプすることができるので、長い文章でも構造の把握がしやすくなります。