JSDoc：如何在生成的文档中包含自定义 css 文件模板？

Question

JSDoc docs 说

Copying a directory of images to the output directory. To copy all of the static files in ./myproject/static to the output directory:
    "default": {
      "staticFiles": {
        "include": [
            "./myproject/static"
        ]
      }
    }
If your static files directory contains the file ./myproject/static/img/screen.png, you can display the image in your docs by using the HTML tag <img src="img/screen.png">.

所以我在 jsdoc.config.json

中有这个

    "templates": {
        "default": {
            "staticFiles": {
                "include": [
                    "doc/_static/css/index.css"
                ]
            }
        }
    }

我的 css 文件与我生成的文档一起添加到文件夹中，

但我真的希望我所有生成的文档都包含该 css 文件，而不必手动将 <style src="index.css" /> 标记手动放入我的自动生成的文档中

它不在我自动生成的文档的头部，如下图所示

我希望头部是这样的

<head>
    <meta charset="utf-8">
    <title>JSDoc: Home</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="index.css">
</head>

Answer 1

我认为您可能需要使用 templates.default.layoutFile 配置属性.

提供自定义布局 (HTML) 文件

"templates": {
    "default": {
        "layoutFile": "custom-layout.tmpl"
    }
}

文件路径相对于：

Relative paths are resolved against the current working directory; the path to the configuration file; and the JSDoc directory, in that order.

这是用于 templates.default.layoutfile

的示例模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><?js= title ?></title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="dark.css">
    <link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>

    <nav class="sidebar">
        <header class="nav-header">
            <a href="index.html">
                <img class="nav-logo" src="images/logo.svg" src="image" onerror="this.onerror=null; this.src='images/logo.png'" alt="alt text" />
                <h1>Project Name</h1>
            </a>
        </header>

        <?js= this.nav ?>
    </nav>

    <div id="main">
        <h1 class="page-title"><?js= title ?></h1>

        <?js= content ?>
    </div>

    <br class="clear">

    <footer>
        Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc <?js= env.version.number ?></a>
    </footer>

</body>
</html>

JSDoc：如何在生成的文档中包含自定义 css 文件模板？

JSDoc: How do you include a custom css file template in your generated docs?

javascript

css

jsdoc

jsdoc3