これは何？

Zendeskのヘルプセンターの記事に目次を自動挿入する方法です。
記事内の見出し1、見出し2、見出し3等の内容を使って自動で目次を作成します。

自動挿入されるのは、以下のような目次です。

どこまでカスタマイズできるか？

この目次自動作成機能は、カスタマイズも用意です。
例えば、

見出し2と見出し3が存在する場合のみ目次を自動挿入する
目次には、見出し2の階層までしか表示しない
目次に番号等を振る
です。

CSSやJavascriptの知識が少しでもあれば、上記はどれも簡単にカスタマイズできます。

前提知識

html、css、javascriptの知識が多少ある方

実現方法と仕組み

本方法は、Zendesk専用の仕組みで無く、『見出しを設置できるjQueryプラグイン』を使っています。
具体的には、『Table of Contents jQuery Plugin - jquery.toc』というもの。
つまり、もくじの自動生成はjQueryプランでやっており、デザインはCSSで調整しているという感じです。

実装方法

1. tocプラグインをダウンロードして、assetsフォルダに入れる

以下よりTable of Contents(toc) jQuery Pluginをダウンロードします。
https://ndabas.github.io/toc/

そして、ダウンロードしたら、assetsの中に配置します。

jquery.toc.js
jquery.toc.min.js

2. tocプラグインの設定jsを作成

tocプラグインは、色々カスタマイズできるようになっています。
下記ページを読んだり、ググればカスタマイズ例が色々載っていますので、分かる方はご自身でやってください（笑）
https://ndabas.github.io/toc/

以下は、あくまでサンプルです。
サイト構造によっては変更が必要ですが、cssとjavascriptが分かれば、どこを変えれば良いか分かるはずです。

assetsフォルダ配下に、『tag_add.js』というファイルを作ります。

$(document).ready(function() {
  // アーティクルページ内のh1とh2の要素を取得。ただ、1つめは記事タイトルなので除外。
  var hTags = $('.article-body h1, .article-body h2').not('#article-title h1').first();

  // h1とh2が記事に存在すれば、見出しを挿入。h3のみがあった場合でも目次を自動挿入したいなら、上記でh3も追加
  if (hTags.length){
    // tocにより目次を挿入するためのhtmlタグを準備
    var tocTag = '<div id="toc-container"><ul id="toc"></ul></div>';

    // もくじをどこに入れるか指定する。記事タイトルの下に目次が入るように指定
    $('#article-title h1').after(tocTag);

    // 目次に表示する見出しを指定。h1-h3まで表示する
    $("#toc").toc({content: ".article-body", headings: "h1,h2,h3"});
  }
});

3. 記事ページで読み込む設定

最後に記事ページの上部にスクリプトタグで、(2)のjsを読み込むように設定します。

<script src="{{asset 'tag_add.js'}}"></script>

カスタマイズ

カスタマイズする際は、tag_add.jsファイルを変更する形になります。
ググれば色々設定例も転がっています。

デザインについては、CSSを変更すればＯＫです。
目次内の見出しに番号を振りたい場合は、CSSで行います。
list-style-typeで、色々な形で番号振ったりできますので、お好みでどうぞ！
http://www.htmq.com/style/list-style-type.shtml

Zendesk ヘルプセンターの記事に目次を自動挿入表示する方法