Obsidianでdataviewjsを使って目次を作成する

1
dv.view('views/example')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
class Toc {
  constructor(markdown) {
    this.markdown = markdown
    this.container = dv.el('div', '')
  }

  getOutline() {
    return this.markdown
      .split('\n')
      .filter((line) => line.match(/^#+\s/))
      .map((heading) => {
        const depth = heading.split(' ')[0].length
        const text = heading.substr(depth + 1)

        return {
          depth,
          text,
          subHeadings: [],
        }
      })
  }

  getHeadings() {
    const toc = []
    const outline = this.getOutline()
    const parentHeadings = new Map()

    outline.forEach((item) => {
      parentHeadings.set(item.depth, item)

      if (item.depth === 2) {
        toc.push(item)
      } else {
        parentHeadings.get(item.depth - 1).subHeadings.push(item)
      }
    })

    return toc
  }

  createItem(heading) {
    return `<li>
      <a data-href="#${heading.text}" href="#${heading.text}" class="internal-link" target="_blank" rel="noopener">${heading.text}</a>
      ${
        heading.subHeadings.length > 0
          ? `

        <ol class="x-toc__list x-toc__list--level${heading.depth + 1}">
          ${heading.subHeadings
            .map((subHeading) => {
              return this.createItem(subHeading)
            })
            .join('')}
        </ol>
          </li>
          `
          : ''
      }`
  }

  createHTML() {
    const headings = this.getHeadings()
    const html = headings
      .map((heading) => {
        return `${this.createItem(heading)}`
      })
      .join('')

    return html
  }

  render() {
    const container = dv.el('div', '')
    const html = this.createHTML()

    container.innerHTML = `<div class="x-toc">

      <div class="x-toc__title">Table of Contents</div>
      <ol class="x-toc__list">${html}</ol>
      </div>`
  }
}

const page = dv.current()
const markdown = await dv.io.load(page.file.path)
const toc = new Toc(markdown)

toc.render()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.x-toc {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 1rem;
}

.x-toc ol {
  list-style: none;
}

.x-toc .x-toc__title {
  margin-bottom: 10px;
  font-weight: bold;
}

.x-toc .x-toc__list {
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.x-toc .x-toc__list li::before {
  counter-increment: item;
  content: counters(item, '.') ' ';
}

.x-toc .x-toc__list--level3 {
  padding-left: 1rem;
}

1
await dv.view('views/toc')

1
2
3
4
5
6
7
## Sample Heading2

### Sample Hading3

### Sample Hading3-1

## Sample Heading2-1