3) 添加导航栏nav
修改 → docs/.vuepress/config.js
themeConfig: { // 添加导航栏 nav: [ { text: '主页', link: '/' }, { text: 'Android', items: [ {text: '源码', link: '/android/sourcecode/'}, {text: '架构', link: '/android/architecture/'}, {text: '逆向', link: '/android/hook/'} ] }, { text: 'Github', link: 'https://github.com/coder-pig' }, { text: '关于我', link: '/other/aboutme.md' }, ], }
看下运行结果：
网络异常，图片无法展示
|
基础配置的示例就说这些，接着说下抽取配置，实现模块化。
⑤ 配置抽取
配置的东西全写在config.js中，后续随着博客文章数量及分类增多，维护起来不怎么方便。
可将对应的属性抽取出来，放到一个单独的js文件中，config.js中去引用，示例如下：
网络异常，图片无法展示
|
// head.js module.exports =[ ['link', { rel: 'icon', href: '/img/favicon.ico' }] ] // nav.js module.exports = [ { text: '首页', link: '/' }, { text: 'Python', items: [ {text :'基础', link: '/python/base'}, {text :'爬虫', link: '/'}, {text :'Web', link: '/'}, {text :'机器学习', link: '/'}, ] }, ] // config.js中引用 const navConf = require('./config/nav') const headConf = require('./config/head') module.exports = { title: 'CoderPig的小世界', // 网站标题 description: '吾日三省吾身', // 网站描述 dest: './ROOT', // 设置输出目录 plugins: [], head: headConf, themeConfig: { nav: navConf, sidebarDepth: 2, lastUpdated: 'Last Updated', } }
另外说下sidebar，有时可能会为某几个页面设置单独的侧边栏，比如：
网络异常，图片无法展示
|
可以单独设置一个sidebar，如：
// ptyhon-base/sidebar.js module.exports = [ { title: '开发环境搭建', sidebarDepth: 2, collapsable: true, children: ['1.1/', '1.2/', '1.3/'] }, { title: '概念常识', sidebarDepth: 2, collapsable: true, children: ['2.1/', '2.2/', '2.3/'] }, { title: '数据类型', sidebarDepth: 2, collapsable: true, children: ['3.1/', '3.2/', '3.3/', '3.4/'] }, { title: '条件判断与循环', sidebarDepth: 2, collapsable: true, children: ['1.1/', '1.2/'] }, ]
然后config/slidebar.js引用一波：
module.exports = { '/python-base/': require('../../python-base/sidebar'), }
完美~
⑥ 生成静态文件
执行一波 vuepress build 即可，构建成功后，可以看到文件的存放目录：
网络异常，图片无法展示
|
此时如果你来到目录下打开index.html，会发现没有样式，控制台也一堆爆红
网络异常，图片无法展示
|
点开其中一个css：
网络异常，图片无法展示
|
明显的路径不对，可以修改config.js中的 base 属性，然后重新build一下， 不过笔者发现即使修改正确后，本地打开正常，然后会立马跳转404，目前无解， 有知道的朋友欢迎在评论区留言告知下，万分感激~
⑦ 添加.gitignore文件
然后是配置.gitignore文件，将一些不需要提交的文件忽略掉：
node_modules dist .idea
本地部署相关的就折腾那么多，接着是部署到云服务器上。
0x2、Vuepress 部署到云服务器
相关工具：
- 云服务器系统：CentOS 8
- SSH终端：Windows terminal
- FTP工具：WinSCP
① SSH 连接云服务器
# 回车输入密码 → 回车 ssh root@xxx.xxx.xxx.xxx
② Nginx 安装
# 安装Nginx sudo yum install nginx # ↓ ↓ ↓ ↓ ↓ ↓ 其他常用命令 ↓ ↓ ↓ ↓ ↓ ↓ # 查看nginx运行状态 ps aux | grep nginx # 重载nginx配置文件n nginx -s reload # 立即停止nginx nginx -s stop # 优雅停止nginx nginx -s quit # 杀死所有nginx进程 killall nginx # 启动nginx systemctl start nginx.service # 停止nginx服务 systemctl stop nginx.service # 重启nginx服务 systemctl restart nginx.service # ↓ ↓ ↓ ↓ ↓ ↓ 常用文件位置 ↓ ↓ ↓ ↓ ↓ ↓ # 查看nginx安装列表，可看到所有安装位置 rpm -ql nginx /etc/nginx/nginx.conf # nginx总配置文件 /etc/nginx/conf.d # 所有的nginx自定义配置文件 /var/log/nginx/error.log # 错误日志文件 /usr/share/nginx/html # 服务器默认启动目录
另外，CentOS 8内置FirewallD防火墙方案，需要配置运行nginx的 80(HTTP) 和 443(HTTPS) 端口通过：
firewall-cmd --permanent --zone=public --add-service=http firewall-cmd --permanent --zone=public --add-service=https firewall-cmd --reload
浏览器输入主机公网ip，出现如下页面，代表Nginx安装成功。
网络异常，图片无法展示
|
