Info

コンテンツの書き方

[DRAFT] この記事は下書きとしてマークされています。このままだと公開されないことに注意してください。

コンテンツの表示サンプル兼、コンテンツの記述方法に関するガイドです

はじめに

カテゴリーが news の記事は「お知らせ」として分類されます。
カテゴリー及びメタデータは、フロントマターを使って指定します。
フロントマターの書き方は基本的にはお知らせも、実績も同様です(タグとカテゴリーなど、一部違いはありますが書き方は変わりません)

フロントマターについて

Markdown ファイルの先頭にある、------で区切られた領域を YAML Frontmatter と呼びます。
ここは(パーサにもよりますが)通常レンダリングされず、メタデータ領域として機能します。
また、その名の通り、Markdownですがこのエリア内は YAML で記述します。

---
title: 記事サンプル
category:
- news
draft: true
createdAt: 2023/05/01
updatedAt: 2023/05/10
---

使用可能なパラメータは以下の通りです。

KeyTypeDefaultDescription
titlestring1つ目の<h1>ページのタイトル
descriptionstring最初の<p>相当(最初の1行)meta:description だけでなく、ページの概要としても使用される可能性があります
draftbooleanfalseドラフトフラグ。trueとなっている記事は Dev サーバー起動時のみ表示され、generateした際は出力されません
createdAtstringundefined作成日(手動)
updatedAtstringundefined更新日(手動)
headobject'true'useContentHead にアクセス
navigationbooleantruefetchContentNavigation に含めるかどうか
categorystringundefinedカテゴリー配列。定義については define-taxonomies.ts も参照

また、実績コンテンツはこれらに加えて以下のパラメータが使用できます。

KeyTypeDefaultDescription
pickupbooleanfalseピックアップリストに表示します。(アーカイブスには入らなくなります)

フロントマター以降のコンテンツが詳細ページの本文となります。
また、fulfilled が false の場合、本文の有無に関わらずリンクは生成されなくなります。
もし URL を直打ちしたとしても、一覧にリダイレクトされます。

createdAt / updatedAt

基本的には Git のコミット履歴をもとに自動で日付を算出するようになっていますが、何らかの理由でコミット日時と異なる日付を作成日や更新日に指定したい場合はこちらに入力してください。
Day.js を使ってパース・フォーマットされるため、Day.js が認識できる書式であれば多少ブレていても影響はありませんが、なるべく統一したほうがよいとは思います。

尚、この機能を使うため、デプロイ時にCIに展開する際は、shallow clone ではなく、すべての履歴を取得させる必要があります

Nuxt 3 では useContentHead をつかってページの head 要素を書き換えることができますが、
nuxt/content の場合は、Markdown による動的コンテンツがありますので、テンプレート側で指定しきれない部分がでてきます。
そこで、Frontmatter でメタデータを設定することで、head 内のメタデータなども動的に変更できるようになっています。

head:
  meta:
  - name: 'description'
    content: 'test description'

head.meta には { name: string, content: string } のオブジェクトを渡すことで任意の meta タグを追加できます。
たとえば、上記の例だと

<meta name="description" content="test description">

というメタタグが追加されます。

description 自体は、head を使わずとも、frontmatter の description キーで簡単に設定でき、かつこの場合
og:description もあわせて設定されるので上記のような使い方は基本的にはないですが、逆にもしも、
meta の description と og:description で内容をわけたい場合などには有効かもしれません

head.image を使えば、og:image を簡単に設定できます。

画像の埋め込み

絶対パスによる画像指定の他、public ディレクトリに格納された画像については、サイトルート相対パスで指定ができます。
たとえば、このような位置に配置した画像は

(project root)
  public/
    assets/
      info/
        info-lounge-logo.svg

このように記述することでも読み出せます。
SVGのようにサイズを調整したかったり、クラスを与えたい場合は普通に <img> 要素を使って書くこともできます。

![info lounge](/assets/info/info-lounge-logo.svg)
<img src="/assets/info/info-lounge-logo.svg" class="image">

<!--more-->

<!--more-->をつかうと、一覧ではそれ以降が表示されなくなります。
ただし、<!--more--> より前に hx 要素があるとそこまでしか表示されなくなります。

公開前に

Draft なので公開されることはないはずですが、そのまま残しておいても仕方がないのでこの記事は、リリース前に削除してください。
尚、同様の内容が content/README.md にもありますので消しても書き方についてのガイドはそちらから参照できます。