这里是雨云文档的存储库,基于docusaurus编写,欢迎修改然后发起PR,感谢贡献!
$ yarn
$ yarn start
这个命令会启动本地开发服务器,然后自动调起浏览器窗口,修改文档后可以自动在页面呈现,而不需要重启服务器。
如果需要网站名称、描述、logo、主题等,可以编辑docusaurus.config.js文件,编辑方法可以参考docusaurus-config。
如果需要添加或修改文档,可以在docs目录下添加或修改文档,文档的格式为markdown格式,文件名为*.md,例如index.md。
文档的标题和描述可以在文件头部添加,例如:
---
title: 文章标题
description: 文章描述
sidebar_position: 100 //侧边栏位置,数字越小越靠前
toc_max_heading_level: 2 //目录最大标题级别,默认是2
---如果只需要配置标题,可以直接修改文档内的 H1 标签,例如:
# 文章标题如果需要插入视频,可以使用以下代码:
<video class="iframe_video" controls src="外链"/>需要插入哔哩哔哩视频,可以在哔哩哔哩视频下方点击分享按钮,选择复制嵌入代码,然后粘贴到文档中,并且在代码内添加类 class="iframe_video" 即可。
可以在sidebars.js配置侧边栏,docusaurus默认侧边栏使用自动生成的方式,自动生成的侧边栏会根据文档的文件夹结构来生成,当然也可以手动配置。
目前雨云文档的第一级侧边栏需要手动配置,其他为自动生成。下边只说明有关雨云文档的配置方法,其他的可以参考docusaurus-sidebars。
如果需要添加或删除第一级侧边栏,可以在sidebars.js文件中找到sidebar变量,修改tutorialSidebar并在下方添加或删除对应的对象。
例如需要添加一个裸金属物理机的侧边栏,可以使用以下代码
{
"type": "link",//代表链接
"label": "裸金属物理机",//侧边栏名称
"className": "icon-rbm",//侧边栏css类名
"href": "/docs/category/rbm",//链接地址
}修改tutorialSidebar后,还需要在sidebar中添加对应的对象,例如
rpc: [{
"type": "category",
"label": "裸金属物理机",
link: {
type: 'generated-index',
title: '裸金属物理机',//文件夹名称
description: '关于裸金属物理机的文档。', //描述
slug: "/category/rbm" //链接地址,一般为 "/category/文件夹名称"
},
"items": [
{
"type": "autogenerated", //二级侧边栏自动生成
"dirName": "rbm" //文件夹名称
}]
},]配置后还需要在对应的文件夹下添加名为_category_.json的文件并编辑以下内容:
{
"label": "裸金属物理机", //侧边栏名称
"position": 7, //侧边栏排序优先级,数字越小越靠前
"link": {
"type": "generated-index",
"description": "快速上手裸金属物理机。"//描述
},
"className": "icon-rbm"//侧边栏css类名
}配置后可以在docs/rbm目录下添加文档,文档的文件名为*.md,例如index.md。
并且还需要在icon.scss上配置对应的图标,具体可以参考下方的样式主题部分。
二级侧边栏的配置方法和第一级侧边栏类似,但不需要配置sidebars.js文件,只需要新建一个文件夹并且配置_category_.json文件,配置后放入对应的文档即可。
例如需要在裸金属物理机下添加一个购买指南的目录,可以在docs/rbm目录下新建一个购买指南的文件夹,并在该文件夹下添加一个名为_category_.json的文件,内容如下:
{
"label": "购买指南",//侧边栏名称
"position": 2,//侧边栏排序优先级,数字越小越靠前
"link": {
"type": "generated-index"
}
}然后在该文件夹下添加文档即可。
修改网站的样式主题,可以在src/css/custom.css文件中添加样式,或者在docusaurus.config.js文件中修改主题配置。
侧边栏图片一般存放在src/css/icon.css文件内,图标可以使用base64或者svg,目前主题图标浅色为:#706E7D,图标库为font-awesome。
图标需要按照以下css选择器配置,xxxxxx为在_category_.json或sidebars.js配置的类名:
li.xxxxxx>a:before{
content: "url()";
}
li.xxxxxx>.menu__list-item-collapsible>.menu__link--sublist:before {
content: "url()";
}为了适配深色模式,图标需要配置两种颜色的图标,深色图标需要在[data-theme='dark']上添加。