咸鱼

咸鱼是以盐腌渍后，晒干的鱼

0%

网站文档docusaurus使用

发表于 更新于 分类于

项目

docusaurus 是 Faecbook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具，使用 Markdown即可更新网站。

安装

按照文档安装docusaurus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
$ cnpm install --global docusaurus-init
$ docusaurus-init
Website folder created!

Installing latest version of Docusaurus in website.

npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

> gifsicle@4.0.1 postinstall D:\SourceCode\npm\demo\website\node_modules\gifsicle
> node lib/install.js

  √ gifsicle pre-build test passed successfully

> jpegtran-bin@4.0.0 postinstall D:\SourceCode\npm\demo\website\node_modules\jpegtran-bin
> node lib/install.js

  √ jpegtran pre-build test passed successfully

> optipng-bin@5.1.0 postinstall D:\SourceCode\npm\demo\website\node_modules\optipng-bin
> node lib/install.js

  √ optipng pre-build test passed successfully
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN website No description
npm WARN website No repository field.
npm WARN website No license field.

+ docusaurus@1.9.0
added 1064 packages in 65.262s
Docusaurus installed in website folder!


> @ examples D:\SourceCode\npm\demo\website
> docusaurus-examples

Wrote docusaurus scripts to package.json file.

demo
├── docker-compose.yml
├── Dockerfile
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   ├── exampledoc4.md
│   └── exampledoc5.md
└── website
    ├── blog
    │   ├── 2016-03-11-blog-post.md
    │   ├── 2017-04-10-blog-post-two.md
    │   ├── 2017-09-25-testing-rss.md
    │   ├── 2017-09-26-adding-rss.md
    │   └── 2017-10-24-new-version-1.0.0.md
    ├── core
    │   └── Footer.js
    ├── package-lock.json
    ├── package.json
    ├── pages
    │   └── en
    │       ├── help.js
    │       ├── index.js
    │       └── users.js
    ├── README.md
    ├── sidebars.json
    ├── siteConfig.js
    └── static
        ├── css
        │   └── custom.css
        └── img
            ├── favicon.ico
            ├── oss_logo.png
            ├── undraw_code_review.svg
            ├── undraw_monitor.svg
            ├── undraw_note_list.svg
            ├── undraw_online.svg
            ├── undraw_open_source.svg
            ├── undraw_operating_system.svg
            ├── undraw_react.svg
            ├── undraw_tweetstorm.svg
            └── undraw_youtube_tutorial.svg

运行demo

1
2
$ cd website/
$ npm start

docusaurus-demo1.png

docusaurus-demo2.png

docusaurus-demo3.png

构建&生成静态Html文件

1
$ npm run build

这将在 website 目录下生成一个 build 文件夹, 其中包含 website 目录下所有文档和其他页面中所含的 .html 文件。

目录介绍

  • 文档源文件: 包含示例网站 docs 目录，用 Markdown 编写.
  • 博客Blog: 包含示例网站 website/blog 目录，用 Markdown 编写.
  • 页面：包含示例网站顶级页面的文件夹 website/pages。
  • 静态资源与图片：包含供网站使用的静态资源文件夹 website/static
  • 页脚： website/core/Footer.js 文件是一个 React 组件，用于生成 Docusaurus 站点的页脚，它可以由用户定制。
  • 配置文件： website/siteConfig.js 文件是 Docusaurus 的主配置文件。
  • 工具栏： sidebars.json 文件包含文档文件的结构与排序。

官网效果

docusaurus使用1.png

docusaurus使用2.png

docusaurus使用3.png

使用docusaurus的用户

所有用户

大部分无法访问，挑了几个