跳至主要内容

2 篇文章 含有標籤「docusaurus」

檢視所有標籤

· 閱讀時間約 2 分鐘
junminhong(jasper)

起由​

最近看到docusaurus發表了v3版本, 身為一個追求最新版的愛好者, 當然要來處理一下拉

這個版本除了MDX升級以外, 也淘汰了Node.js 16, 所以在升級前要確保目前使用的是Node.js 18.0+

首先呢, 要來做套件升級​

 {
   "dependencies": {
     // upgrade to Docusaurus v3
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
     // upgrade to MDX v3
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "^3.0.0",
     // upgrade to prism-react-renderer v2.0+
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     // upgrade to React v18.0+
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     // upgrade Docusaurus dev dependencies to v3
-    "@docusaurus/module-type-aliases": "2.4.3"
-    "@docusaurus/types": "2.4.3"
+    "@docusaurus/module-type-aliases": "3.0.0"
+    "@docusaurus/types": "3.0.0"
   }
   "engines": {
     // require Node.js 18.0+
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }
# 將新版本套件進行安裝
yarn install

有遇到的問題​

Cause: Cannot find module 'prism-react-renderer/themes/github'​

主要是在升級prism-react-renderer後, 匯入主題的用法有更新所導致的

// docusaurus.config.js
- const lightTheme = require('prism-react-renderer/themes/github');
- const darkTheme = require('prism-react-renderer/themes/dracula');
+ const {themes} = require('prism-react-renderer');
+ const lightTheme = themes.github;
+ const darkTheme = themes.dracula;

從v2開始預設包含的語言更少, 需要根據自己的需求添加

// docusaurus.config.js
const siteConfig = {
  themeConfig: {
    prism: {
      additionalLanguages: ['bash', 'diff', 'json'],
    },
  },
};

結語​

筆者用到的東西較少, 所以更新起來遇到的問題也不多, 但基本上官方文件其實寫的蠻清楚的, 如果有遇到錯誤不仿可以參考一下官方文件

參考資料​

· 閱讀時間約 2 分鐘
junminhong(jasper)

起由​

原本的blog, 因為domain忘記續約, 加上換個domain的關係, 想說徹底來換一套新的blog framework.

剛好之前有關注到Facebook團隊有推出一套docusaurus

重頭戲​

其實安裝docusaurus不難, 基本上照著官方教學走就可以建置出基本的網站了。

我個人比較喜歡用yarn, 所以安裝步驟都會以yarn為主

yarn create docusaurus

[建議] 搭配 Tailwind CSS​

個人蠻愛用tailwind, 所以就乾脆整合再一起, 以利接下來的版面優化。

  • 安裝tailwind css package
yarn add tailwindcss postcss autoprefixer
  • 初始化tailwind, 創建tailwind.config.js
npx tailwindcss init
  • 你會獲得一個tailwind.config.js, 複製以下內容
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  }
}
  • 把tailwind css 放進去 custom.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Deploy​

這邊直接使用vertical

domain​