文档中心搭建指南

（一）环境部署

-- 克隆代码&本地试运行

代码仓库地址

1.1 从 GitEE 下拉代码

教程：Git基本操作

图片加载中...

*代码仓库位置暂时不变，可直接取如下URL

URL ：https://gitee.com/sxcigWL/sceg-officialsystemguide.git

1.1.1 在目标文件夹下（CMD黑窗口）运行如下命令

shell

git clone https://gitee.com/sxcigWL/sceg-officialsystemguide.git

图片加载中...

此处黑窗口不要关，之后还用

图片加载中...

1.2 阅读 README.md 进行本地化配置

仓库README.md

~~~
开始开发
推荐使用 yarn 代替 npm 进行包管理安装方法 npm install yarn -g
切换到相关文件夹下，克隆项目代码
shell
git clone https://gitee.com/sxcigWL/sceg-officialsystemguide.git
安装项目依赖
shell
yarn
删除 node_modules/vitepress 下的 dist 文件夹
复制 lib/vitepress 下的 dist 文件夹到 node_modules/vitepress 文件夹下
启动开发环境
shell
# 启动本地开发环境
yarn dev
# 启动局域网开发环境
yarn dev --host
~~~

我们已经完成了开始开发的1.

接下来需要安装node、npm、yarn、vitepress及项目依赖

1.2.1 安装`node`、`npm`

Node.js 安装配置

npm安装教程

博客已非常详细，在此就不多赘述了

1.2.2 安装`yarn`、`vitepress`

1.2.2.1 安装`yarn`

在刚才的CMD黑窗口中运行如下指令

shell

npm install yarn -g

yarn的安装和使用

1.2.2.2 安装`vitepress`

在CMD黑窗口中继续运行如下指令

shell

yarn add --dev vitepress vue

工具已完备，接下来，安装项目依赖

1.2.3 安装项目依赖

进入项目文件夹

shell

cd sceg-officialsystemguide

图片加载中...

※重要

此步骤需留意目录位置

图片加载中...

输入：

shell

yarn

图片加载中...

可能会有点慢，需要稍等片刻

安装成功后如下

图片加载中...

文件管理器中可以看到增加了node_modules文件夹

图片加载中...

1.2.4 更换`dist`

删除 node_modules/vitepress 下的 dist 文件夹

图片加载中...

复制 lib/vitepress 下的 dist 文件夹到 node_modules/vitepress 文件夹下

1.2.5 试运行

输入：

shell

 yarn dev

显示如下即为正常运行

图片加载中...

在浏览器地址栏中输入：

html

http://localhost:5173/

注意

此处链接以CMD黑窗口中生成的链接为准

出现 “山西建工官方文档中心”，运行成功！

图片加载中...

（二）撰写 Markdown

2.1 新建

2.1.1 新建目录

在项目文件夹【sceg-officialsystemguide】下找到docs，进入docs，在docs新建文件夹，目录命名为当前模块英译

图片加载中...

此处以【项目管理系统】下的【工程管理】举例

图片加载中...

2.1.2 新建文件

进入上一步新建的文件夹中，新建后缀为.md的文件

图片加载中...

2.2 编辑

2.2.1 简单文本编辑

一般index.md为改模块的第一文件（选择模块之后显示的第一个文件）

此处便在index.md中编辑演示

图片加载中...

推荐Markdown插件：Markdown All in One
图片加载中...

2.2.2 插入图片和视频

2.2.2.1 工具推荐

点击即可获取安装包

截屏工具：snipaste(win64版) 、snipaste(mac版)
录制工具：EV录屏(win版)、OBS-Studio(win版)
上传工具：PicGo(win版)
图片压缩工具：TinyPNG(web)

2.2.2.2 注意事项

上传的图片一定要记得压缩！！！

2.2.2.3 图片压缩

图片压缩工具：TinyPNG(web)

图片加载中...

2.2.2.4 配置上传工具`PicGo`

上传工具：PicGo(win版)

在工具左侧导航栏找【图床设置】，选择【阿里云OSS】，进行如下配置

具体配置，请查看阿里云OSS存储官网https://oss.console.aliyun.com/bucket

图片加载中...

2.2.2.5 使用上传工具`PicGo`

首先选择下方的URL，然后上传文件(mp4、png格式)

文件上传之后，链接会直接存储到剪切板中，在文档中右键粘贴便可以获取链接

此时链接缺少前缀http://

注意是 http:// 而不是https://

图片加载中...

在md文件中使用示例

markdown

<!-- 图片 -->
<CustomImage src="http://gfwd.sxjzgcyxgs.com/%E5%B7%A5%E5%85%B7%E6%8C%87%E5%8D%97/%E6%90%AD%E5%BB%BA%E6%8C%87%E5%8D%97%E4%B9%8B%E4%BD%BF%E7%94%A8%E4%B8%8A%E4%BC%A0%E5%B7%A5%E5%85%B7.png" skeletonHeight="200px" />

2.3 增加跳转

2.3.1 为目录树增加跳转

由于没有绑定跳转到文件的链接，现在点击“工程管理”下的页签并不能跳转到刚才编辑的md文件

需要打开sceg-officialsystemguide\docs\.vitepress\theme\sidebar\index.js文件，在目录树上增加跳转链接

图片加载中...

本地运行,通过上方导航栏查看

图片加载中...

此时发现首页的页面元素点击之后并不能跳转到项目管理

图片加载中...

2.3.2 为页面元素增加跳转

需要打开sceg-officialsystemguide\docs\.vitepress\theme\components\HomeSystems.vue文件，为页面元素增加跳转链接

图片加载中...

2.3.3 为导航栏增加跳转

【项目管理系统】之前增加过跳转，此处再阐明一下配置路径

图片加载中...

（三）部署

可直接将编写的Markdown文件交给文档中心管理员，由管理员统一部署

3.1 打包

本地测试无误后，执行命令：

shell

yarn build

去往项目文件夹下的 dist 文件夹

图片加载中...

将全部文件打包成 dist.tar

图片加载中...

打包

图片加载中...

3.2 删除旧版本

3.2.1 SSH远程连接服务器

yaml

服务器地址： 1.71.138.195

口令等需询问管理员

3.2.2 前往服务端部署目录

切换目录 /usr/share/nginx/html

bash

cd /usr/share/nginx/html

3.2.3 执行清除脚本 `clear.sh`

shell

./clear.sh

【clear.sh】脚本代码

后续文件增多后，此脚本需继续完善！

shell

rm -rf hashmap.json
rm -rf tools
rm -rf newgrand
rm -rf logo
rm -rf *.html
rm -rf assets
rm -rf icons
rm -rf qiyuesuo
rm -rf dist.tar

3.3 上传最新版本包

通过远程访问工具上传版本包

3.4 解压

bash

tar -xf dist.tar

部署完毕 !

3.5 测试

图片加载中...

文档中心搭建指南 #

（一） 环境部署 #

1.1 从 GitEE 下拉代码 #

1.1.1 在目标文件夹下（CMD黑窗口）运行如下命令 #

1.2 阅读 README.md 进行本地化配置 #

~~~ #

开始开发 #

~~~ #

1.2.1 安装node、npm #

1.2.2 安装yarn、vitepress #

1.2.2.1 安装yarn #

1.2.2.2 安装vitepress #

1.2.3 安装项目依赖 #

1.2.4 更换dist #

1.2.5 试运行 #

（二） 撰写 Markdown #

2.1 新建 #

2.1.1 新建目录 #

2.1.2 新建文件 #

2.2 编辑 #

2.2.1 简单文本编辑 #

2.2.2 插入图片和视频 #

2.2.2.1 工具推荐 #

2.2.2.2 注意事项 #

2.2.2.3 图片压缩 #

2.2.2.4 配置上传工具PicGo #

2.2.2.5 使用上传工具PicGo #

2.3 增加跳转 #

2.3.1 为目录树增加跳转 #

2.3.2 为页面元素增加跳转 #

2.3.3 为导航栏增加跳转 #

（三） 部署 #

3.1 打包 #

3.2 删除旧版本 #

3.2.1 SSH远程连接服务器 #

3.2.2 前往服务端部署目录 #

3.2.3 执行清除脚本 clear.sh #

3.3 上传最新版本包 #

3.4 解压 #

3.5 测试 #

文档中心搭建指南

（一）环境部署

1.1 从 GitEE 下拉代码

1.1.1 在目标文件夹下（CMD黑窗口）运行如下命令

1.2 阅读 README.md 进行本地化配置

~~~

开始开发

~~~

1.2.1 安装`node`、`npm`

1.2.2 安装`yarn`、`vitepress`

1.2.2.1 安装`yarn`

1.2.2.2 安装`vitepress`

1.2.3 安装项目依赖

1.2.4 更换`dist`

1.2.5 试运行

（二）撰写 Markdown

2.1 新建

2.1.1 新建目录

2.1.2 新建文件

2.2 编辑

2.2.1 简单文本编辑

2.2.2 插入图片和视频

2.2.2.1 工具推荐

2.2.2.2 注意事项

2.2.2.3 图片压缩

2.2.2.4 配置上传工具`PicGo`

2.2.2.5 使用上传工具`PicGo`

2.3 增加跳转

2.3.1 为目录树增加跳转

2.3.2 为页面元素增加跳转

2.3.3 为导航栏增加跳转

（三）部署

3.1 打包

3.2 删除旧版本

3.2.1 SSH远程连接服务器

3.2.2 前往服务端部署目录

3.2.3 执行清除脚本 `clear.sh`

3.3 上传最新版本包

3.4 解压

3.5 测试