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 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
node.js的事件机制
Feb 08 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Vue中keep-alive的两种应用方式
Jul 15 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的autoload机制的实现解析
2012/09/15 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jQuery自动添加表单项的方法
2015/07/13 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
基于FME使用Python过程图解
2020/05/13 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
网管求职信
2014/03/03 职场文书
年终工作总结范文2014
2014/11/27 职场文书
单位委托函范文
2015/01/29 职场文书
运动会广播稿300字
2015/08/19 职场文书
初中生物教学反思
2016/02/20 职场文书
信息技术课教学反思
2016/02/23 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js