526互联

超好用的写博客工具VuePress

发布时间 2023-04-29 18:27:27作者: 无涯子wyz

VuePress简介

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

快速搭建一个环境

  1. 创建并进入一个新目录
mkdir study && cd study
  1. 初始化
npm init
  1. 安装本地依赖VuePress
npm install -D vuepress
  1. 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
  1. 设置package.json
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. 启动
npm run docs:dev

VuePress 会在 http://localhost:8080启动一个热重载的开发服务器

基础配置

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Study',
  description: '学习使用VuePress'
}

此时界面类似于：

导航栏设置

修改 config.js:

module.exports = {
    title: 'Study',
    description: '学习使用VuePress',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '无涯子博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/wyz210052253/' },
                    { text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
                ]
            }
        ]
    }
}

添加侧边栏

现在我们添加一些 md 文档，目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ blogs
|  	  └─ Dubbo学习总结.md
|	  └─ Zookeeper深入学习.md
└─ package.json

config.js 配置如下:

module.exports = {
    title: 'Study',
    description: '学习使用VuePress',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '无涯子博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/wyz210052253/' },
                    { text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
                ]
            }
        ],
        sidebar: [
            {
                title: '首页',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学习前提", path: "/" }
                ]
            },
            {
                title: '技术文章',
                path: '/blogs/Dubbo学习总结',
                collapsable: false,
                children: [
                    { title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
                    { title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
                ],

            }
        ]
    }
}

安装主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec：

npm install vuepress-theme-reco --save-dev

在 config.js 里引用该主题：

module.exports = {
    title: 'Study',
    description: '学习使用VuePress',
    theme: 'reco',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '无涯子博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/wyz210052253/' },
                    { text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
                ]
            }
        ],
        sidebar: [
            {
                title: '首页',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学习前提", path: "/" }
                ]
            },
            {
                title: '技术文章',
                path: '/blogs/Dubbo学习总结',
                collapsable: false,
                children: [
                    { title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
                    { title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
                ],

            }
        ]
    }
}

文章信息

---
title: Dubbo学习总结
author: 无涯子
date: '2023-04-27'
---

设置语言

module.exports = {
    title: 'Study',
    description: '学习使用VuePress',
    theme: 'reco',
    locales: {
        '/': {
          lang: 'zh-CN'
        }
    },
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '无涯子博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/wyz210052253/' },
                    { text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
                ]
            }
        ],
        sidebar: [
            {
                title: '首页',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学习前提", path: "/" }
                ]
            },
            {
                title: '技术文章',
                path: '/blogs/Dubbo学习总结',
                collapsable: false,
                children: [
                    { title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
                    { title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
                ],

            }
        ]
    }
}


、

开启目录结构

module.exports = {
    title: 'Study',
    description: '学习使用VuePress',
    theme: 'reco',
    locales: {
        '/': {
          lang: 'zh-CN'
        }
    },
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { 
                text: '无涯子博客', 
                items: [
                    { text: 'Github', link: 'https://github.com/wyz210052253/' },
                    { text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
                ]
            }
        ],
        sidebar: [
            {
                title: '首页',
                path: '/',
                collapsable: false,
                children: [
                    { title: "学习前提", path: "/" }
                ]
            },
            {
                title: '技术文章',
                path: '/blogs/Dubbo学习总结',
                collapsable: false,
                children: [
                    { title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
                    { title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
                ],

            }
        ],
        subSidebar: 'auto'
    }
}

自定义修改样式

.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

部署Github

部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：Study。

在根目录下建立一个脚本文件：deploy.sh

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy Github'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:wyz210052253/Study.git master:pages

cd -

执行脚本：

sh deploy.sh


通过Github访问



在线地址：https://wyz210052253.github.io/Study/