跳到主要内容

网页制作

环境的安装​

  1. 下载并安装 nvm

windows用户：

前往 GitHub 项目页：[nvm-windows Releases](https://github.com/coreybutler/nvm-windows/releases)下载最新的 nvm-setup.exe 安装程序，并完成安装，一切默认即可。

Linux用户：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  1. 查找目前node.js都有哪些版本

Windows用户nvm-windows

nvm list available

Linux用户

nvm ls-remote

以上命令会列出可用的nodejs，选择一个安装即可，例如：20.20.1

  1. 安装 Node.js

使用 nvm 安装 Node.js LTS 版本：

nvm install --lts  #安装最新的长期支持版本
nvm install 18.20.4   # 示例：安装 Node.js 18 LTS
nvm use 18.20.4       # 切换到该版本
nvm use 18.20.4 default # 设置默认版本
  1. 验证安装
    查看已安装版本：
nvm list

如果显示版本号，说明安装成功

  1. 创建一个经典demo
# 创建
npx create-docusaurus@latest my-website classic

# 检查依赖
npm install

# 运行(任选一个)
npm run start  # standard
npx docusaurus start  #temp

JavaScript 更简单，适合初学者。
TypeScript 更强大，适合中高级开发者，支持类型检查和智能提示。



文档编写​

将 Markdown 或 React 文件添加到 src/pages 目录中，以创建一个 独立页面:

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

创建第一个 React 页面​

创建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>
  );
}

现在可以通过 http://localhost:3000/my-react-page访问刚刚建立的页面.

创建第一个 Markdown 页面​

创建src/pages/my-markdown-page.md并写入:

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

This is a Markdown page

现在可以通过http://localhost:3000/my-markdown-page访问刚刚建立的markdown页面.

使用Google字体代替原本的字体​

编辑 src/css/custom.css:

/* ------------------------------ */
/*      Google Fonts 引入         */
/* ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Quicksand:wght@400;600;700&family=Fira+Code:wght@400;500;600&display=swap');

/* ------------------------------ */
/*      全站字体配置（正文）       */
/* ------------------------------ */
:root {
  --ifm-font-family-base: 'Noto Sans SC', sans-serif;
  --ifm-font-family-monospace: 'Fira Code', monospace;

  /* —— 你的其他配置保持不动 —— */
}


/* ------------------------------ */
/*      标题：圆润 Quicksand       */
/* ------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', 'Noto Sans SC', sans-serif;
  font-weight: 600;
}


/* ------------------------------ */
/*      代码区：Fira Code          */
/* ------------------------------ */
pre, code, kbd, samp {
  font-family: 'Fira Code', monospace;
}


/* ------------------------------ */
/*      你的其他配置       */
/* ------------------------------ */
}

参考资料：docusaurus.new