One post tagged with "docusaurus"

Docusaurus 使用

2019年1月2日 · One min read

前端打工人

代码块

语言后添加 title 来添加标题。

/src/components/HelloCodeTitle.js

function HelloCodeTitle(props) {
  return <h1>你好，{props.name}</h1>
}

mdx

支持MDX.

使用 React

<button onClick={() => alert('button clicked!')}>Click me!</button>

npm2yarn

在 NPM 和 Yarn 中同时显示 CLI 命令

npm install @docusaurus/remark-plugin-npm2yarn

交互式代码编辑器

语言源标签中附加上 live 标签

Live Editor

function Clock(props) {
  const [date, setDate] = useState(new Date())
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000)

    return function cleanup() {
      clearInterval(timerID)
    }
  })

  function tick() {
    setDate(new Date())
  }

  return (
    <div>
      <h2>现在是 {date.toLocaleTimeString()}。</h2>
    </div>
  )
}

function Clock(props) {
  const [date, setDate] = useState(new Date())
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000)

    return function cleanup() {
      clearInterval(timerID)
    }
  })

  function tick() {
    setDate(new Date())
  }

  return (
    <div>
      <h2>现在是 {date.toLocaleTimeString()}。</h2>
    </div>
  )
}

Result

Live Editor

function Run() {
  console.log(111)
  return <div>浏览器调试窗口查看结果！</div>
}

function Run() {
  console.log(111)
  return <div>浏览器调试窗口查看结果！</div>
}

Result

支持多语言的代码块

JavaScript
Python
Java

function helloWorld() {
  console.log('Hello, world!')
}

def hello_world():
  print 'Hello, world!'

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

Details

Markdown 可以嵌入 HTML 元素

Details element example

Toggle me!

This is the detailed content

Nested toggle! Some surprise inside...

😲😲😲😲😲

导入代码段

yarn add raw-loader

//手写call
Function.prototype.call = function (context, ...args) {
  context = context || window
  context.fn = this
  const res = context.fn(...args)
  delete context.fn
  return res
}
//手写apply
Function.prototype.apply = function (context, args) {
  context = context || window
  context.fn = this
  const res = context.fn(...args)
  delete context.fn
  return res
}
//手写bind
Function.prototype.bind = function (context, ...args) {
  context = context || window
  context.fn = this
  const res = function (...args2) {
    return context.fn(...args, ...args2)
  }
  return res
}

选项卡

Apple
Orange
Banana

This is an apple 🍎

Tabs props take precedence over the TabItemprops:

<Tabs
  defaultValue='apple'
  values={[
    { label: 'Apple 1', value: 'apple' },
    { label: 'Orange 1', value: 'orange' },
    { label: 'Banana 1', value: 'banana' },
  ]}>
  <TabItem value='apple' label='Apple 2'>
    This is an apple 🍎
  </TabItem>
  <TabItem value='orange' label='Orange 2'>
    This is an orange 🍊
  </TabItem>
  <TabItem value='banana' label='Banana 2' default>
    This is a banana 🍌
  </TabItem>
</Tabs>

Apple 1
Orange 1
Banana 1

This is an apple 🍎

提示

note

Some content with markdown syntax. Check this 代码块.

tip

Some content with markdown syntax. Check this Details}.

info

Some content with markdown syntax. Check this tabs.

caution

Some content with markdown syntax. Check this api.

danger

Some content with markdown syntax. Check this api.

指定标题

Use tabs in admonitions

Apple
Orange
Banana

This is an apple 🍎

静态资源

JSX 的例子

MyComponent.js

import DocusaurusImageUrl from '@site/static/img/docusaurus.png'
;<img src={DocusaurusImageUrl} />

MyComponent.js

<img src={require('@site/static/img/docusaurus.png').default} />

MyComponent.js

import useBaseUrl from '@docusaurus/useBaseUrl'
;<img src={useBaseUrl('/img/docusaurus.png')} />

SVG

MyComponent.js

import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg'
;<DocusaurusLogoWithKeytar title='Docusaurus Logo' className='logo' />

Markdown 的例子

引用 static 文件夹中的 Markdown 链接及图像将自动转换为 require("@site/static/assetName.png")" 格式，Docusaurus 会自动在网址前加上 baseUrl 变量

my-doc.md

![Docusaurus](/img/docusaurus.png)

得益于 MDX，您也可以在 Markdown 文件中使用 useBaseUrl 工具函数！但是，您需要使用类似 <img> 的 HTML 标签而非 Markdown 图像标签。其语法与 JSX 一致。

my-doc.mdx

---
id: my-doc
title: My Doc
---

// Add to the top of the file below the front matter.
import useBaseUrl from '@docusaurus/useBaseUrl';

...

<img alt="Docusaurus with Keytar" src={useBaseUrl('/img/docusaurus_keytar.svg')} />

样式工具

通过编辑/src/css/custom.css 文件来自定义样式。

/src/css/custom.css

/**
 * You can override the default Infima variables here.
 * Note: this is not a complete list of --ifm- variables.
 */
:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

Primary Color:

CSS Variable Name	Hex	Adjustment
`--ifm-color-primary-lightest`	`#80aaef`
`--ifm-color-primary-lighter`	`#5a91ea`
`--ifm-color-primary-light`	`#4e89e8`
`--ifm-color-primary`	`#3578e5`	0
`--ifm-color-primary-dark`	`#1d68e1`
`--ifm-color-primary-darker`	`#1b62d4`
`--ifm-color-primary-darkest`	`#1751af`

替换 src/css/custom.css 里面的变量，将会看到新的样式

--ifm-color-primary: #3578e5;
--ifm-color-primary-dark: #1d68e1;
--ifm-color-primary-darker: #1b62d4;
--ifm-color-primary-darkest: #1751af;
--ifm-color-primary-light: #4e89e8;
--ifm-color-primary-lighter: #5a91ea;
--ifm-color-primary-lightest: #80aaef;

代码块​

mdx​

使用 React

npm2yarn​

交互式代码编辑器​

支持多语言的代码块​

Details​

Details element example​

导入代码段​

选项卡​

提示​

note

tip

info

caution

danger

指定标题​

Use tabs in admonitions

静态资源​

JSX 的例子​

Markdown 的例子​

样式工具​

代码块

mdx

npm2yarn

交互式代码编辑器

支持多语言的代码块

Details

Details element example

导入代码段

选项卡

提示

指定标题

静态资源

JSX 的例子

Markdown 的例子

样式工具