vuepress官网
基本构建
安装
yarn global add vuepress
或者:npm install -g vuepress
新建README.md文件
- 在根目录下新建一个markdown 文件
开发环境编译
vuepress dev .
构建打包发布
vuepress build .
评论系统
- https://valine.js.org/
- Valine - 一款快速、简洁且高效的无后端评论系统。
准备工作
- 进入https://leancloud.cn/注册
- 创建应用:填写应用名称,选择 开发版
- 然后点击设置 —> 应用 Keys —> 获取AppID和AppKeys
组件化使用
-
在.vuepress/components/Valine.vue新建Valine组件
<template> <div id="vcomments"> <h2>awqerqwer</h2> </div> </template> <script> import Valine from 'valine' export default { name: 'Valine', mounted() { if (typeof window !== 'undefined') { 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: '请输入留言内容' }) } } </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/
- 一款简洁而优雅的 vuepress 博客 & 文档 主题。
使用
- 安装脚手架:
yarn global add @vuepress-reco/theme-cli
- 初始化:
theme-cli init my-blog
- 进入目录:
cd my-blog
- 安装依赖:
yarn install
- 运行:
yarn dev
- 打包:
yarn build