主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
这一次,我将为您带来VuePress来制作个人网页。VuePress制作个人网页有哪些注意事项?以下是实际案例。让我们看一看。
VuePress
Vuepress是犹大4月12日发布的基于vue的全新静态网站生成器。它其实是一个内置webpack的vue spa应用,可以用来写文档。
一个基于Vue SSR的静态站生成器,最初的目的是为了酷酷的写文档,但是我发现对于写博客也很不错。
这是VuePress的官方文件
开始
你可以按照文档中的例子,自己玩。然而,由于VuePress的文档也是由VuePress实现的,所以我很难直接使用VuePress warehouse中的docs目录。
1.首先向全世界安装VuePress。
npm安装-g vuepress
2.然后将VuePress仓库克隆到您的计算机上。
git克隆git @ github . com:docs China/vue press . git
在docs文件中执行(请确保您的Node.js版本>:= 8)
Cd vuepresscd docsvuepress dev当你看到这一行,就说明已经成功了:
e按dev服务器监听http://localhost: 8080/我们打开http://localhost:8080/
我发现vuepress文档真的被打开了:
下面的工作是数据的替换,但是我们首先要看一下docs的目录结构:
/Vuepress文档的├├├├├└└└└└└└└└└├├├ζ├ζζζζζζζζζζζ950指南内容└zh//中文文档目录├├├├ Default-Theme-Config └指南readme.md//The首页配置文件文档分为两部分,中文文档在/zh/目录,英文文档在根目录。
其实目录里的东西都挺好理解的。首先,guide、default-theme-config和config是Vuepress文档的主要内容。从中文文档中也可以看出,只替换了这三个目录。
主页配置
默认情况下,主题提供了一个主页布局。要使用它,您需要在根目录README.md的YAML front matter中指定home:true,并添加一些其他元数据。
我们先来看看根目录下的README,md:
Home: true //是否要使用vuepress heroImage: /hero.png //首页图片操作Text: Get Started → //按钮操作的文本链接:/Guide//按钮跳转的目录功能://首页的三个功能-title:简单第一细节:markdown的最小设置-居中的项目结构有助于您专注于编写-title: vue-powered de tails:享受Vue + webpack的开发体验,在markdown中使用Vue组件,并使用Vue开发自定义主题-title页脚:麻省理工授权|版权2018-呈现埃文你//页脚我真的看不懂。官网有比我更详细的配置说明。
导航配置
导航配置文件位于vuepress/config.js中
在导航配置文件中,nav控制导航栏链接,您可以将其更改为您自己的博客目录。
导航:
侧边栏的实现
由于评论区有很多人提问,我想在这里更新一下。其实就算我在这里写的很详细,大家还是看一下公文比较好。
侧边栏的配置也在vuepress/config.js中:
侧边栏:[{ title: # 39;JavaScript # 39,//侧栏名称collapsable: true,//可折叠子级:[ # 39;/blog/JavaScript/如果你学ES6就不会写这样的代码 # 39;,//你的md文件地址] },{ title: # 39;CSS # 39,collapsable: true,children:[ # 39;/blog/CSS/了解Z-index的所有细节 # 39;,] },{ title: # 39;HTTP # 39,collapsable: true,children:[ # 39;/blog/HTTP/ Know HTTP -Cookies和Session # 39,]},]对应的文档结构:
├-Create在├─blog // docs目录下新建一个博客目录├-CSS ├-http │ └-JavaScript我的博客:brownhu
部署
配置完您博客后,命令行执行:
Vuepress构建
当你看到这条线,它意味着成功:
成功!在vuepress中生成静态文件。
相信你看完这个案例已经掌握了方法。更多精彩请关注主机参考其他相关文章!
推荐阅读:
做一个手机微信微信官方账号(有代码)
对比length size(),以上是VuePress个人网页的详细内容。更多请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 如何在网页和小程序之间通信(小程序与网站同步)
- VuePress制作个人网页(使用vue作为网站)
- WIN10无法显示网页,提示此网站不安全(连接到网络的计算机显示此网站不安全)。
- 网页没有声音(如何调谐没有声音的网页)
- WIN10无法显示网页,告诉我这个站点不安全怎么办(电脑打开网页显示这个站点不安全)
本文由主机参考刊发,转载请注明:VuePress制作个人网页(vuepress博客) https://zhujicankao.com/80253.html
评论前必须登录!
注册