doxygenの出力ファイルにヘッダ、フッタを入れる(header.html,footer.html)

えるいーだーのマニュアルを作っててdoxygenを使っていたときに出来て嬉しかったこと

それはヘッダとフッタを自分で作れたこと。
今までできないと思ってたもんなぁ。

自作のヘッダやフッタなんて仕事では使うこと無いし、今までは必要なかったし・・・多分今のところ「できるようになっただけ」

また自作のヘッダにしても、大体が「だからどうした」って感じになりそうだけど。

まずは元の見本から

ヘッダ

自分の出力したdoxygenのhtmlファイルからまでをコピペしてください。サイドパネル付きやロゴやバージョンの有無で変わってきますのでこのソースをそのままコピペすると何があるかわかりません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <meta name="generator" content="Doxygen 1.13.2" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>えるいーだーマニュアル: 機能紹介</title>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="dynsections.js"></script>
    <script type="text/javascript" src="clipboard.js"></script>
    <link href="navtree.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="navtreedata.js"></script>
    <script type="text/javascript" src="navtree.js"></script>
    <script type="text/javascript" src="resize.js"></script>
    <script type="text/javascript" src="cookie.js"></script>
    <link href="search/search.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="search/searchdata.js"></script>
    <script type="text/javascript" src="search/search.js"></script>
    <link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="top">
        <!-- do not remove this div, it is closed by doxygen! -->
        <div id="titlearea">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr id="projectrow">
                        <td id="projectlogo"><img alt="Logo" src="appicon2.png" /></td>
                        <td id="projectalign">
                            <div id="projectname">
                                えるいーだーマニュアル
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- end header part -->

フッタ

から最後までコピペ

<!-- start footer part -->
<div id="nav-path" class="navpath">
    <!-- id is needed for treeview function! -->
    <ul>
        <li class="footer">構築: <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen" /></a> 1.13.2 </li>
    </ul>
</div>
</body>
</html>

これで準備完了

次は編集

編集後のヘッダ

コメントしたところを参照してください。html5に対応しただけです

<!DOCTYPE html>     <!-- ヘッダをhtml5形式に    -->
<html lang="ja">    <!-- 日本語であることを宣言  -->
<head>
    <!--    $マクロは   https://www.doxygen.nl/manual/config.html#cfg_html_header -->
    <meta charset="utf-8" />    <!-- 文字コードをutf-8に設定  -->
    <!-- IE11のサポートなんか削除 -->
    <meta name="generator" content="Doxygen $doxygenversion" /> <!-- generatorのdoxygenのバージョンを入れるようにする   -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>$title</title>                                       <!-- タイトルを設定する  -->
    <link href="tabs.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="dynsections.js"></script>
    <script type="text/javascript" src="clipboard.js"></script>
    <link href="navtree.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="navtreedata.js"></script>
    <script type="text/javascript" src="navtree.js"></script>
    <script type="text/javascript" src="resize.js"></script>
    <script type="text/javascript" src="cookie.js"></script>
    <link href="search/search.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="search/searchdata.js"></script>
    <script type="text/javascript" src="search/search.js"></script>
    <link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="top">
        <!-- do not remove this div, it is closed by doxygen! -->
        <div id="titlearea">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr id="projectrow">
                        <td id="projectlogo"><img alt="Logo" src="$projectlogo" /></td> <!-- ロゴ画像を表示する  -->
                        <td id="projectalign">
                            <div id="projectname">      
                                $projectname    <!-- プロジェクト名を表示する   -->
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- end header part -->

編集後のフッタ

著作権表示を入れただけ。doxygenの表記は残します。著作権の年の部分とdoxygenのバージョンは$マクロで自動変換されます。

<!-- フッタに広告を入れるとおかしくなるので入れない    -->
<!-- start footer part -->
<div id="nav-path" class="navpath">
    <!-- id is needed for treeview function! -->
    <ul>
        <li class="footer">© $year <a href="https://mazepin-led.com/">マゼピン</a> All Rights Reserved.</li>    <!-- 著作権表示 -->
        <li class="footer">構築: <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen" /></a> $doxygenversion </li><!-- doxygenのバージョン -->
    </ul>
</div>
</body>
</html>

doxygenから取り込めるようにする

この編集したファイルはdoxygenのHTML_HEADER,HTML_FOOTERに読み込むファイルとして指定します

HTMLの項目のところ。
これでヘッダ、フッタを取り込める。<body>タグもヘッダ部分なのでxのカード画像を入れたり(全部のページが一緒になっちゃうけど)これで色々情報を入れたりできるようになった。

マゼピンの部屋

このブログを検索

このブログを検索