使用vuepress搭建个人博客必备指南

拼搏现实的明天。 2023-03-13 13:49 75阅读 0赞

vuepress官网

  • https://www.vuepress.cn/

基本构建

安装

  • yarn global add vuepress 或者：npm install -g vuepress

新建README.md文件

  • 在根目录下新建一个markdown 文件

开发环境编译

  • vuepress dev .

构建打包发布

  • vuepress build .

评论系统

  • https://valine.js.org/
  • Valine - 一款快速、简洁且高效的无后端评论系统。

准备工作

  1. 进入https://leancloud.cn/注册
  2. 创建应用：填写应用名称，选择 开发版
  3. 然后点击设置 —> 应用 Keys —> 获取AppID和AppKeys

组件化使用

  • 在.vuepress/components/Valine.vue新建Valine组件

    1. <template>
    2.     <div class="comment">
    3.         <span class="leancloud-visitors" data-flag-title="Your Article Title">
    4.             <em class="post-meta-item-text">阅读量： </em>
    5.             <i class="leancloud-visitors-count"></i>
    6.         </span>
    7.         <div id="vcomments"></div>
    8.     </div>
    9. </template>
    11. <script> import Valine from 'valine' export default { name: 'Valine', mounted() { if (typeof window !== 'undefined') { document.getElementsByClassName('leancloud-visitors')[0].id = window.location.pathname; this.window = window; window.AV = require('leancloud-storage') } new Valine({ el: '#vcomments', appId: 'wMBbidT7ISeJL******lLwg7-gzGzoHsz', appKey: '9j2BKgX6us8******f4J81SIm', notify: false, verify: false, avatar: 'yw00yw', placeholder: '请输入留言内容', visitor: true // 开启阅读量 }) } } </script>
    13. <style lang="scss"> #vcomments { margin-top: 60px; } </style>

  • 在需要的.vue或者.md文件中使用即可

    <Valine />

全局使用

  • 在theme/themeReco.js中添加如下配置即可：

    1. valineConfig: { 
    2.     appId:"wMBbidT7ISeJL******lLwg7-gzGzoHsz",
    3.     appKey: "9j2BKgX6us8******f4J81SIm"
    4. },

vuepress-theme-reco

  • https://vuepress-theme-reco.recoluan.com/
  • 一款简洁而优雅的 vuepress 博客 & 文档 主题。

使用（选择最后一个模板类型）

  • 安装脚手架：yarn global add @vuepress-reco/theme-cli
  • 初始化：theme-cli init my-blog
  • 进入目录：cd my-blog
  • 安装依赖：yarn install
  • 运行：yarn dev
  • 打包：yarn build

最终效果

  • http://meiyangyang.3vhost.net/

发表评论

表情：
评论列表 （有 0 条评论，75人围观）

还没有评论，来说两句吧...

相关阅读