html技术文档示例,前端与后端同学都需要掌握的技术文档（或博客）搭建
当你写完一个开源项目或者一篇博客文章，是否想要有个的页面来呈现它？
如图：
那我们开始吧
使用vuepress搭建
安装运行
1.使用Yarn和npm，Node.js版本>=8。
npm install -g vuepress
2.创建项目目录
mkdir demo
cd demo
3.初始化项目
npm init -y
4.在 package.json 里添加:
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
5.创建文档目录与文件，结构如下：
demo
├─── docs
│ └── .vuepress // 配置目录
│ │ ├── public // 静态资源
│ │ ├──── img
│ │ ├────── bg.ico // 图标
│ │ ├────── logo.jpg // 首页logo
│ │ └── config.js // vuepress配置文件
│ ├── 随笔 // 随笔
│ │ ├── suibi // 一级目录
│ │ │ ├── test.md // 文章
│ └── README.md // 博客首页
└── package.json
6.运行
npm run dev
7.浏览器访问：http://localhost:8080/，就可以看到效果了。
多放几张图：
8.还可以构建生成html：
npm run build
9.config.js文件例子
module.exports = {
title: 'hello',
description: '技术',
head: [ // 注入到当前页面的 HTML
中的标签['meta', { 'http-quiv': 'pragma', cotent: 'no-cache'}],
['meta', { 'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate'}],
['meta', { 'http-quiv': 'expires', cotent: '0'}]
],
serviceWorker: true, // 是否开启 PWA
base: '/', // 部署到github相关的配置
markdown: {
lineNumbers: true // 代码块是否显示行号
},
themeConfig: {
lastUpdated: '更新于',
sidebarDepth: 3,
displayAllHeaders: true,
nav: [
{ text: '导航', link: 'http://www.kaka996.com' },
{
text: 'dnnmmp',
items: [
{
text: 'dnnmmp集成环境',
items: [
{ text: '介绍', link: '/dnnmmp_introduce/' },
{ text: '安装', link: '/dnnmmp_install/' },
{ text: '命令行使用', link: '/dnnmmp_command/' },
{ text: '日志', link: '/dnnmmp_log/' },
{ text: '附录', link: '/dnnmmp_appendix/' },
]
}
]
},
{
text: '了解更多',
items: [
{ text: '个人信息', link: '/pages_about/' },
]
}
],
sidebar:{
'/dnnmmp/': [
{
title: '介绍',
collapsable: false,
children: [
'introduce/介绍',
]
},
{
title: '安装',
collapsable: false,
children: [
'install/一键安装',
'install/单独安装PHP',
'install/单独安装Nodejs',
'install/单独安装Mongodb',
'install/单独安装Mysql',
'install/单独安装Nginx',
'install/单独安装Redis',
//'install/单独安装go',
]
},
{
title: '命令行使用',
collapsable: false,
children: [
'command/命令行使用',
]
},
{
title: '日志',
collapsable: false,
children: [
'log/日志',
]
},
{
title: '附录',
collapsable: false,
children: [
'appendix/附录',
]
}
]
},
}
};
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！