- 博客2.0,堂堂更新(11.10)
- 引入markdown
接上回,博客内容写在textarea里没有排版,也不能塞代码,限制过多。便引入了vue的markdown插件——v-md-editor,支持markdown的实时渲染,内容丰富度大大地提高了。
- 博客详情
之前实现的[博客]页仅仅展示了博客标题与博客摘要,需要实现点击卡片进入单个博客内部,展示完整内容。这时便需要在路由中设置如下内容:
在点击博客标题时,通过router-link :to="'/blog/+blog.id"将blog id传至单独页,单独页中使用this.$route.params.id来接收,再通过leancloud接口实现过滤。
- router
vue的路由默认使用的是hash模式,这样会在地址中出现一个#号,看起来听扎眼的。使用history模式可以去除这一#号,vue3中通过createWebHistory()使用history模式。App.vue是挂载网页的根节点,在这个文件中设置router-view实现路由切换,也可设置整个网页的头图与底部图。
- 界面美观
借鉴了许多博客设计,最后采取Fblog的界面设计(https://gitee.com/fengziy/Fblog#http://www.fengziy.cn/fBlog/),博客封面通过写博客时增加输入网络图片地址实现(暂时没实现本地图片上传)。
在拉取数据时,发现图片怎么都加载不出来,检查代码,才想起图片赋值是动态的,不应该使用img src,而是使用img :src,实现动态数据绑定。一次加载过多图片会减慢速度,在此改用图片懒加载v-lazy,未访问的数据暂时先不加载。使用v-lazy也很方便,将img标签改成v-lazy就可以,同时在main.js文件中设置懒加载未加载时的图片。
(古见同学真可爱,嘿嘿)
不错!过程写得很详细清晰,支持!刚好我也在搭自己的个人博客,当复习一次hh
真棒
收藏一波~
学习了!过程写得很清晰,找机会尝试一下!
太棒了!博客的画面效果看起来很漂亮。刚好我也有搭建自己个人博客的想法,顺带学习一波了~~~