Vuepress 搭建带评论功能的静态博客的实现


Posted in Javascript onFebruary 17, 2019

vuepress 是 Vue 驱动的静态站点生成工具

本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网

点击查看项目代码

vuepress初始化

下面初始化

# 将 github 新创建的仓库克隆到本地
git clone git@github.com:zhb333/readme-blog.git

# 进入项目
cd readme-blog

# npm 初始化, 按照提示回车
npm init

# 安装 vuepress
npm i vuepress -D

# 安装 gh-pages
npm i gh-pages -D

# 创建一个 docs 目录
mkdir docs

# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md

npm 脚本

然后,给 package.json 添加一些 scripts 脚本:

{
 "scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
 }
}

运行本地开发环境

运行 vurepress 的本地开发环境

npm run dev

访问 localhost:8080 , 已经成功开启

基础配置

生成静态资源

执行下面的命令,生成静态资源

npm run build

默认情况下,构建的文件会位于 docs/.vuepress/dist 中,该文件可以通过 docs/.vuepress/config.js 中的 dest 字段进行配置。

配置

创建 docs/.vuepress/config.js, 并进行简单配置

var config = {

 // 静态网站部署的目录
 base: '/readme-blog/',

 // 网站标题
 title: '标 の 博客',

 // <meta name="description" content="...">
 description: '种一棵树最好的时间是十年前,其次是现在', 

 markdown: {
  
  // 显示代码行号
  lineNumbers: true
 }
}

module.exports = config

博客首页

公共文件

创建 docs/.vuepress/public 用于存放公共文件

我在 public/ , 存在了 favicon.ico 图标, 以及 zlx.jpg 首页的头像图片

简单的首页编写

将 docs/README.md设置为首页, 修改代码为:

---
home: true
heroImage: /zlx.jpg
footer: MIT Licensed | Copyright © 2018 ZhangHuanbiao
---

设置网站 ico 图标

配置网站的 ico 图标, 修改 .vuepress/config.js:

const config = {
 head: [
  ['link', { rel: 'icon', href: '/favicon.ico' }]
 ]
}

导航栏

配置导航栏

使用 vuepress 的默认主题配置导航栏 .vuepress/config.js:

const nav = [
 {
  text: '前端栈',
  items: [
   { text: 'Vue', link: '/WEB/Vue/vuepress-blog' },
   { text: 'React', link: '/WEB/React/react-router' }
  ]
 }
]

const config = {
 themeConfig: {

  // 项目的 github 地址
  repo: 'zhb333/readme-blog',

  // github 地址的链接名
  repoLabel: '代码',

  // 配置导航栏
  nav,
 },
}

创建有效的导航资源

为了使得导航栏的链接点击有效, 我们创建两个文件:

docs/WEB/Vue/vuepress-blog.md

# 使用`vuepress`搭建静态博客
## vuepress初始化
## 基础配置
## 博客首页
## 导航栏

docs/WEB/React/react-router.md

# react-router

侧边栏

侧边栏配置

使用 vuepress 的默认主题配置侧边栏 .vuepress/config.js:

const sidebar = {
 '/WEB/': [
  {
   title: 'Vue',
   children: [
    'Vue/vuepress-blog'
   ]
  },

  {
   title: 'React',
   children: [
    'React/react-router'
   ]
  }
 ]
}

const nav = [
 {
  text: '前端栈',
  items: [
   { text: 'Vue', link: '/WEB/' + sidebar['/WEB/'][0]['children'][0] },
   { text: 'React', link: '/WEB/' + sidebar['/WEB/'][1]['children'][0] }
  ]
 }
]

var config = {
 themeConfig: {

  // 当前 markdown 的 github 代码链接
  editLinks: true,

  // 链接显示的文本
  editLinkText: '查看原文|编辑此页',

  nav,
  sidebar,
 },
}

侧边栏效果

访问: http://localhost:8080/readme-blog/WEB/Vue/vuepress-blog.html, 可以看到侧边栏已经生成

将静态博客网站部署到外网

使用 gh-pages 进行项目部署

npm run deploy

过几分钟后,访问 https://zhb333.github.io/readme-blog/, 便可以看到在外网成功部署的静态博客

评论功能

我们使用 valine 来实现评论功能:

Valine - 一款快速、简洁且高效的无后端评论系统。

点击进入 Valine官网 ,需要先注册才能食用

安装 Valine

# Install leancloud's js-sdk
npm install leancloud-storage --save

# Install valine
npm install valine --save

注册 vuepress 全局组件

创建 .vuepress/components/Valine.vue

<template>
 <div id="vcomments"></div>
</template>

<script>
export default {
 name: 'Valine',
 mounted: function(){
  // require window 
  const Valine = require('valine');
  if (typeof window !== 'undefined') {
   this.window = window
   window.AV = require('leancloud-storage')
   
  }
   
  new Valine({
   el: '#vcomments' ,
   appId: '',// your appId
   appKey: '', // your appKey
   notify:false, 
   verify:false, 
   avatar:'mm', 
   placeholder: 'just go go' 
  });
 },
}
</script>

使用 Valine

只需要在 markdown 中调用即可

<Valine></Valine>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
React项目动态设置title标题的方法示例
Sep 26 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
详解javascript replace高级用法
Feb 17 #Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 #Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 #Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python画图学习入门教程
2016/07/01 Python
Python中的函数作用域
2018/05/07 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python做反被爬保护的方法
2019/07/01 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python坐标线性插值应用实现
2019/11/13 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
本科生就业推荐信
2014/05/19 职场文书
会计求职信
2014/05/29 职场文书
英文邀请函
2015/02/02 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang