超好用的写博客工具VuePress

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/

posted @   无涯子wyz  阅读(278)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示