uniapp开发app框架在提升开发效率中的独特优势与应用探索
254
2024-09-03
使用 VuePress 制作个人网页的详细步骤与方法
这次给大家带来VuePress做出个人网页，VuePress做个人网页的注意事项有哪些，下面就是实战案例，一起来看一下。
VuePress
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。
一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。
这是VuePress的官方文档
上手搭建
你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。
1.首先安装VuePress到全局
npm install -g vuepress
2.然后把VuePress仓库克隆到你的电脑
git clone git@github.com:docschina/vuepress.git
在docs文件中执行（请确保你的 Node.js 版本 >= 8）
1 2 3 |
|
当你看到这一行就说明已经成功了：
1 |
|
下面我们打开http://localhost:8080/
发现真的打开了vuepress文档：
下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。
其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。
首页配置
默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。
我们先看看根目录下的README,md：
1 2 3 4 5 6 7 8 9 10 11 12 |
|
实在看不懂，官网有比我更详细的配置说明。
导航配置
导航配置文件在.vuepress/config.js中
在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。
更改默认主题色
你可以在.vuepress/目录下创建一个override.styl文件。
vuepress提供四个可更改的颜色：
1 2 3 4 |
|
我把它改成了这样：
侧边栏的实现
由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。
侧边栏的配置也在.vuepress/config.js中：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
对应的文档结构：
1 2 3 4 |
|
我的博客：brownhu
部署
在配置好你博客之后，命令行执行：
Vuepress build
当你看到这一行就说明成功了：
Success! Generated static files in vuepress.
相信看了本文案例你已经掌握了方法。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~