跳至主要内容

關於這個網站

這個網站是透過Docusaurus v3所建起來的，網站託管平台是Netlify Status。在這個頁面會記錄一些我客製化的部分以及修改過程中參考doc的重點。

修改項目​

Style​

配色的部分參考這一頁，先找出想要的主要顏色然後根據網站回饋是否適合在做些微調整。以下是我的網站配色

[data-theme='dark'] {
  --ifm-color-primary: #57b9ea;
  --ifm-color-primary-dark: #3aade6;
  --ifm-color-primary-darker: #2ca7e5;
  --ifm-color-primary-darkest: #198dc8;
  --ifm-color-primary-light: #74c5ee;
  --ifm-color-primary-lighter: #82cbef;
  --ifm-color-primary-lightest: #adddf5;
  --ifm-background-color: #241438;
}

如果要在網站內使用FontAwesome的icon，可以先參考這份說明文件，或者是這份說明文件。
我採用的做法是後者在docusaurus.config.js中加入custom.css加入下載的all.css

  theme: {
    customCss: ['./src/css/custom.css', './src/assets/fontawesome/css/all.css'],
  },

圖片​

網站logo是透過favicon所產生出來，而其他圖片則是使用OPENAI的DALL·E來產生。
考量圖片的載入速度，原本用.png都改成了.webp

Blockquote​

blockquote的部分參考了一些範本，改成以下樣式

blockquote{
  font-size: 1.1em;
  margin: 0.5rem;
  font-style:italic;
  color: var(--blockquote-color);
  padding: 1rem 2rem 1rem 4rem;
  border-left: 0.3rem solid var(--blockquote-color);
  line-height: 1.6;
  position: relative;
  background: var(--blockquote-background-color);
  border-radius: 0.5rem;
}

blockquote::before{
  font-family: Arial;
  content: "\201C";
  color: var(--blockquote-color);
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after{
  content: '';
}

修改後的成果

文件重點記錄​

  • 不使用doc，可以在docusaurus.config.js裡面設定docs: false - reference
  • 每一篇blog都可以使用frontmatter來編輯blog metadata，常用的是以下幾個參數 - reference
    • slug
    • title
    • authors
    • tags
  • 在文章中插入以下符號，來分隔出預覽與正文內容 - reference
    • .md使用<!--truncate-->
    • .mdx使用{/* truncate */}
  • 重點提示區塊有幾種風格可以使用，該區塊的標題也可以修改 - reference
    • note
    • tip
    • info
    • warning
    • danger
  • 透過<details></details>的標籤，可以收合區塊 - reference
    • 裡面有<summary></summary>的話，區塊會預設收起來