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

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>

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

(0)

相关推荐

  • 使用vuepress搭建静态博客的示例代码

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理. 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容.扩展 Markdown 语法 响应式布

  • Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    VuePress vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档. 一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错. 这是VuePress的官方文档 上手搭建 你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍. 1.首先安装VuePr

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

    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 # 安

  • Flask入门教程实例:搭建一个静态博客

    现在流行的静态博客/网站生成工具有很多,比如 Jekyll, Pelican, Middleman, Hyde 等等,StaticGen 列出了目前最流行的一些静态网站生成工具. 我们的内部工具由 Python/Flask/MongoDB 搭建,现在需要加上文档功能,写作格式是 Markdown,不想把文档放到数据库里,也不想再弄一套静态博客工具来管理文档,于是找到了 Flask-FlatPages 这个好用的 Flask 模块.熟悉 Flask 的同学花几分钟的时间就可以用搭建一个简单博客,加

  • 用Pelican搭建一个极简静态博客系统过程解析

    我一直建议每个开发者都要有写博客记笔记的习惯,一来可以沉淀知识,二来可以帮助别人,我使用过很多博客平台,也用Python开发过博客系统,就这么个东西折腾好几年,一直找不到理想的产品,直到我用Pelican之前. Pelican 是基于Python实现的开源静态博客系统,所谓静态博客系统就是无需数据库,每一篇文章会事先渲染成HTML静态文件,访问速度非常快.所以今天给大家介绍下怎么使用Pelican. 使用Pelican 你需要了解一点git,熟悉基本的Linux shell 命令,懂一点Pyth

  • 利用drone ci自动化部署静态博客的完整步骤

    目录 前言 准备 安装drone ci 1.docker-compose配置文件 2.docker-compose配置文件主要参数详解 drone server DRONE_SERVER_PROTO和DRONE_SERVER_HOST DRONE_RPC_SECRET DRONE_USER_CREATE DRONE_DATABASE_DRIVER DRONE_DATABASE_DATASOURCE DRONE_GITEE_CLIENT_ID和DRONE_GITEE_CLIENT_SECRET d

  • 六个步骤,从零开始教你搭建基于WordPress的个人博客

    目录 摘要:WordPress是使用PHP语言开发的博客平台,是免费开源的.用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站,也可以把WordPress当作一个内容管理系统(CMS)来使用. 一.购买云服务器和域名 可以参考以下博客进行购买,以华为云为例,服务商可以自选.如果已有云服务器和域名,直接进行第二步操作. ▶ 云服务器和域名的购买-华为云 二.远程连接云服务器 可以参考以下博客进行远程连接服务器,也可以用其他办法连接.连接以后进行第三步操作. ▶ Xftp和Xshel

  • 如何使用Gitblog和Markdown建自己的博客

    下面给大家分享下如何使用Gitblog和Markdown建自己的博客,如何大家拥有服务器或者云平台提供的云主机,我推荐大家使用Linux+ Nginx 来运行Gitblog,如果大家目前只有Apache环境也可以. 域名解析 将你准备好的域名解析到你的主机IP,推荐使用 dnspod 来管理和监控你的域名,具体的使用方法参考dnspod官方说明文档,非常简单. Nginx+PHP运行环境 首先安装好你的Nginx和PHP环境,PHP版本要求5.3以上.如果你没有安装过,可Google搜索相关教程

  • Django 博客实现简单的全文搜索的示例代码

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成.现在我们来为我们的博客提供一个简单的搜索功能. 概述 博客文章通常包含标题和正文两个部分.当用户输入某个关键词进行搜索后,我们希望为用户显示标题和正文中含有被搜索关键词的全部文章.整个搜索的过程如下: 用户在搜素框中输入搜索关键词,假设为 "django",

  • Node.js完整实现博客系统详解

    目录 一.项目功能说明 二.最终效果 三.文件目录结构说明 四.项目技术栈 五.核心技术 1. 使用Schema定义数据模型 2. mongoose 的操作 3. mogodb数据库的操作 4. 使用第三方插件 express-session:存取数据状态 5. 挂载路由 6. 使用md5对密码进行加密 六.遇到的问题 七.github链接 一.项目功能说明 登录.注册 新建博客 首页显示全部博客 查看博客详情页 查看博客评论区 修改.删除博客 二.最终效果 首页: 登录.注册: 详情页: 评论

  • Python个人博客程序开发实例框架设计

    目录 1.数据库(models.py) 1.1 管理员 Admin 1.2 分类 Category 1.3 文章 Post 1.4 评论 Comment 1.5 社交链接 Link 2.生成虚拟数据(fakes.py) 3.模板 3.1 模板上下文 3.2 渲染导航链接 3.3 Flash消息分类 4.表单(forms.py) 4.1 登录表单 4.2 文章表单 4.3 分类表单 4.4 评论表单 5.视图函数(blueprints:admin.auth.blog) 6.电子邮件支持(email

随机推荐