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

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

## vuepress官网 ##

*  [https://www.vuepress.cn/][https_www.vuepress.cn]

#### 基本构建 ####

**安装**

*  `yarn global add vuepress` 或者：`npm install -g vuepress`

**新建README.md文件**

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

**开发环境编译**

*  `vuepress dev .`

**构建打包发布**

*  `vuepress build .`

## 评论系统 ##

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

#### 准备工作 ####

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

#### 组件化使用 ####

*  在.vuepress/components/Valine.vue新建Valine组件
    
        <template>
            <div class="comment">
                <span class="leancloud-visitors" data-flag-title="Your Article Title">
                    <em class="post-meta-item-text">阅读量： </em>
                    <i class="leancloud-visitors-count"></i>
                </span>
                <div id="vcomments"></div>
            </div>
        </template>
        
        <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>
        
        <style lang="scss"> #vcomments { margin-top: 60px; } </style>
 *  在需要的.vue或者.md文件中使用即可
    
    `<Valine />`

#### 全局使用 ####

*  在theme/themeReco.js中添加如下配置即可：
    
        valineConfig: { 
        	appId:"wMBbidT7ISeJL******lLwg7-gzGzoHsz",
        	appKey: "9j2BKgX6us8******f4J81SIm"
        },

## vuepress-theme-reco ##

*  [https://vuepress-theme-reco.recoluan.com/][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/][http_meiyangyang.3vhost.net]

[https_www.vuepress.cn]: https://www.vuepress.cn/
[https_valine.js.org]: https://valine.js.org/
[https_leancloud.cn]: https://leancloud.cn/
[https_vuepress-theme-reco.recoluan.com]: https://vuepress-theme-reco.recoluan.com/
[http_meiyangyang.3vhost.net]: http://meiyangyang.3vhost.net/