特性示例

本站各种组件功能演示

终端播放器

AsciinemaPlayer 可将 asciinema 录制的终端文件嵌入到 web 进行播放。

本站为其添加了外部字体 MesloLGS NF ，以更好地支持 powerlevel10k 主题。

import AsciinemaPlayer from "@site/src/components/AsciinemaPlayer";

示例

结果

Loading...

实时编辑器

<AsciinemaPlayer
  src="/casts/neofetch.cast"
  poster="npt:0:5"
  preload={true}
  autoPlay={true}
  idleTimeLimit="2"
/>

组件参数 asciinema-player

Property	Usage
src	The location of the cast file, must be available from the browser.
style	Any additional CSS styles to apply.
cols	The number of columns in the player's terminal.
rows	The number of rows in the player's terminal.
autoPlay	Set this option to true if playback should start automatically.
preload	Set this option to true if the recording should be preloaded on player's initialization.
loop	Set this option to either true or a number if playback should be looped. When set to a number (e.g. 3) then the recording will be re-played given number of times and stopped after that.
startAt	Start playback at a given time.
speed	Playback speed. The value of 2 means 2x faster.
idleTimeLimit	Limit terminal inactivity to a given number of seconds.
theme	Terminal color theme.
poster	Poster (a preview frame) to display until the playback is started.
fit	Controls the player's fitting (sizing) behaviour inside its container element.
fontSize	Size of the terminal font.

文档切换栏

import ContextSwitcher from '@site/src/components/ContextSwitcher';

文档渐变卡片

import GetStartedCard from '@site/src/components/GetStartedCard';

Kubernetes

Get Started

Istio

Get Started

Nginx

Get Started

Kubernetes

Get Started

Istio

Get Started

Nginx

Get Started

代码块

src/components/demo.go

func main() {
  http.HandleFunc("/", func(writer http.ResponseWriter, request *http.Request) {
    message := strings.Join([]string{"Hello", "world!"}, " ")
    _, err := writer.Write([]byte(message))
    if err != nil {
      panic(err)
    }
  })
  if err := http.ListenAndServe(":8080", nil); err != nil {
    panic(err)
  }
}

func main() {
  http.HandleFunc("/", func(writer http.ResponseWriter, request *http.Request) {
    message := strings.Join([]string{"Hello", "world!"}, " ")
    _, err := writer.Write([]byte(message))
    if err != nil {
      panic(err)
    }
  })
  if err := http.ListenAndServe(":8080", nil); err != nil {
    panic(err)
  }
}

func main() {
  http.HandleFunc("/", func(writer http.ResponseWriter, request *http.Request) {
    message := strings.Join([]string{"Hello", "world!"}, " ")
    _, err := writer.Write([]byte(message))
    if err != nil {
      panic(err)
    }
  })
  if err := http.ListenAndServe(":8080", nil); err != nil {
    panic(err)
  }
}

引入外部文档

import CodeBlock from "@theme/CodeBlock";
import Source from "!!raw-loader!./kubesphere.yaml";

<CodeBlock language="yaml" title="kubesphere.yaml">
  {Source}
</CodeBlock>;

kubesphere.yaml

kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4

networking:
  apiServerAddress: "127.0.0.1" # 默认 "127.0.0.1" ，如果你需要在外部访问则需要修改为 "Node IP"
  apiServerPort: 6443
  kubeProxyMode: "iptables" # 默认 "iptables", Kind 中开启 IPVS 可能会导致错误 https://github.com/kubernetes-sigs/kind/issues/2326
  podSubnet: "10.244.0.0/16"
  serviceSubnet: "10.96.0.0/12"
  disableDefaultCNI: false # 默认 "false" ，如果你需要自己部署 CNI 则设为 "true"

containerdConfigPatches: # 根据需要指定镜像仓库
  # 下面列举了一些镜像加速地址。
  # - Docker 中国区官方镜像加速：https://registry.docker-cn.com
  # - 网易镜像加速：http://hub-mirror.c.163.com
  # - 中国科技大学镜像加速：https://docker.mirrors.ustc.edu.cn
  # - 腾讯云镜像加速：https://mirror.ccs.tencentyun.com
- |-
  [plugins."io.containerd.grpc.v1.cri".registry.mirrors."docker.io"]
    endpoint = ["https://mirror.ccs.tencentyun.com"]
nodes:
- role: control-plane
  extraPortMappings:
      # 只在一台节点配置 nodePort 端口映射既可，
      # 因为当指定 nodePort 后 k8s 集群每台节点都会暴露 nodePort ，访问任意一个既可路由到 ClusterIP Service。
  - containerPort: 30880 # containerPort（kind 节点想要映射到主机的 nodePort 端口）默认 30000-32767
    hostPort: 30880      # hostPort（宿主机端口）默认 0-65535 （注意不可重复）
    protocol: tcp # 默认 "tcp"
    listenAddress: "0.0.0.0" # 默认 "0.0.0.0"
  - containerPort: 30080
    hostPort: 80
    protocol: tcp
    listenAddress: "0.0.0.0"
  image: kindest/node:v1.21.14@sha256:9d9eb5fb26b4fbc0c6d95fa8c790414f9750dd583f5d7cee45d92e8c26670aa1  # images 发布地址 https://github.com/kubernetes-sigs/kind/releases
- role: worker
  image: kindest/node:v1.21.14@sha256:9d9eb5fb26b4fbc0c6d95fa8c790414f9750dd583f5d7cee45d92e8c26670aa1

提示和标注

Docusaurus 有一个特殊的语法来创建警告和标注：

My tip

Use this awesome feature option

备注

In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!

信息

This action is dangerous

my-blog-post.md

---
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---

Take care

This action is dangerous

注意

This action is caution

My tip

Use this awesome feature option

备注

In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!

信息

This action is dangerous

my-blog-post.md

---
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---

Take care

This action is dangerous

注意

This action is caution

下拉框

下拉框示例

展开内容

点击此处展开内容

展开内容

点击此处展开内容

展开内容

卡片组

<Tabs>
  <!-- <Tabs groupId="卡片组"> -->
  <TabItem value="卡片1">
    <!-- <TabItem value="卡片1" label="卡片1标题"> -->
    {'卡片1内容...'}
  </TabItem>
  <TabItem value="卡片2">
    <!-- <TabItem value="卡片2" label="卡片2标题"> -->
    {'卡片2内容...'}
  </TabItem>
</Tabs>

卡片1标题

my-blog-post.md

---
authors:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
---

卡片2标题

my-blog-post.md

---
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    email: [email protected]
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
---

组合嵌套 下拉+信息

信息

The authors system is very flexible and can suit more advanced use-case:

Mix inline authors and global authors

You can use global authors most of the time, and still use inline authors:

my-blog-post.md

---
authors:
  - jmarcey
  - slorber
  - name: Inline Author name
    title: Inline Author Title
    url: https://github.com/inlineAuthor
    image_url: https://github.com/inlineAuthor
---

Local override of global authors

You can customize the global author's data on per-blog-post basis:

my-blog-post.md

---
authors:
  - key: jmarcey
    title: Joel Marcey's new title
  - key: slorber
    name: Sébastien Lorber's new name
---

Localize the author's configuration file

The configuration file can be localized, just create a localized copy of it at:

website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml

组合嵌套 卡片+提示

提示

Use the callback for all your customization needs:

Per-post disabling

Disable reading time on one page:

docusaurus.config.js

module.exports = {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        blog: {
          showReadingTime: true,
          readingTime: ({ content, frontMatter, defaultReadingTime }) =>
            frontMatter.hide_reading_time
              ? undefined
              : defaultReadingTime({ content }),
        },
      },
    ],
  ],
};

Usage:

---
hide_reading_time: true
---

This page will no longer display the reading time stats!

Passing options

Pass options to the default reading time function:

docusaurus.config.js

module.exports = {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        blog: {
          readingTime: ({ content, defaultReadingTime }) =>
            defaultReadingTime({ content, options: { wordsPerMinute: 100 } }),
        },
      },
    ],
  ],
};

Using custom algorithms

Use a custom implementation of reading time:

docusaurus.config.js

const myReadingTime = require("./myReadingTime");

module.exports = {
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        blog: {
          readingTime: ({ content }) => myReadingTime(content),
        },
      },
    ],
  ],
};

浏览器外壳

在官方基础上为右侧按钮添加了打开指定连接参数

https://www.baidu.com

My Doc Section

Hello world message with some bold text, some italic text and a link

Easy to maintain open source documentation websites.

— Docusaurus

Toggle me!

This is the detailed content

Nested toggle! Some surprise inside...

😲😲😲😲😲

交互式代码

结果

Loading...

实时编辑器

const project = 'Docusaurus';

const Greeting = () => <p>Hello {project}!</p>;

render(<Greeting />);

结果

Loading...

实时编辑器

const project = "Docusaurus";

const Greeting = () => <p>Hello {project}!</p>;

render(<Greeting />);

注释

AnnotatedCommand 组件用于创建一个小文本注释。

import AnnotatedCommand from "@site/src/components/AnnotatedCommmand";

示例

结果

Loading...

实时编辑器

<AnnotatedCommand annotation="Go to beginning of buffer, change two words">
  gg2cw
</AnnotatedCommand>

Caret

Caret 组件可以显示一个块插入符号，这是 ASCII 终端的标准，也可以显示一个行插入符号，这可以用在 iTerm 之类的东西中来表示 Vim 的插入模式。

import Caret from "@site/src/components/Caret";

Use the component as below:

结果

Loading...

实时编辑器

<code className="language-python">
  def search_for_word<Caret caretStyle="block">(</Caret>word):
</code>

博客模板

website/blog/2019-09-05-博客模板.md

---
title: Welcome Docusaurus v2
description: This is my first post on Docusaurus 2.
tags: [Features, Docusaurus-v2]
date: 2021-09-13T10:00

slug: welcome-docusaurus-v2
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false

authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
---
Welcome to this blog. This blog is created with

<!-- truncate -->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

文档列表

import DocCardList from '@theme/DocCardList';

<DocCardList />

文档模板

---
title: demo
description: 关于此页的简短描述
keywords: [描述, 中心的, 关键词]
date: 2021-09-13T10:00
# tags: [hello, docusaurus-v2]
tags: 文章标签，格式类似于数组。
  - 演示
  - 开始上手

id: 文章 ID，用于自定义 URL 地址。
slug: welcome-docusaurus-v2
image: https://i.imgur.com/mErPwqL.png

sidebar_label: demo
sidebar_position: 2
displayed_sidebar: tutorialSidebar
hide_table_of_contents: true

# authors: [jmarcey, slorber]
authors:
  name: Joel Marcey
  title: Docusaurus 1 合作创造者
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
---

更多示例

• https://docusaurus.io/zh-CN/docs/next/markdown-features
• https://docusaurus.io/docs/markdown-features/code-blocks
• https://docusaurus.io/docs/styling-layout
• 导入代码片段
• 导入 Markdown
• 多文档导航栏
• https://markdown.com.cn/