# 关于Vuepress 笔记

# 单页面构建

# 全局安装
npm install -g vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始运行
vuepress dev

# 开始运行  根目录运行
vuepress dev docs

# 基本配置目录

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

# 命令

# 新建一个 .vuepress 文件夹
mkdir .vuepress

# 进入 .vuepress 文件夹
cd .vuepress/

# 新建一个 config.js 文件
touch config.js

# 新建一个 packge.json 文件   根目录
npm init -y

配置 .vuepress/config.js，

module.exports = {
  title: '一切都是浮云',
  description: 'lucky'
}

# 主题配置

网址参考

# 图片

# 新建一个 public 文件夹 
mkdir public

字体图片官网

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ]
}

# nav配置

导航栏官网

module.exports = {
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '浮云导航', link: '/guide/' },
      { text: '前端导航', link: 'http://makxin.com/webnav.html' },
	  { text: '每日分享', link: 'http://makxin.com/fx.html' },
	  { text: '关于', link: '/about' },
	  {
		  text: '分享', 
		  items:[
			  {text:'技术',link:'/jishu/'},
			  {text:'每日分享',link:'/fx/'}
		  ]
	  },
	  //下拉列表显示分组
	  {
		  text: '学习', 
		  items:[
			  {
				text: '前端',   
				items:[
				  {text:'js',link:'/js/'},
				  {text:'css',link:'/css/'},
				]
			  },
			  {
				text: '后端',   
				items:[
				  {text:'php',link:'/php/'},
				  {text:'java',link:'/java/'},
				]
			  }
		  ]
	  },
	 //github 
	 { text: 'Gitee', link: 'https://gitee.com/lucky_ck'},
    ],
    sidebarDepth: 2,
	lastUpdated: 'Last Updated'
  }
 }

# 侧边栏配置

侧边栏官网

module.exports = {
  themeConfig: {	
   //侧边栏
	sidebar: {
		'/fx/':[
			'',
			'fx1',
			'fx2'
		],
		'/js/':[
			'js1',
			'js2'
		],
		'/css/':[
			'css1',
			'css2'
		],
		'/php/':[
			'php1',
			'php2'
		],
		'/java/':[
			'java', //java文件夹不是下拉框形式
			{
				title:'java',
				children:[
					'java/java1', //以dosc为根目录查找文件
					'java/java2' //以dosc为根目录查找文件
				]
			}
		],
		//下面是首页显示侧边栏的，不需要首页显示可以删掉代码
		// '/':[
		// 	'',            /* / */
		// 	'contact',     /* contact.html */
		// 	'about'        /* about.html */
		// ]
	}
  }
}

# 部署github

部署github官网

# 在你的项目中，创建一个如下的 deploy.sh 文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -