评论

Vue开发之旅——我的博客搭建记录(二)

《我的博客》第二章

  • 博客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文件中设置懒加载未加载时的图片。

(古见同学真可爱,嘿嘿)

最后一次编辑于  2021-11-16  
点赞 5
收藏
评论

5 个评论

  • Smooth
    Smooth
    2021-11-16

    不错!过程写得很详细清晰,支持!刚好我也在搭自己的个人博客,当复习一次hh

    2021-11-16
    赞同 1
    回复
  • 何
    2021-11-17

    真棒

    2021-11-17
    赞同
    回复
  • Jack Li
    Jack Li
    2021-11-16

    收藏一波~

    2021-11-16
    赞同
    回复
  • B A O
    B A O
    2021-11-16

    学习了!过程写得很清晰,找机会尝试一下!

    2021-11-16
    赞同
    回复
  • 晨曦
    晨曦
    2021-11-16

    太棒了!博客的画面效果看起来很漂亮。刚好我也有搭建自己个人博客的想法,顺带学习一波了~~~

    2021-11-16
    赞同
    回复
登录 后发表内容