vuepress 博客搭建教程 1.x

一、效果预览

文档连接

vuepress

vuepress-theme-reco

界面样式细化调整

sidebar侧边栏自动生成提示：在写 md文档时不要 一个文件夹 一个 md文件，这样会生成不规则的侧边栏！
建议一组下多个md文档, 例如 vue 文件下 ，多个 相关的 vue md文档!

我的目录

|-- knowledge
|   |-- backEnd
|   |-- frontEnd
|   |   |-- images
|   |   |-- inductive
|   |   |   |-- css
|   |   |   |   `-- images
|   |   |   |-- elementui
|   |   |   |   `-- images
|   |   |   |-- es6
|   |   |   |-- html
|   |   |   |-- javascript
|   |   |   |   `-- images
|   |   |   |-- nodejs
|   |   |   |-- practice
|   |   |   |-- scss
|   |   |   |-- vue
|   |   |   |   `-- images
|   |   |   `-- webpack
|   |   |       `-- vue-cli
|   |   |-- learning
|   |   |   |-- ES6
|   |   |   |-- css
|   |   |   |-- html
|   |   |   |-- javascript
|   |   |   `-- vue
|   |   `-- vuepress
|   |       `-- images
|   |-- git
|   |   |-- Git
|   |   `-- images
|   |-- server
|   |   |-- images
|   |   `-- nginx
|   `-- tools
|       |-- linux
|       |-- webstorm
|       `-- windows
`-- timeline

二、准备工作

在此已确认你本地已经安装好了node环境，接下来将从创建vuepress项目开始，let’s go!

1. 相关依赖

依赖包	版本号	依赖包作用描述
vuepress	1.9.7	项目中的主要角色了，项目的构建及运行就靠它了
flowchart	1.2.0	流程图插件
@vuepress-reco/vuepress-plugin-bgm-player	1.1.4	背景音乐播放器插件
vuepress-plugin-cursor-effects	1.1.0	鼠标点击效果插件
vuepress-plugin-helper-live2d	1.0.2	页面右下角的小萝莉插件
vuepress-plugin-ribbon-animation	1.1.3	页面背景绸带动画插件
vuepress-theme-reco	1.6.11	vuepress 仅是一个架子，做好一个比较炫酷的博客还的靠它了
vuepress-plugin-auto-sidebar	2.3.2	自动生成侧边栏，把注意力放在写作上
vuepress-plugin-code-copy	1.0.6	代码片段复制功能插件
vuepress-plugin-dynamic-title	1.0.0	动态页头标题，当离开页面时，可切换离开页面标题，当进入页面时可切换到进入页面标题
vuepress-plugin-nuggets-style-copy	1.0.3	代码片段复制功能插件，与 vuepress-plugin-code-copy 功能一样，效果不一样!

2. 项目创建

2.1. 创建目录并进入新目录

mkdir vuepress-starter && cd vuepress-starter

2.2. 项目初始化

npm init

2.3. 安装 vuepress 依赖

cnpm install vuepress -D

2.4. 创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

2.5. 在 package.json 中添加一些 scripts

--temp .temp 参数可以帮助我们在修改文件或配置文件时，无需重启服务，便可的到内容更新!

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs --temp .temp",
    "build": "vuepress build docs"
}

2.6. 在本地启动服务器

npm run dev

3. 项目目录

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

请留意目录名的大写。

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

三、theme-reco主题

1. 依赖插件安装

cnpm install --save vuepress-theme-reco

2. 主题文件配置

在docs > .vuepress > config.js 中引入配置即可, plugin里的插件已经配置好了，依赖且自行安装!

const navbars = require('./module/navbar/index')
// const sidebar = require('./module/sidebar/index')
module.exports = {
	title: 'M_J_W', // 主界面标题
	description: '怨忧不会让困难消失，但乐观会让人变的强大！', // 主界面 文本描述
	port: '8089', // 服务启动后的端口号
	head: [	// 这里配置 html 文档中 head里边的内容，例如 meta style script 等 
		['meta', {
			name: 'viewport',
			content: 'width=device-width,initial-scale=1,user-scalable=no'
		}]
	],
	markdown: {	
		lineNumbers: true // 行号
	},
	theme: 'reco',	// 主题 reco
	themeConfig: {	// 主题的相关配置
		type: 'blog',
		mode: 'light', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
		// modePicker: false, // 默认 true，false 不显示模式调节按钮，true 则显示
		subSidebar: 'auto',
		// sidebar: sidebara.createSideBar('blog', ['images']),
		// sidebar: sidebar,
		sidebar: 'auto',
		displayAllHeaders: true,
		activeHeaderLinks: false, // 默认值：true
		authorAvatar: '/image/logo-icon.png', // 头像
		logo: '/image/logo-icon.png', // 导航 logo
		nav: navbars,	// 页头导航
		/**
		 * 代码主题
		 * support for
		 * 'default'
		 * 'funky'
		 * 'okaidia'
		 * 'solarizedlight'
		 * 'tomorrow'
		 */
		codeTheme: 'okaidia', // 代码片段主题 default 'tomorrow'
		smooth: true, //平滑滚动
		// reco 博客主题配置
		blogConfig: {
			category: {
				location: 2, // 在导航栏菜单中所占的位置，默认2
				text: '技能分类' // 默认文案 “分类”
			},
			tag: {
				location: 3, // 在导航栏菜单中所占的位置，默认3
				text: '技能标签' // 默认文案 “标签”
			},
			socialLinks: [ // 信息栏展示社交信息
				{
					icon: 'reco-github',
					link: 'https://github.com/recoluan'
				},
				{
					icon: 'reco-npm',
					link: 'https://www.npmjs.com/~reco_luan'
				}
			]
		},
		// 友情链接
		friendLink: [{
				title: 'vuepress-theme-reco',
				desc: 'A simple and beautiful vuepress Blog & Doc theme.',
				logo: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
				link: 'https://vuepress-theme-reco.recoluan.com'
			},
			{
				title: '午后南杂',
				desc: 'Enjoy when you can, and endure when you must.',
				email: 'recoluan@qq.com',
				link: 'https://www.recoluan.com'
			},
			// ...
		],
	},
	// 这里就是第三方插件配置
	plugins: [
		['flowchart'],
		// 代码复制弹窗插件
		["vuepress-plugin-code-copy", true],
		// ["vuepress-plugin-nuggets-style-copy", {
		// 	copyText: "复制代码",
		// 	tip: {
		// 		content: "复制成功!"
		// 	}
		// }],
		// 自动生成侧边栏
		["vuepress-plugin-auto-sidebar", {}],
		[
			"dynamic-title",
			{
				showIcon: "/favicon.ico",
				showText: "(/≧▽≦/)咦！又好了！",
				hideIcon: "/failure.ico",
				hideText: "(●—●)喔哟，崩溃啦！",
				recoverTime: 2000
			}
		],
		[
			// 看板娘
			'vuepress-plugin-helper-live2d', {
				// 是否开启控制台日志打印(default: false)
				log: false,
				live2d: {
					// 是否启用(关闭请设置为false)(default: true)
					enable: true,
					// 模型名称(default: hibiki)>>>取值请参考：
					// https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki/live2d%E6%A8%A1%E5%9E%8B%E5%8C%85%E5%B1%95%E7%A4%BA
					model: 'hibiki',
					display: {
						position: "right", // 显示位置：left/right(default: 'right')
						width: 135, // 模型的长度(default: 135)
						height: 300, // 模型的高度(default: 300)
						hOffset: 65, //  水平偏移(default: 65)
						vOffset: 0, //  垂直偏移(default: 0)
					},
					mobile: {
						show: false // 是否在移动设备上显示(default: false)
					},
					react: {
						opacity: 0.8 // 模型透明度(default: 0.8)
					}
				}
			}
		],
		[
			// 彩带背景
			"ribbon-animation", {
				size: 90, // 默认数据
				opacity: 0.3, //  透明度
				zIndex: -1, //  层级
				opt: {
					// 色带HSL饱和度
					colorSaturation: "80%",
					// 色带HSL亮度量
					colorBrightness: "60%",
					// 带状颜色不透明度
					colorAlpha: 0.65,
					// 在HSL颜色空间中循环显示颜色的速度有多快
					colorCycleSpeed: 6,
					// 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
					verticalPosition: "center",
					// 到达屏幕另一侧的速度有多快
					horizontalSpeed: 200,
					// 在任何给定时间，屏幕上会保留多少条带
					ribbonCount: 2,
					// 添加笔划以及色带填充颜色
					strokeSize: 0,
					// 通过页面滚动上的因子垂直移动色带
					parallaxAmount: -0.5,
					// 随着时间的推移，为每个功能区添加动画效果
					animateSections: true
				},
				ribbonShow: false, //  点击彩带  true显示  false为不显示
				ribbonAnimationShow: true // 滑动彩带
			}
		],
		[
			// 鼠标点击效果
			"vuepress-plugin-cursor-effects", {
				size: 2, // size of the particle, default: 2
				shape: 'circle', // shape of the particle, default: 'star'
				zIndex: 999999999 // z-index property of the canvas, default: 999999999
			}
		],
		[
			// 音乐播放器插件
			"@vuepress-reco/vuepress-plugin-bgm-player", {
				audios: [
					// 本地文件示例
					// {
					//   name: '장가갈 수 있을까',
					//   artist: '咖啡少年',
					//   url: '/bgm/1.mp3',
					//   cover: '/bgm/1.jpg'
					// },
					// 网络文件示例
					{
						name: '강남역 4번 출구',
						artist: 'Plastic / Fallin` Dild',
						url: 'https://assets.smallsunnyfox.com/music/2.mp3',
						cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
					},
					{
						name: '用胳膊当枕头',
						artist: '최낙타',
						url: 'https://assets.smallsunnyfox.com/music/3.mp3',
						cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
					}
				]
			}
		]
	]
}

3. 配置navbar

.vuepress > module > navbar > index.js

const devDocs = require('./devDocs')
const onLineTools = require('./onLineTools')
module.exports = [{
		text: "主页",
		link: "/",
		icon: "reco-home" 
	},
	{
		text: "在线文档",
		icon: "reco-home",
		items: devDocs
	},
	{
		text: "在线工具",
		icon: "reco-home",
		items: onLineTools
	},
	{
		text: '时间线',
		link: '/timeline/',
		icon: 'reco-date'
	}
]

.vuepress > module > navbar > devDocs.js

module.exports = [{
		text: 'Vue',
		link: 'https://cn.vuejs.org/v2/guide/index.html'
	},
	{
		text: 'ElementUi',
		link: 'https://element.eleme.cn/#/zh-CN/component/installation'
	},
	{
		text: 'Flutter',
		link: 'https://flutterchina.club/using-ide/'
	},

]

.vuepress > module > navbar > onLineTools.js

module.exports = [{
		text: '文件行为检测',
		link: 'https://www.virustotal.com/gui/file/e906fc26a2f3dec34bb9e6086ffcfbccbf0b70916ce1758c6408697979922484/detection'
	},
	{
		text: 'JSON生成工具',
		link: 'https://json-generator.com/'
	},
	{
		text: 'NPM 镜像库',
		link: 'https://npmmirror.com/?spm=a2c6h.24755359.0.0.1b1f5dc84SNGx0'
	},
]

四、主页配置

1. 主页内容

---
home: true
# bgImage: '/image/cat.jpg'
# bgImageStyle: {
#   height: '550px',
#   size: 'contain'
# }
heroImage: /image/cat.jpg
heroImageStyle: {
  maxHeight: '200px',
  display: block,
  margin: '6rem auto 1.5rem',
  borderRadius: '50%',
  boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
---

2. 主页样式

以下代码 隶属于 点击中间 箭头可以 直接滑到内容区！

背景图

<style>
body {
	background-image: url('.vuepress/public/image/bg-img.gif') !important;
}

.anchor-down {
	display: block;
	margin: 12rem auto 0;
	bottom: 45px;
	width: 20px;
	height: 20px;
	font-size: 34px;
	text-align: center;
	animation: bounce-in 5s 3s infinite;
	position: absolute;
	left: 50%;
	bottom: 26%;
	margin-left: -10px;
	cursor: pointer;
}

@-webkit-keyframes bounce-in {
	0% {
		transform: translateY(0)
	}

	20% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-20px)
	}

	80% {
		transform: translateY(0)
	}

	to {
		transform: translateY(0)
	}
}

.anchor-down::before {
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	border-right: 3px solid #106898;
	border-top: 3px solid #106898;
	transform: rotate(135deg);
	position: absolute;
	bottom: 10px;
}

.anchor-down::after {
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	border-right: 3px solid #106898;
	border-top: 3px solid #106898;
	transform: rotate(135deg);
}
</style>

3. 主页脚本

<script>
export default {
  mounted () {
    const ifJanchor = document.getElementById("JanchorDown"); 
    ifJanchor && ifJanchor.parentNode.removeChild(ifJanchor);
    let a = document.createElement('a');
    a.id = 'JanchorDown';
    a.className = 'anchor-down';
    document.getElementsByClassName('hero')[0].append(a);
    let targetA = document.getElementById("JanchorDown");
    targetA.addEventListener('click', e => { // 添加点击事件
      this.scrollFn();
    })
  },

  methods: {
    scrollFn() {
      const windowH = document.getElementsByClassName('hero')[0].clientHeight; // 获取窗口高度
      document.documentElement.scrollTop = windowH; // 滚动条滚动到指定位置
    }
  }
}
</script>