zoukankan      html  css  js  c++  java
  • 搭建个人博客(扩展)


    theme: channing-cyan

    前言

    昨天中午写了篇博文使用VuePress快速搭建个人博客,其中扩展提到留言板的功能,所以这算是续集了,下图是昨天立的flag

    image.png
    那今天趁着中午午休就给安排上。

    留言板

    增加留言板tab

    在config.js配置中的nav里增加一个link配置项

      { "text": '留言板', "link": '/blogs/views/messageBoard.html', "icon": 'reco-suggestion' }
    

    实现效果:

    image.png
    这时候是有增加这个留言板模块,但是没有对应功能,所以请往下看。

    reco主题关于留言板的实现(这部分可跳过,也可点击查看详情)

    →点击查看详情←
    首先选的主题[vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)里是有提供这个插件的

    主题内置评论插件 @vuepress-reco/vuepress-plugin-comments,可以根据自己的喜好选择 Valine 或者 Vssue

    如果你想默认不加载评论,而只在某些页面显示评论功能,可以在 valineConfigvssueConfig 中设置 showComment: false,并在需要展示评论的页面 设置 isShowComments: true

    如果仅是某篇文章不想设置开启评论功能,可以在 front-matter 设置 isShowComments: false

    1. 浏览量 仅在使用 Valine 时显示;
    2. 因为 浏览量 需要在页面加载时去调用相关接口,所以列表页的所有数据会一起加载下来,如果文章数量很多会影响加载速度,所以在 1.2.0 之后去掉文章列表的浏览量。

    其他参数参考 Valine配置

    image.png

    Valine

    Valine官网也可以发现

    image.png

    所以我们打开leancloud官网创建应用去获取APP ID 和 APP Key。这里按步骤注册和验证邮箱然后就可以建立自己的应用,可以在设置中查看自己对应的appid和appkey。

    image.png

    配置

    在博客上的config.js增加配置

    module.exports = {
      theme: 'reco',
      themeConfig: {
        valineConfig: {
          appId: '...',// your appId
          appKey: '...', // your appKey
        }
      }  
    }
    

    配置后的效果:

    image.png

    image.png

    可以从上图发现可以留言和回复,而且多了个浏览数。到这就完成了博客留言板的实现,代码已更新上传。

    持续更新中...

    我理想中的博客我也没底 就是想到什么加什么 只希望它越来越好 后续持续更新内容都将放在本文。下一步应该是朝着美化博客页面去了,增加一些背景和动效,就像上篇中提到的案例。

    结束语

    附上博客和模板预览链接

    然后又是不要脸的求点赞!


    求点赞!求点赞!求点赞!

  • 相关阅读:
    ASP.NET MVC 与 Web Forms
    去除两端margin的方法
    Media Queries之Respond.js
    ECMAScript5严格模式
    用rem设置文字大小
    BFC与hasLayout
    快速把项目部署到webLogic上
    判断一个坐标点是否在不规则多边形内部的算法
    Git 工作流的正确打开方式
    Java设计模式六大原则
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/14763575.html
Copyright © 2011-2022 走看看