Blog | foolishandi gone

mdx博客示例

2022年11月2日 · 阅读需 1 分钟

user

md 文档与 jsx 混写记录，具体使用见：mdx 示例

提示

Use the power of React to create interactive blog posts.

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

初始化

2021年8月26日 · 阅读需 1 分钟

fool

user

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

2019-05-30-welcome.md
2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

mdx示例

2021年8月26日 · 阅读需 2 分钟

1.引入组件代码

直接引用组件代码

/src/pages/index
import React from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import HomepageFeatures from "@site/src/components/HomepageFeatures";

import styles from "./index.module.css";
// import SearchBarWrapper from "../theme/SearchBar";

function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx("hero hero--primary", styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro"
          >
            JUST GONE FOR 5MIN ⏱️
          </Link>
        </div>
      </div>
      {/* <SearchBarWrapper></SearchBarWrapper> */}
    </header>
  );
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

2.混用 mdx

Markdown 与 jsx 混用

cs
fdfgdfg
fdsfs

一级引用
二级引用
三级引用
四级引用
五级引用
六级引用

//无序列表嵌套

123
- abc
- bcd
- cde
465
789 //有序列表嵌套

abcd
1. abcde
2. abcde
3. abcde
bcde
cdef

shaoliangdaima,danhangshiyong

表格

123	234	345
abc	bcd	cde
abc	bcd	cde
abc	bcd	cde

tab 栏

Apple
Orange
Banana

This is an orange 🍊

Windows
macOS

Use Ctrl + C to copy.

Windows
macOS
Linux

I am Windows.

3.在线实时编辑器

实时编辑器

// highlight-next-line
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>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

// highlight-next-line
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>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

结果

实时编辑器

const project = "Docusaurus";

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

function MyPlayground(props) {
  return (
    <div>
      <div onClick={() => alert("hey!")}>Click me</div>
    </div>
  );
}
render(<MyPlayground />);

const project = "Docusaurus";

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

function MyPlayground(props) {
  return (
    <div>
      <div onClick={() => alert("hey!")}>Click me</div>
    </div>
  );
}
render(<MyPlayground />);

结果

mdx博客示例

初始化

mdx示例

1.引入组件代码

2.混用 mdx

表格

tab 栏

3.在线实时编辑器

4.美人鱼图

5.CodeSandBox

1.引入组件代码​

2.混用 mdx​

表格​

tab 栏​

3.在线实时编辑器​

4.美人鱼图​

5.CodeSandBox​

1.引入组件代码

2.混用 mdx

表格

tab 栏

3.在线实时编辑器

4.美人鱼图

5.CodeSandBox