@forsakringskassan/docs-generator
npm install --save-dev --save-exact @forsakringskassan/docs-generator
设置
过 import.meta.dirname 作为第一个参数 Generator 以配置文件的目录作为工作目录.
生成器选项中的路径相对于此目录解决 .
监视( 开发模式)
您可以使用 : .serve()。 。 。 .
import {
Generator,
livereloadProcessor,
} from "@forsakringskassan/docs-generator";
const docs = new Generator(import.meta.dirname, {
site: {
name: "My Awesome Site",
},
setupPath: "docs/src/setup.ts",
processors: [livereloadProcessor({ enabled: true })],
sourceFiles: [/* ... */],
});
docs.build();
docs.serve();
供应商别名
销售者别名是可选的,它允许您在捆绑时将一个包替换为另一个包. 下面的例子可以替代软件包 vue 用软件包 vue/dist/esm.bundle.js。当给定一个别名时,可以使用给定的别名以及原包名导入该包。 例如,当使用以下配置"vue"时,可以导入并解析为"vue/dist/esm.bundle.js".
import {
Generator,
livereloadProcessor,
} from "@forsakringskassan/docs-generator";
const docs = new Generator(import.meta.dirname, {
site: {
name: "My Awesome Site",
},
setupPath: "docs/src/setup.ts",
vendor: [
{
package: "vue",
alias: "vue/dist/esm.bundle.js",
},
],
});
使用量
使用 Vue 2
Vue 2 需要安装额外的依赖:
npm install --save-dev --save-exact @vue/component-compiler
创建 setup 调用 docs/src/setup.ts数字 :
import Vue from "vue";
import { type SetupOptions } from "@forsakringskassan/docs-generator";
/* optionally add global plugins or configuration */
//Vue.use(MyAwesomePlugin);
export function setup(options: SetupOptions): void {
const { rootComponent, selector } = options;
const vm = new Vue(rootComponent);
vm.$mount(selector);
}
使用 Vue 3
创建 setup 调用 docs/src/setup.ts数字 :
import { createApp } from "vue";
import { type SetupOptions } from "@forsakringskassan/docs-generator";
export function setup(options: SetupOptions): void {
const { rootComponent, selector } = options;
const app = createApp(rootComponent);
/* optionally add global plugins or configuration */
//app.use(MyAwesomePlugin);
app.mount(selector);
}
样式
提供了三个CSS文件:
@forsakringskassan/docs-generator/style/index.css(别名:@forsakringskassan/docs-generator/style(中文(简体) )@forsakringskassan/docs-generator/style/core.css@forsakringskassan/docs-generator/style/site.css
core 包含组件和元素的必要样式,以及 site 包含文档站点工作所需的布局、打字等.
index 是两者的结合,在大多数情况下应当使用.
样式可以编译为 compileStyle(name, src, [options])数字 :
import { Generator } from "@forsakringskassan/docs-generator";
const docs = new Generator(import.meta.dirname, {
site: {
name: "My Awesome Site",
},
setupPath: "docs/src/setup.ts",
});
docs.compileStyle("docs", "./docs/src/style.scss", {
appendTo: "head",
});
何处 docs/src/style.scss 包含:
@use "~@forsakringskassan/docs-generator/style";
标记
链接 {@link ...}
创建不同文档使用的链接 {@link ID [TITLE]},例如:
See {@link MyAwesomeComponent} for details or the {@link getting-started getting started guide}.
将作为:
<p>
See
<a href="./components/my-awesome-component.html">MyAwesomeComponent</a> for
details or the
<a href="../guides/getting-started.html">getting started guide</a>.
</p>
ID可以是文档标识符,名称,也可以是其中一个别名. 链接目的地将始终相对于当前文档.
代码围栏
对于已配置的语言( 默认) html 财务报告和审定财务报表 vue) 代码栅栏作为浏览器中的活例运行,可选择显示源代码.
下列标记可以使用:
borderless- 将边框从示例中删除.fullscreen- 支持在全屏中查看示例.static- 强制代码在不进行活预览的情况下提供(只有语法突现).live-example- 将示例标为:LiveExample组件.nomarkup- 对于活的示例,它隐藏了语法突出的代码,只显示运行代码的结果.test-id=STRING- 设定data-test属性.
static 财务报告和审定财务报表 live 用于手动设置当代码是否作为活例运行时.
```html static
<p>This is displayed as syntax highlighted code only</p>
```
```js live
alert("This is run in the browser");
```
实例可以使用 import 指令 :
```import
MyAwesomeFile.vue
```
这将搜索 MyAwesomeFile.vue 在配置中 exampleFolders。 。 。 .
HTML 注释可以放在文件名之前或之后.
导入一个使用 生活实例 您还需要使用 live-example 标签.
```import live-example
MyAwesomeLiveExampleFile.vue
```
前题
status
为组件设置状态徽章 .
承认以下地位:
ProduktionsklarDeprekeradExperimentellPreliminärDraft(折旧的别名用于:Preliminär(中文(简体) )Beta(折旧的别名用于:Preliminär(中文(简体) )
title
使用的文档标题 <title> 财务报告和审定财务报表 <nav>
short-title
需要缩短标题时使用的文档标题,例如站点导航.
visible
设定为 false 从导航菜单中隐藏文档.
默认 true。 。 。 .
include
设定为 false 不将文档写入文件或包含为页面.
默认 true。 。 。 .
内置标签
{@@link ...}
隐含标题 :
Use the {@@link MyAwesomeComponent} component.
明确标题:
Use the {@@link MyAwesomeComponent awesome component}.
{@@optional}
创建标记( badge) 标记某物为可选 .
输入 :
{@@optional}
输出 :
[可选]
温和
这个 纳尼亚克人 调温引擎用于向 HTML 渲染文档. 见 临时文件 寻求帮助.
这些自定义过滤器和标签可供使用 :
container
{% container "awesome-name" %}
创建处理器可注入内容的容器.
环境变量
DOCS_ICON_LIB
首选图标库包名 .
默认为 @fkui/icon-lib-default。 。 。 .
使得可以动态地加载图标并获取图标元数据.
图书馆一定是用 @fkui/icon-lib-builder。 。 。 .
const icons = await import(process.env.DOCS_ICON_LIB);
for (const entry of Object.values(icons)) {
entry.injectSpritesheet();
}
处理器
马多莫
const docs = new Generator(import.meta.dirname, {
processors: [
+ matomoProcessor({
+ siteId: "1",
+ apiUrl: "https://matomo.example.net/",
+ trackerUrl: "https://matomo.example.net/",
+ }),
],
});
可选设置 hostname 以限制哪些主机名可以运行 Matomo 分析器 :
const docs = new Generator(import.meta.dirname, {
processors: [
matomoProcessor({
siteId: "1",
apiUrl: "https://matomo.example.net/",
trackerUrl: "https://matomo.example.net/",
+ hostname: "docs.example.net",
}),
],
});
只有域必须指定,例如它不应包括 https:// 或路径 /path/to/docs。 。 。 .
多个主机名可以指定为数组.