跳至主要内容

[置頂] 置頂文

· 閱讀時間約 8 分鐘
Weiwei
Weiwei
前端小白

簡單記錄一下為什麼會有這個區塊。

先前使用文檔來整理版本變更紀錄。但是為了方便長期維護及文章的管理，所以重新找了官方文件將部落格(Blog)給啟用。

置頂文章內主要存放Docusaurus的參考資料(但是仍可能會在撰寫新的文章時遺漏統整到這邊)

另外還有在撰寫新文章時的模板等等

參考資料​

相關連結​

CheatSheet​

不滿寬圖片使用img標籤​

<img src={require('url').default} 
  alt=""
  style={{display:"block", margin:"auto"}}
/>

圖片下方文字敘述​

  • 功能：圖片下方新增一行敘述（圖片說明，圖片來源等等）
  • 樣式：文字置中、文字顏色為系統主色、與上方距離0.5rme(8px)、與下方距離1rem(16px)
<p style={{textAlign:"center",color:"var(--ifm-color-primary)",marginTop:"0.5rem",marginBottom:"1rem"}}></p>

段落間隔​

  • 功能：製造間隔，使用p段落並搭配style內撰寫height的方式
  • 樣式：height:1rem
<p style={{height:"1rem" , margin:"0px"}}></p>

使用MDX​

範例如下：

MDX
export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

interactive code editor​

官方給的範例如下

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

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

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

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

自己測試的範例如下（可能需要等到學會React之後才有能力修改）

```js live
function Clock(props) {
  let a=3;
  return (
    <div>
      {a}
    </div>
  );
}
```

Docs模板​

本站採用docusuaurus的自動生成側邊欄功能，所以如果需要調整文件的顯示順序需要透過檔案名稱(e.g:00.md)來維護 markdown內最前方加上以下片段

設定可以選擇性填寫

title,sidebar_label,slug等等不一定要全部都完整填寫

docusaurus會自動根據優先權，如果沒有設定也會帶入其他的值來正確生成

例如沒有填寫sidebar_label的時候預設會使用title內的字串來帶入側邊欄名稱

slug如果沒有填寫則會依照檔案名稱及資料夾名稱自動生成路由

H1(# 標題)的必要性

在有填寫title的metadata狀態下，預設是會以title的名稱來命名文件的h1標題

會在新文章版型(也就是以下的程式碼區塊)增加一個#的H1標題區主要是擔心在撰寫時會不小心使用H1來當作文章的主要段落（文章主要段洛從H2開始）

另外，路由的參考會由title負責，但是文章實際的H1在同時填寫title以及# 標題的狀態下，會依照# 標題為主。

xx.md
---
title: '[分類] 標題'
tags:
  - 標籤一
  - 標籤二
description: tag內會看到的文字說明
sidebar_label: "調整側邊欄名稱(可以視情況精簡避免跑出第二行)"
slug: 指定特定路由(e.g:/)
sidebar_position: 1
---
# [分類] 標題
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## TL;DR
## 參考資料
## 相關連結

---
sidebar_positon

在撰寫TLDR的時候可以加上sidebar_position: 1。讓該篇文章固定在該資料夾下的最上層。

但是撰寫一般文章要記得將該設定移除

category資料夾建立​

在側邊欄，資料夾稱為category，每個資料夾內會有一支_category_.json去管理該資料夾的內容 _category_.json內容如下

_category_.json
{
  "label": "Dacusaurus",
  "position": 1,
  "collapsible": true,
  "collapsed":true,
  "link": {
    "type": "generated-index"
  }
}
  • label : 代表該資料夾名稱（如果沒有label，則以實際檔案管理系統的資料夾名稱命名）
  • position : 資料夾排序用，如果多個資料夾的position相同，以檔案管理系統排序的順序為準。
  • collapsible : 是否可折疊。設為不可折疊則不會有collapse符號，並且內容文件都會展開。
  • collapsed : 預設是否折疊。在進到文檔頁面的時候，是否預設要直接展開。
  • link : 尚未研究，需參考官方文件... 這邊測試事都會加上，會在點擊資料夾的時候內容區也會產生該資料夾子文檔的捷徑。

建立刷題紀錄格式​

### 題目簡介
- `url`:[題目url](題目url)
- `description`:題目說明
  ``` title="" showLineNumbers
  題目提供輸入輸出格式
  ```
<details>
  <summary>
  After practice
  </summary>
  <div>
  <Tabs>
  <TabItem value="我的答案" label="我的答案" default>

  ```javascript showLineNumbers
  請輸入
  ```
  </TabItem>
  <TabItem value="最佳解" label="最佳解">

  ```javascript showLineNumbers
  請輸入
  ```
  </TabItem>
  <TabItem value="知識點" label="知識點">
  </TabItem>
  <TabItem value="其他補充" label="其他補充">
  </TabItem>
  </Tabs>
  </div>
</details>

Blog模板​

Blog

在使用Blog的時候，可以使用檔案名稱來管理發文的順序。官方提供了許多種的格式可以管理。(官方文件)

本站採用YYYY-MM-DD的資料夾，並且在內新增與標題名稱相符的markdown文檔。 (少數狀況可能會使用title的屬性來調整貼文的標題，或是使用slug去調整Router產生的路徑)

好處是，如果有圖片的需求，可以直接將圖片放置在日期下方的資料夾中。一來是引用方便（使用相對路徑），再來是也比較好管理。

網站改版紀錄​

---
title: 標題
slug: 如果沒特別需求可以不用指定路徑
authors:
  - name: Weiwei
    title: 前端小白
    url: https://github.com/cieliscute
    image_url: https://github.com/cieliscute.png
tags: 
- Pinned
date: 3000-01-01T10:00
---
顯示在預覽的內容
<!-- truncate -->
需要點開Read More才會看到的內容
標籤：
最後由 kaiwei 於 更新