Astroで目次を設定

Posted on:2024-3-8

astro-paperに標準で入っている目次関係のプラグインを設定した。 目次の実現方法はいろいろあるが、とりあえず標準機能でできることをやってみた。

目次

初期設定

初期状態は以下。
astro.config.mjs

  markdown: {
    remarkPlugins: [
      remarkLinkCard,
      remarkToc,
      [
        remarkCollapse,
        {
          test: "Table of contents",
        },
      ],
    ],
    shikiConfig: {
      theme: "one-dark-pro",
      wrap: true,
    },
    extendDefaultPlugins: true,
  },

目次 remark-toc

キーワードにマッチした最初のヘッディングに目次が生成される。
デフォルトキーワードは以下。case-insensitive

 heading (string, default: '(table[ -]of[ -])?contents?|toc')
  — heading to look for, wrapped in new RegExp('^(' + value + ')$', 'i')

折りたたみ remark-collapse

ヘッディングが”Table of contents”の場合、その章が折りたたまれる。

変更後の設定

設定内容は

目次、折りたたみ

astro.config.mjs

markdown: {
    remarkPlugins: [
      remarkLinkCard,
      [
        remarkToc,
        {
          heading: 'contents|(記事の)?目次',
        },
      ],
      [
        remarkCollapse,
        {
          test: 'contents|記事の目次',
        },
      ],
    ],
    shikiConfig: {
      theme: 'one-dark-pro',
      wrap: true,
    },
    extendDefaultPlugins: true,
  },

見た目

styles/base.css

...
@layer base {
  :root,
  html[data-theme="light"] {
    ...
    --color-border: 236, 233, 233;
    --color-border2: #ece9e9;
    ...
 }
  html[data-theme="dark"] {
    ...
    --color-border: 171, 75, 8;
    --color-border2: #ab4b08;
    ...
 }

...
h3#記事の目次,
h3#contents {
  margin-bottom: 0 !important;
  font-size: 1.1em;
  font-weight: 500;
  padding: 6px 0 0 15px;
  border-top: 1px solid VAR(--color-border2);
}
h3#記事の目次 + p,
h3#contents + p {
  margin: 0;
  padding: 0;
}
h3#記事の目次 ~ details,
h3#contents ~ details {
  width: 100%;
  margin: 0;
  padding: 0 0 6px 18px;
  border-bottom: 1px solid VAR(--color-border2);
  font-size: 0.95em;
  line-height: 1.8em;
}
h3#記事の目次 ~ details ul,
h3#contents ~ details ul {
  margin: -20px 0 0 0;
  padding: 0 0 0 22px;
}
h3#記事の目次 ~ details ul li ul,
h3#contents ~ details ul li ul,
h3#記事の目次 ~ details ul li,
h3#contents ~ details ul li {
  margin: 0;
}
h3#記事の目次 ~ details ul li a,
h3#contents ~ details ul li a {
  text-decoration: none;
}

h3#目次 {
  margin-bottom: 0 !important;
  font-size: 1.1em;
  font-weight: 500;
  padding: 6px 0 0 15px;
  border-top: 1px solid VAR(--color-border2);
}
h3#目次 + ul {
  margin: 0;
  padding: 0 0 6px 39px;
  border-bottom: 1px solid VAR(--color-border2);
  font-size: 0.95em;
  line-height: 1.8em;
}
h3#目次 + ul li,
h3#目次 + ul li ul {
  margin: 0;
}
h3#目次 + ul li a {
  text-decoration: none;
}

ul li {
  padding-left: 0 !important;
}
...

参考

MarkdownとMDX
AstroでMarkdownやMDXを使ってコンテンツを作成する方法を紹介します。
MarkdownとMDX favicon https://docs.astro.build/ja/guides/markdown-content/#markdownプラグイン
MarkdownとMDX
GitHub - remarkjs/remark-toc: plugin to generate a table of contents (TOC)
plugin to generate a table of contents (TOC). Contribute to remarkjs/remark-toc development by creating an account on GitHub.
GitHub - remarkjs/remark-toc: plugin to generate a table of contents (TOC) favicon https://github.com/remarkjs/remark-toc
GitHub - remarkjs/remark-toc: plugin to generate a table of contents (TOC)
GitHub - Rokt33r/remark-collapse: Make a section collapsible!
Make a section collapsible! Contribute to Rokt33r/remark-collapse development by creating an account on GitHub.
GitHub - Rokt33r/remark-collapse: Make a section collapsible! favicon https://github.com/Rokt33r/remark-collapse
GitHub - Rokt33r/remark-collapse: Make a section collapsible!