Lewati ke konten utama

Others

Info

Beberapa topic akan ditambahkan ke dalam wiki. Stay tuned!

peringatan

Beberapa materi atau topic kemungkinan bersifat fundamental, harap dimaklumi :)

Create a Page

Add Markdown or React files to src/pages to create a standalone page:

  • src/pages/index.js → localhost:3000/
  • src/pages/foo.md → localhost:3000/foo
  • src/pages/foo/bar.js → localhost:3000/foo/bar

Create your first React Page​

Create a file at src/pages/my-react-page.js:

src/pages/my-react-page.js
import React from 'react';
import Layout from '@theme/Layout';

export default function MyReactPage() {
  return (
    <Layout>
      <h1>My React page</h1>
      <p>This is a React page</p>
    </Layout>
  );
}

Create your first Markdown Page​

Create a file at src/pages/my-markdown-page.md:

src/pages/my-markdown-page.md
# My Markdown page

This is a Markdown page

Create a Document

Documents are groups of pages connected through:

  • a sidebar
  • previous/next navigation
  • versioning

Create your first Doc​

Create a Markdown file at docs/hello.md:

docs/hello.md
# Hello

This is my **first Docusaurus document**!

Configure the Sidebar​

Docusaurus automatically creates a sidebar from the docs folder.

Add metadata to customize the sidebar label and position:

docs/hello.md
---
sidebar_label: 'Hi!'
sidebar_position: 3
---

# Hello

This is my **first Docusaurus document**!

It is also possible to create your sidebar explicitly in sidebars.js:

sidebars.js
export default {
  tutorialSidebar: [
    'intro',
    'hello',
    {
      type: 'category',
      label: 'Tutorial',
      items: ['tutorial-basics/create-a-document'],
    },
  ],
};

Create a Blog Post

Docusaurus creates a page for each blog post, but also a blog index page, a tag system, an RSS feed...

Create your first Post​

Create a file at blog/2021-02-28-greetings.md:

blog/2021-02-28-greetings.md
---
slug: greetings
title: Greetings!
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
tags: [greetings]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.

Markdown Features

Docusaurus supports Markdown and a few additional features.

Front Matter​

Markdown documents have metadata at the top called Front Matter:

my-doc.md
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---

## Markdown heading

Markdown text with [links](./hello.md)

Images​

Regular Markdown images are supported.

You can use absolute paths to reference images in the static directory (static/img/logo_jed.png):

![Docusaurus logo](/img/logo_jed.png)

Docusaurus logo

You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:

![Docusaurus logo](./img/logo_jed.png)

Code Blocks​

Markdown code blocks are supported with Syntax highlighting.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions​

Docusaurus has a special syntax to create admonitions and callouts:

:::tip[My tip]

Use this awesome feature option

:::

:::danger[Take care]

This action is dangerous

:::
My tip

Use this awesome feature option

Take care

This action is dangerous

MDX and React Components​

MDX can make your documentation more interactive and allows using any React components inside Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !

Congratulations!

You have just learned the basics of Docusaurus and made some changes to the initial template.

Docusaurus has much more to offer!

Anything unclear or buggy in this tutorial? Please report it!

What's next?​