2017.11.11 [土] 手軽に目次機能を導入できる「TOC」がダウンロードできなかったので。
ブログなど文章が多くなると、見出しに移動する目次が設置したいと思うようになりました。
調べてみると、jQueryのプラグインで「TOC」が手軽に目次機能を設置できるようで、便利そうです。
参考：サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
TOC | jQuery Table of Contents Plugin
早速、公式サイトに行って、参考記事と同じようにダウンロードしようとすると「404: Not Found」でファイルがダウンロードできません。
GitHubへのリンクは有効でしたので、そこからcloneして使えってことでしょうか。
まだ、beta版なのでバグもあるかもしれませんが、とりあえず使ってみたいので、cloneしてbuildしたいと思います。
GitHubからclone
今回は、Windowsで作業してみます。
ターミナルも最近、アイコンの色が不評だったオレンジ色から青色に戻った「Visual Studio Code」を使います。
デスクトップに展開したいと思いますので、デスクトップに移動します。
$ cd ~/Desktop
gitのインストールも確認しておきます。
$ git --version //インストールされていれば、バージョンが表示されます。 git version 2.13.2.windows.1
では、GiTHubからcloneします。
$ git clone https://github.com/jgallen23/toc.git //特に問題なくcloneされると思います。 Cloning into 'toc'... remote: Counting objects: 620, done. remote: Total 620 (delta 0), reused 0 (delta 0), pack-reused 620 Receiving objects: 100% (620/620), 430.87 KiB | 132.00 KiB/s, done. Resolving deltas: 100% (253/253), done.
「toc」フォルダがcloneされます。
「example」フォルダの中にindex.htmlが入っていますが、このままではTOCは動きません。
さらに、tocフォルダに移動してbuildします。そのためには、npmが必要なので、バージョンも確認します。
$ cd toc $ npm -v
tocをbuild
buildします。
$ npm install
「toc」フォルダ内に「dist」フォルダが作成され、中にはtoc.jsがあります。
先ほどの「example」フォルダ内のindex.htmlを開くとTOCのデモが表示されます。
TOCを使ってみる
利用する場合は、JavaScriptでオプションで設定する、公式サイトの方法とは変わっているようです。
実際に目次を表示する場合は、divなどにclass属性にtocを設定し、data-toc属性に"h1, h2, h3"など目次として表示したい要素を設定します。
idやclassもCSSと同じように、# や. でも設定できるようです。
さらに、classにrightを入れると右側に配置されます。
なんとなく、上記だけの機能でも使えそうなので、とりあえず試しに使ってみたいと思います。
- 関連記事
-
- picture要素と、source要素と、srcset属性と (2018/10/02)
- CSS Grid Layoutの時代がやってくる。［その3］ (2018/08/15)
- CSS Grid Layoutの時代がやってくる。［その2］ (2018/03/26)
- CSS Grid Layoutの時代がやってくる。［その１］ (2018/02/25)
- 手軽に目次機能を導入できる「TOC」がダウンロードできなかったので。 (2017/11/11)
- ターミナルを学校のProxy環境で使う時の設定 (2017/05/05)
- SyntaxHighlighter4.0.1にアップデート (2017/04/30)
- そうだ、ECMAScript6（ES2015）でいこう (2017/03/13)
- NodeList と HTMLCollection と Node.appendChild() と (2017/01/23)
- そろそろFlexboxを勉強し始めてもいいんじゃないだろうか (2015/12/23)
