408/408CSFamily
1
0
Fork 0
mirror of https://github.com/142vip/408CSFamily.git synced 2026-04-03 18:48:09 +08:00
Code Issues Projects Releases Wiki Activity

feat: 新增markdown转思维导图脚本，导航栏改版

Browse Source
This commit is contained in:
chu fan
2023-10-08 17:44:11 +08:00
parent 898b8ec880
commit 67cee8cbc7
14 changed files with 319 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/.vuepress/config/navbar.ts
View File

@@ -25,8 +25,27 @@ export const navbar = [
},
{
text: '思维导图',
link: "/manuscripts/note-map"
// link: "/manuscripts/mark-map",
children: [
{
text: '数据结构',
link: '/manuscripts/mark-map/ds-map.md'
},
{
text: '操作系统',
link: '/manuscripts/mark-map/os-map.md'
},
{
text: '计算机组成原理',
link: '/manuscripts/mark-map/ccp-map.md'
},
{
text: '计算机网络',
link: '/manuscripts/mark-map/cn-map.md'
}
]
},
// http://localhost:4200/mark-map/job-poster-bytedance.html
{
text: "网站",
children: [

3
docs/.vuepress/config/sidebar.ts
View File

@@ -1,7 +1,7 @@
import {dsSidebar} from "../../manuscripts/ds/ds.sidebar";
import {cppSidebar} from "../../manuscripts/ccp/cpp.sidebar";
import {cnSidebar} from "../../manuscripts/cn/cn.sidebar";
import {noteMapSidebar} from "../../manuscripts/note-map/note-map.sidebar";
import {noteMapSidebar} from "../../manuscripts/mark-map/note-map.sidebar";
import {osSidebar} from "../../manuscripts/os/os.sidebar";
/**
@@ -12,5 +12,4 @@ export const sidebar = {
"/manuscripts/os": osSidebar,
"/manuscripts/ccp": cppSidebar,
"/manuscripts/cn": cnSidebar,
"/manuscripts/note-map": noteMapSidebar
}

2
docs/.vuepress/config/theme.config.ts
View File

@@ -102,6 +102,8 @@ export default {
include: true,
// 容器
container: true,
// mermaid
mermaid: true,
},
components: {
// 插件选项

40
docs/.vuepress/public/mark-map/ccp-map.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"计算机组成原理","children":[]},null)</script>
</body>
</html>

40
docs/.vuepress/public/mark-map/cn-map.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"计算机网络","children":[]},null)</script>
</body>
</html>

40
docs/.vuepress/public/mark-map/ds-map.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"数据结构","children":[]},null)</script>
</body>
</html>

40
docs/.vuepress/public/mark-map/os-map.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"操作系统","children":[]},null)</script>
</body>
</html>

40
docs/.vuepress/public/mark-map/readme.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.4/dist/index.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"思维导图","children":[{"type":"list_item","depth":1,"payload":{"lines":[4,5]},"content":"<a href=\"../../mark-map/ds-map.html\" target=\"_blank\">数据结构</a>","children":[]},{"type":"list_item","depth":1,"payload":{"lines":[5,6]},"content":"<a href=\"../../mark-map/os-map.html\" target=\"_blank\">操作系统</a>","children":[]},{"type":"list_item","depth":1,"payload":{"lines":[6,7]},"content":"<a href=\"../../mark-map/ccp-map.html\" target=\"_blank\">计算机组成原理</a>","children":[]},{"type":"list_item","depth":1,"payload":{"lines":[7,8]},"content":"<a href=\"../../mark-map/cn-map.html\" target=\"_blank\">计算机网络</a>","children":[]}]},null)</script>
</body>
</html>

6
docs/changelog.md
View File

@@ -1,13 +1,7 @@
---
icon: clock
---
# 变更记录
该文件包含 `408CSFamily` 仓库和网站所有显着更改。
<!-- more -->
<!-- @include: ../CHANGELOG.md#recent-alpha -->

18
docs/readme.md
View File

@@ -17,15 +17,15 @@ features:
details: 官方插件的基础上，抽象、封装出适合自己功能的plus插件，能够快速集成、使用在新的项目中。
- title: 反复反复
details: 通过以项目Demo示例的方式，对框架常用的功能进行Code编写和整理，提供有效且易用的代码封装。
- title: 王道论坛
details: 全平台都可以关注。
link: https://github.com/zpfz/vuepress-theme-antdocs
- title: 研招网
link: https://github.com/zpfz/vuepress-theme-antdocs
details: 考研最新消息。
- title: 开源共享
link: https://github.com/zpfz/vuepress-theme-antdocs
details: 通过以项目Demo示例的方式，对框架常用的功能进行Code编写和整理，提供有效且易用的代码封装。
# - title: 王道论坛
# details: 全平台都可以关注。
# link: https://github.com/zpfz/vuepress-theme-antdocs
# - title: 研招网
# link: https://github.com/zpfz/vuepress-theme-antdocs
# details: 考研最新消息。
# - title: 开源共享
# link: https://github.com/zpfz/vuepress-theme-antdocs
# details: 通过以项目Demo示例的方式，对框架常用的功能进行Code编写和整理，提供有效且易用的代码封装。
---

6
package.json
View File

@@ -13,15 +13,19 @@
"url": "https://github.com/142vip"
},
"scripts": {
"preinstall": "chmod +x ./scripts/*",
"prepare": "rm -f .husky/pre-commit && husky install && npx husky add .husky/pre-commit \"./scripts/lint --fix\" && chmod +x .husky/pre-commit",
"dev": "vuepress dev docs",
"build": "./scripts/bundle build",
"build": "./scripts/bundle build && npm run build:mark-map",
"build:mark-map": "./scripts/mark-map",
"build:proxy": "./scripts/bundle build_proxy",
"deploy:vercel": "vercel --prod",
"clean": "find . -name \"node_modules\" -type d -exec rm -rf '{}' + "
},
"scripts-info": {
"preinstall": "在安装依赖前分配脚本权限",
"prepare": "安装依赖预执行脚本",
"build:mark-map": "./scripts/mark-map",
"dev": "本地启动项目",
"clean": "快速删除本地依赖"
},

53
scripts/.exec
View File

@@ -5,54 +5,53 @@
const {join} = require('path')
const cwd = join(__dirname, '..')
process.env.PATH = `${join(cwd, 'node_modules', '.bin')}:${process.env.PATH}`
const {exec,exit} = require('shelljs');
const {exec, exit} = require('shelljs');
/**
* 监听进程
* - 退出进程
*/
process.on('exit', () => {
exit()
exit()
})
/**
* 执行shell指令
* @param commands
*/
exports.execShell = async commands => {
let runCommands=[]
if(typeof commands ==='string'){
runCommands.push(commands)
}
let runCommands = []
if (typeof commands === 'string') {
runCommands.push(commands)
}
// 批量执行
if(Array.isArray(commands)){
runCommands=commands
}
// 批量执行
if (Array.isArray(commands)) {
runCommands = commands
}
for (let index=0;index<runCommands.length;index++) {
const command=runCommands[index]
const count=index+1
console.log(`>>>command(${count}):\n${command} \n<<<command(${count})--start === \n`)
// await syncExec(command)
const execResult=await exec(command)
for (let index = 0; index < runCommands.length; index++) {
const command = runCommands[index]
const count = index + 1
console.log(`>>>command(${count}):\n${command} \n<<<command(${count})--start === \n`)
// await syncExec(command)
const execResult = await exec(command)
console.log(`\n<<<command(${count})--ending === `)
// 指令异常，不执行后续指令
if(execResult.code!==0){
break;
}
console.log(`\n<<<command(${count})--ending === `)
// 指令异常，不执行后续指令
if (execResult.code !== 0) {
break;
}
}
}
/**
* 脚本基础设置
*/
exports.BaseSetting={
successLogger:"\033[36m",
errorLogger:"\033[1;31m",
warnLogger:"\033[1;33m",
exports.BaseSetting = {
successLogger: "\033[36m",
errorLogger: "\033[1;31m",
warnLogger: "\033[1;33m",
// 定义时间
currentTime:'$(date "+%Y-%m-%d %H:%M:%S")'
currentTime: '$(date "+%Y-%m-%d %H:%M:%S")'
}

56
scripts/mark-map Executable file
View File

@@ -0,0 +1,56 @@
#!/usr/bin/env node
/**
* 将思维导图的md格式转化为html，提供在线预览
* 链接：https://www.npmjs.com/package/markmap-cli
*/
const {execShell} = require("./.exec");
const path = require('path');
const fs = require('fs');
const markMapPath = path.join(__dirname, '../', 'docs/manuscripts/mark-map')
const markMapHtmlPath = path.join(__dirname, '../', 'docs/.vuepress/public/mark-map')
/**
* 扫面目录
*/
function scanDirectory(directory, fileType) {
const fileList = fs.readdirSync(directory)
return fileList
.map(file => {
const filePath = path.join(directory, file);
const fileExtension = path.extname(file).toLowerCase();
if (fileExtension === `.${fileType.toLowerCase()}`) {
return filePath
}
})
// 过滤空
.filter(c => c != null)
}
(async () => {
/**
* 第一步： 清空站点思维导图文件存放目录
*/
const delHtmlDir = `rm -rf ${path.join(markMapHtmlPath, '*')}`
/**
* 第二步： 将md文档转化为思维导图网页
*/
const mdList = scanDirectory(markMapPath, 'md')
const mdToHtmlCmdStr = mdList.map(md => `markmap --no-open ${md}`).join(' && ')
/**
* 第三步： 根据文件类型将思维导图网页文件移动到站点指定目录
*
*/
const mdHtmlByFileType = path.join(markMapPath, '*.html')
const moveHtmlCmdStr = `mv -f ${mdHtmlByFileType} ${markMapHtmlPath}`
await execShell([delHtmlDir, mdToHtmlCmdStr, moveHtmlCmdStr])
})()

35
scripts/test
View File

@@ -1,35 +0,0 @@
#!/usr/bin/env node
/**
* 脚本测试
* 链接：https://github.com/enquirer/enquirer
*/
// const {execShell} = require("./.exec");
(async() => {
const { AutoComplete } = require('enquirer')
const prompt = new AutoComplete({
name: 'flavor',
message: 'Pick your favorite flavor',
limit: 10,
initial: 2,
choices: [
'Almond',
'Apple',
'Banana',
'Blackberry',
'Blueberry',
'Cherry',
'Chocolate',
'Cinnamon',
'Coconut',
'Cranberry',
'Grape'
]
})
prompt.run()
.then(answer => console.log('Answer:', answer))
.catch(console.error)
})()