gitbook网站制作vscode配置（二）

啥也不是的py人

已于 2022-03-02 14:53:24 修改

阅读量804

点赞数 2

分类专栏：前端文章标签：前端

于 2022-02-28 22:19:52 首次发布

本文链接：https://blog.csdn.net/weixin_50920579/article/details/123183396

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

下载准备

课程资料：

一、Node环境准备 · Gitbook操作指南http://demo.kujiajia.xyz/%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87.html

接着上个教程

用vscode配置gitbook（一）改_啥也不是的py人的博客-CSDN博客以往的版本 | Node.js下载10.23.0具体操作看我上一篇gitbook的blog这里附上版本信息C:\Users\hu211>node -vv10.23.0C:\Users\hu211>npm -v4.2.0更新一下npm版本C:\Users\hu211>npm -g install npm@6.14.8C:\Users\hu211>npm -v6.14.8接下来下载gitbookC:\Users\hu21.https://blog.csdn.net/weixin_50920579/article/details/123179462?spm=1001.2014.3001.5501

现在对网站进行一些更改

把readme.md拖入subline（其他编辑器也可以）

随便输入点东西

然后ctrl+s保存

然后再ctrl中断cmd进程

再

gitbook serve

D:\giitbook_project>gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed
info: loading plugin "livereload"... OK
info: loading plugin "highlight"... OK
info: loading plugin "search"... OK
info: loading plugin "lunr"... OK
info: loading plugin "sharing"... OK
info: loading plugin "fontsettings"... OK
info: loading plugin "theme-default"... OK
info: found 1 pages
info: found 0 asset files
info: >> generation finished with success in 0.5s !

Starting server ...
Serving book on http://localhost:4000

这样就写出了静态的网页

gitbook还可以生成html（在对应子目录的book文件夹里）

然后下载vscode

Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Download

直接把项目文件拖进vscode中打开即可

vscode配置

拓展安装

一直点确定直到出现下图的拓展然后安装即可

安装这个拓展即可

此时就可以对markdown文件进行操作

初始化配置

在vscode终端里输入npm init

然后一直空格直到出现完yes

PS D:\前端\vswebdesgin> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vswebdesgin)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\前端\vswebdesgin\package.json:

{
  "name": "vswebdesgin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
PS D:\前端\vswebdesgin>

成功后出现以下这个json文件

更改文件代码

{
  "name": "vswebdesgin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "gitbook serve",
    "build": "gitbook build"
  },
  "author": "",
  "license": "ISC"
}

运行时报错解决参考

无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本_dujyong的博客-CSDN博客

然后运行成功

PS D:\前端\vswebdesgin> gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK  
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK   
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK
info: found 1 pages
info: found 1 asset files
info: >> generation finished with success in 0.6s ! 

Starting server ...
Serving book on http://localhost:4000

PS D:\前端\vswebdesgin> npm run serve
npm ERR! missing script: serve

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hu211\AppData\Roaming\npm-cache\_logs\2022-02-28T12_34_12_988Z-debug.log 
PS D:\前端\vswebdesgin> npm run serve

这个报错原因是因为package.json没有保存

ctrl+s保存后运行就可以了

PS D:\前端\vswebdesgin> npm run serve

> vswebdesgin@1.0.0 serve D:\前端\vswebdesgin
> gitbook serve

Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 7 plugins are installed 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK
info: found 1 asset files
info: >> generation finished with success in 2.3s !

Starting server ...
Serving book on http://localhost:4000

配置文件创建

创建,bookignore

这个文件的作用是不让有的母目录的文件不想被打包进book的输出里时就需要这个

gitbook是通过book.js来配置的所以我们要创建这个

在这个文件里写入以下配置代码

module.exports = {
  //书籍信息
  titile:"书名",
  description:"描述",
  isbn:"图书编号",
  author:"作者",
  lang:"zh-cn",

  //插件列表
  "plugins": [],

  //插件全局配置
  "pluginsConfig":{},
  //模板变量
  variables:{
      //自定义
  },
};

以下为原作者大佬代码地址

book.js · 松露/electronic-book-demo - Gitee.com

再次膜拜大佬

以下是需要一个markdown语法的编辑器

https://ghproxy.com/https://github.com/iuxt/src/releases/download/2.0/typora-0-11-18.exehttps://ghproxy.com/https://github.com/iuxt/src/releases/download/2.0/typora-0-11-18.exe

以上为typora最后一版免费的

以下为macos版

https://ghproxy.com/https://github.com/iuxt/src/releases/download/2.0/typora-0-11-18.dmghttps://ghproxy.com/https://github.com/iuxt/src/releases/download/2.0/typora-0-11-18.dmg