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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
js实现轮播图特效
May 28 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
做个自己站内搜索引擎
2006/10/09 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
浅谈Python中的私有变量
2018/02/28 Python
python监控进程脚本
2018/04/12 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python高级特性简介
2020/08/13 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
Linux机考试题
2015/07/17 面试题
初中生物教学反思
2014/01/10 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
村委会贫困证明范本
2014/09/17 职场文书
大明湖导游词
2015/02/03 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang