@vivliostyle/theme-academic に Abstract を追加する

/* custom CSS */

/* ----------
 * Abstract
 * ----------
 */

.abstract{
  width: 90%;
  margin: 0 auto;
}

.abstract::before{
  --vs--abstract-title: 'Abstract';
  content: var(--vs--abstract-title);
  display: block;
  font-family: var(--vs--heading-font-family);
  font-size: var(--vs--h2-font-size);
  font-weight: bold;
  text-align: center;
}

.abstract:lang(ja)::before{
  --vs--abstract-title: '概要';
  content: var(--vs--abstract-title);
}

<section class='abstract'>
ここが概要の中身です。
</section>

# @vivliostyle/theme-academicにAbstractを！

この部分は普通の文章ですね。はい。普通にMarkdownに文章を書いているだけです。

<section class='abstract'>
これは概要セクションです。「概要」というタイトルはファイル設定が日本語に設定されているときになります。日本語以外が設定されている場合は「Abstract」と英語で記載されます。使用言語設定はvivliostyle.config.jsのlanguageの部分で設定できます。そろそろサンプルテキストに書くことがなくなってきました。このくらい書けば良さげな量になるでしょうか。ではここらへんで。概要でした。
</section>

上の概要セクションはclass名がabstractのタグで文章を囲む必要があります。任意の場所に設定できます。まぁ基本一番最初だと思いますが。