茱萸note

電子工作の備忘録と旅行の記録

Web 電子工作

記事の先頭に目次を置く

投稿日:2016年3月14日 更新日:

Blogの記事の先頭に自動的に目次を生成するにはどうすれば良いか?


JavaScript を使って実装したいと思います.

<h3>を列挙

記事上部には以下を書き加えます。

<div id="index_h3"></div>

記事下部には以下を書き加えます。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       str += "<li>elements[i].innerHTML</li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

<div id="index_h3"></div>に箇条書きにして<h3>要素を列挙しています。

ページ内リンクを張る

記事下部を以下のように修正します。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       elements[i].setAttribute("id","h3_" + i);
       str += "<li><a href=\"#h3_" + i + "\">" + elements[i].innerHTML + "</a></li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

ただし、はてなブログの場合、自動的にKeyWordリンクが貼られてしまった見出しでは正しくリンクが張れないので、正規表現をつかって目次の見出しタイトルのHTMLタグを削除します。見出し本体のHTMLタグ並びにKeyWordリンクは削除されないのでご安心を。

<script type="text/javascript"> 
(function(){
   var elements = document.getElementsByTagName("h3");
   var str = "<ul>\n";
   for(var i = 1;i < elements.length;i++){
       elements[i].setAttribute("id","h3_" + i);
       str += "<li><a href=\"#h3_" + i + "\" style=\"color:#000000;\">" + elements[i].innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,"") + "</a></li>\n";
   }
   str += "</ul>";
   document.getElementById("index_h3").innerHTML = str;
}());
</script>

上記のCodeではついでに目次の文字色を黒に変えています。

-電子工作
-,

関連記事

Raspberry Pi で Windows PC をシャットダウン or スリープモードにする

Windows PC を Raspberry Pi から遠隔操作してシャットダウン or スリープモードにします。

AVR32を使う

Atmel製のマイコン「AVR32」を使ってみた感想です。

【Ubuntu】NVIDIAドライバ・CUDA・CUDNNをインストールして深層学習環境を整える

Ubuntuで Nvidiaドライバ、CUDA、CUDNN をインストールし深層学習環境を整える方法を説明します。

Atmel SAM D21 を使ってみる(1)

秋月で売っているAtmelのARMマイコンATSAMD21G18AをWindows環境で使いたいと思います。

TeXの多書体化

TeXを多書体化して、文書中で自由にフォントを変えられるようにします。