工具
- markdown相关软件(vscode、dillinger、MaHua、MarkdownPad、Typora) 有很多,自己搜索一下markdown软件vscode, markdown文件编写nodejs,用于运行本地项目yarn,用于运行本地项目
安装
1、vscode
除了使用markdown软件编辑markdow文件之外,还可以用vscode编辑;
下载地址:https://code.visualstudio.com/
下载完成之后,安装vscode,vscode安装完成之后,在打开vscdoe的请况下再安装以下插件,点击install即可: markdown插件:https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one markdown预览插件:https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
安装完成后,可以直接用vscode打开markdown文件,点击右键 “MPE打开侧边预览查看” 效果
2、nodejs
下载地址:http://nodejs.cn/download/
安装直接下一步下一步即可; 安装完nodejs后,进入命令窗口,不会的请直接搜索命令窗口怎么进; 输入
node --version
版本号大于 v16 即可 再次输入
npm --version
版本号大于 6 即可
3、yarn
必需安装完nodejs后,开始安装yarn;如果没有安装,请查看第2条安装nodejs方法;
安装yarh有多种方式,任意选择一种方式安装成功即可:
注意: 苹果电脑可能有的没有权限执行以下方法的时候要加一个sudo
方法一
npm install --global yarn
苹果电脑
sudo npm install --global yarn
安装后检查 通过如下命令测试 Yarn 是否安装成功:
yarn --version
开始
1、初始化目录及index.md
yarn init
yarn add --dev vitepress
创建文件夹docs,新建index.md (docs/index.md)
2、添加这些脚本到 package.json
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
3、在 docs 目录下创建 .vitepress 目录即可开始设置配置
module.exports = {
title: '王旭晨的文档网站', // 网站标题
description: '总结归纳学习中的知识', // 网站的描述
base: '/base/', // 部署时的路径 默认 / ,使用二级地址 /base/
head: [['link', {rel: 'icon', href: '/favicon.ico'}]],// 添加网站图标
// 主题配置
themeConfig: {
// 导航栏配置
nav: [
{text: '首页', link: '/'},
{text: '指南', link: '/guide/'},
{text: 'HTML/CSS', items: [
{text: 'HTML5', link: '/htmldocs/'},
{text: 'CSS3', link: '/cssdocs/'}]},
{text: 'JavaScript', link: '/jsdocs/'},
{text: '面试题', link: ''},
{text: '关于作者', link: ''},
],
// 左侧导航栏配置
sidebar: {
'htmldocs': [{text: 'HTML5', children: [
{text: '概况', link: '/htmldocs/'},
{text: '入门', link: '/htmldocs/htmlone'},
{text: '进阶', link: '/htmldocs/htmltwo'},]}],
'cssdocs': [{text: 'css3', children: [
{text: 'css文档', link: '/cssdocs/'},
{text: 'css文档1', link: '/cssdocs/cssone'}]}],
}
}
}
4、本地启动服务
yarn docs:dev
这样我们这个网站就搭建完成了。
感谢你的阅读!如果你有任何问题或想法,请随时在评论区与我们分享。期待与你在更多的技术话题上交流和学习!