VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

VuePress制作个人网页(vuepress博客)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

这一次,我将为您带来VuePress来制作个人网页。VuePress制作个人网页有哪些注意事项?以下是实际案例。让我们看一看。

VuePress

VuePress制作个人网页(vuepress博客)-主机参考

Vuepress是犹大4月12日发布的基于vue的全新静态网站生成器。它其实是一个内置webpack的vue spa应用,可以用来写文档。

VuePress制作个人网页(vuepress博客)-主机参考

一个基于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文档真的被打开了:

VuePress制作个人网页(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制作个人网页(vuepress博客) https://zhujicankao.com/80253.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » VuePress制作个人网页(vuepress博客)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!