vuepress搭建个人博客以及部署

vuepress,Vue 驱动的静态网站生成器,以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
vuepress官网
vuepress存在很多主题,也可以自定义设计主题,上传npm使用
这里采用vuepress-theme-hope主题模板进行制作
vuepress-theme-hope

创建项目命令yarn/npm/pnpm都可以

yarn create vuepress-theme-hope my-docs

这里记录几个关键点

一、目录结构

在这里插入图片描述
src/.vuepress: 用于存放全局的配置、组件、静态资源等。
src/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
src/.vuepress/theme: 用于存放本地主题。
src/.vuepress/styles: 用于存放样式相关的文件。
src/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
src/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
src/.vuepress/public: 静态资源目录。
src/.vuepress/templates: 存储 HTML 模板文件。
src/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
src/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
src/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。
src/.vuepress/enhanceApp.js: 客户端应用的增强。
以上就是基础的文件结构

二、重点文件分析

配置文件config.js

import { defineUserConfig } from "vuepress";
import theme from "./theme.js";export default defineUserConfig({base: "/docs/",lang: "zh-CN",title: "云风网",description: "云风的知识库",theme,// 和 PWA 一起启用// shouldPrefetch: false,
});

导航栏配置navbar.js

import { navbar } from "vuepress-theme-hope";export default navbar(["/",{text: "node案例",icon: "pen-to-square",prefix: "/node/",children: ["webBuild",],},// "/node/",{text: "云风网",icon: "book",link: "http://www.niech.cn/",},{text: "CSDN",icon: "book",link: "https://blog.csdn.net/qq_43206280/",}
]);

主题配置theme.js

import { hopeTheme } from "vuepress-theme-hope";
import navbar from "./navbar.js";
import sidebar from "./sidebar.js";
import { MR_HOPE_AVATAR } from "./logo.js";export default hopeTheme({hostname: "https://mister-hope.github.io",author: {name: "Niech",url: "http://www.niech.cn",},iconAssets: "fontawesome-with-brands",logo: "/logo.png",repo: "vuepress-theme-hope/vuepress-theme-hope",docsDir: "src",// 导航栏navbar,// 侧边栏sidebar,// 页脚footer: "默认页脚",displayFooter: true,// 博客相关blog: {description: "一个前端开发者",intro: "/intro.html",medias: {GitHub: "https://github.com/nch1994/",Gitee: "https://gitee.com/niech_project"},},// 加密配置encrypt: {config: {"/demo/encrypt.html": ["1234"],},},// 多语言配置metaLocales: {editLink: "",},// 如果想要实时查看任何改变,启用它。注: 这对更新性能有很大负面影响// hotReload: true,// 在这里配置主题提供的插件plugins: {blog: true,search: true,// 在启用之前需要安装 @waline/client// 警告: 这是一个仅供演示的测试服务器,在生产环境中请自行部署并使用自己的服务器!// comment: {//   provider: "Waline",//   serverURL: "https://waline-comment.vuejs.press",// },components: {components: ["Badge", "VPCard"],},// 此处开启了很多功能用于演示,你应仅保留用到的功能。mdEnhance: {align: true,attrs: true,codetabs: true,component: true,demo: true,figure: true,imgLazyload: true,imgSize: true,include: true,mark: true,stylize: [{matcher: "Recommended",replacer: ({ tag }) => {if (tag === "em")return {tag: "Badge",attrs: { type: "tip" },content: "Recommended",};},},],sub: true,sup: true,tabs: true,vPre: true,search: true,copyCode:{},// 在启用之前安装 chart.js// chart: true,// insert component easily// 在启用之前安装 echarts// echarts: true,// 在启用之前安装 flowchart.ts// flowchart: true,// gfm requires mathjax-full to provide tex support// gfm: true,// 在启用之前安装 katex// katex: true,// 在启用之前安装 mathjax-full// mathjax: true,// 在启用之前安装 mermaid// mermaid: true,// playground: {//   presets: ["ts", "vue"],// },// 在启用之前安装 reveal.js// revealJs: {//   plugins: ["highlight", "math", "search", "notes", "zoom"],// },// 在启用之前安装 @vue/repl// vuePlayground: true,// install sandpack-vue3 before enabling it// sandpack: true,},// 如果你需要 PWA。安装 vuepress-plugin-pwa2 并取消下方注释// pwa: {//   favicon: "/favicon.ico",//   cacheHTML: true,//   cachePic: true,//   appendBase: true,//   apple: {//     icon: "/assets/icon/apple-icon-152.png",//     statusBarColor: "black",//   },//   msTile: {//     image: "/assets/icon/ms-icon-144.png",//     color: "#ffffff",//   },//   manifest: {//     icons: [//       {//         src: "/assets/icon/chrome-mask-512.png",//         sizes: "512x512",//         purpose: "maskable",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-mask-192.png",//         sizes: "192x192",//         purpose: "maskable",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-512.png",//         sizes: "512x512",//         type: "image/png",//       },//       {//         src: "/assets/icon/chrome-192.png",//         sizes: "192x192",//         type: "image/png",//       },//     ],//     shortcuts: [//       {//         name: "Demo",//         short_name: "Demo",//         url: "/demo/",//         icons: [//           {//             src: "/assets/icon/guide-maskable.png",//             sizes: "192x192",//             purpose: "maskable",//             type: "image/png",//           },//         ],//       },//     ],//   },// },},
});

公共侧边栏配置sidebar.js

import { sidebar } from "vuepress-theme-hope";export default sidebar({"/": [// "",// {//   text: "如何使用",//   icon: "laptop-code",//   prefix: "demo/",//   link: "demo/",//   children: "structure",// },// {//   text: "文章",//   icon: "book",//   prefix: "posts/",//   children: "structure",// },// "intro",// {//   text: "幻灯片",//   icon: "person-chalkboard",//   link: "https://plugin-md-enhance.vuejs.press/zh/guide/content/revealjs/demo.html",// },],
});

配置完npm run docs:dev就可以看到效果了
在这里插入图片描述
在这里插入图片描述
接下来就在.md编辑自己想要写的文章
1、src目录下新建一个文件夹,自己规划一下文件名称,我这里取名node,主要存放node相关文档
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

保存渲染之后就是现在这样
接下来就是打包部署npm run docs:build
tips:打包根目录在config.js里面进行配置
如果直接域名访问base: “/”
如果不是,这个地址需要对应,比如base: "/docs/"对应的是http://www.niech.cn/docs/

如果想要部署到gitee或者github
新建一个仓库后选择服务,里面有类似page文档的功能,按照步骤创建,最后启动就完成了。
云风的知识库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

移动端应用(APP)如何设计测试用例?

为 APP 设计测试用例需要考虑移动设备的特殊性,如不同的操作系统、设备尺寸、硬件特性以及应用程序自身的特定功能。 以下是为APP设计测试用例时要考虑的内容: 1. 理解需求 熟悉APP的功能需求、用户故事和设计文档。 确定APP的目标用户群体、使用场景…

Leetcode刷题笔记题解(C++):1114. 按序打印(多线程)

思路: 保证A,B,C三个线程的顺序不会变,即优先级顺序的问题 A,B需要资源1,B,C需要资源2 A先占用资源1和资源2,A线程完了之后释放资源1不释放资源2,然后B线程占用资源1,A线程完了之后释放资源1和资源2&…

C++ 11 多线程库初步学习

在C11标准中&#xff0c;可以简单通过使用thread库&#xff0c;来管理多线程。 thread库可以看做对不同平台多线程API的一层包装&#xff1b;因此使用新标准提供的线程库编写的程序是跨平台的。 使用时需要#include <thread>头文件&#xff1b; #include <iostream&g…

Wpf 使用 Prism 实战开发Day16

客户端使用RestSharp库调用WebApi 动态加载数据 在MyDoTo客户端中&#xff0c;使用NuGet 安装两个库 RestSharp Newtonsoft.Json 一. RestSharp 简单的使用测试例子 当前章节主要目的是&#xff1a;对RestSharp 库&#xff0c;根据项目需求再次进行封装。下面先做个简单的使用…

Python语言入门到精通之练习实例15:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。

题目&#xff1a;利用条件运算符的嵌套来完成此题&#xff1a;学习成绩>90分的同学用A表示&#xff0c;60-89分之间的用B表示&#xff0c;60分以下的用C表示。 程序分析&#xff1a;程序分析&#xff1a;(a>b) ? a:b 这是条件运算符的基本例子。 程序源代码&#xff1…

瑞丽杂志引领潮流,VOSS眼镜概念店开启奢华新纪元!

近日&#xff0c;由《瑞丽》杂志社举办的2023第4届瑞丽轻奢品牌大赛&#xff0c;以“轻奢•悦藏”为主题的大赛已圆满结束&#xff0c;VOSS眼镜荣获&#xff1a;2023瑞丽轻奢品牌大赛「轻奢时尚风格奖」&#xff0c;作为眼镜行业唯一获此奖项的品牌&#xff0c;VOSS眼镜对此表示…

LeetCode.11. 盛最多水的容器

题目 题目链接 分析 这道题的意思就是让我们找两个下标&#xff0c;以这两个下标组成的线为底&#xff0c;高度取这两个位置对应数字的最小值为高&#xff0c;组成一个长方形&#xff0c;求长方形最大的面积可以为多少。 暴力的解法是什么&#xff1f;&#xff1f;&#xf…

Spring Boot 访问数据库——JdbcTemplate

① Spring Boot 框架为 SQL 数据库提供了广泛的支持&#xff0c;既有用 JdbcTemplate 直接访问 JDBC&#xff0c;同时支持“object relational mapping”技术&#xff08;如 Hibernate、MyBatis&#xff09;。Spring Data 独立的项目提供对多种关系型和非关系型数据库的访问支持…

VUE中,跳转页面之前判断并显示弹框组件

VUE中&#xff0c;跳转页面之前判断并显示弹框组件。 涉及到路由守卫、数据交互。有空我在完善&#xff0c;先直接给出代码 代码使用了 element plus、vuex 案例代码 路由文件 import { createRouter, createWebHistory } from vue-router; import CommonEntry from /views/…

取消Vscode在输入符号时自动补全

取消Vscode在输入符号时自动补全 取消Vscode在输入符号时自动补全问题演示解决方法 取消Vscode在输入符号时自动补全 问题演示 在此状态下输入/会直接自动补全, 如下图 笔者想要达到的效果为可以正常输入/而不进行补全, 如下图 解决方法 在设置->文本编辑器->建议, 取消…

以太网的 MAC 层

目录 1. MAC 层的硬件地址 48 位的 MAC 地址 2. MAC 帧的格式 以太网 V2 的 MAC 帧格式 无效的 MAC 帧 IEEE 802.3 MAC 与以太网 V2 MAC 帧格式的区别 1. MAC 层的硬件地址 硬件地址又称为物理地址&#xff0c;或 MAC 地址。 IEEE 802 标准为局域网规定了一种 48 位…

Acwing801二进制中1的个数

题目 给定一个长度为 n 的数列&#xff0c;请你求出数列中每个数的二进制表示中 11 的个数。 输入格式: 第一行包含整数 n 第二行包含 n 个整数&#xff0c;表示整个数列。 输出格式: 共一行&#xff0c;包含 n 个整数&#xff0c;其中的第 i 个数表示数列中的第 i 个数的…

HTML你要知道哪些语法?

表格 表格的主要作用 1.表格主要用于显示、展示数据&#xff0c;因为它可以让数据显示的非常的规整&#xff0c;可读性非常好。特别是后台展示数据的时候&#xff0c;能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理 2.表格不是用来布局页…

【Kafka】高级特性:主题

目录 主题的管理创建主题查看主题修改主题删除主题 增加分区分区副本的分配必要参数配置KafkaAdminClient应用功能操作示例 主题的管理 使用kafka-topics.sh脚本。 下面是使用脚本的一些选项 选项说明–config <String: namevalue>为创建的或修改的主题指定配置信息。…

C语言常见面试题:什么是枚举,枚举的作用是什么?

枚举是一种特殊的数据类型&#xff0c;它是一组具命名的整型常量的集合。枚举的作用如下&#xff1a; 限制用户不能随意赋值&#xff1a;枚举类型可以限制用户只能使用定义时列举的值进行赋值&#xff0c;而不能随意赋值。这样可以增加代码的可读性和可维护性。方便管理公共的…

[题单练习] 大模拟题

看完题后不知所措 P1058 [NOIP2008 普及组] 立体图 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 简单来说&#xff0c;题目要我们按照输入&#xff0c;把立体图画出来&#xff0c;先放张图来震撼一下 看题解&#xff0c;题解的思路如下&#xff1a; 1. 先把一个积木块存入…

栈和队列的动态实现(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

图像与二进制数据间的转换

概述 此文档主要是记录图像与二进制互相转换的方法&#xff0c;此文档记录于20220811 进行图片和二进制的互相转换 若想转为base64&#xff0c;可以看 图像与base64互转 的内容。 Python 资料&#xff1a;python 图片和二进制转换的三种方式_脸不大的CVer的博客-CSDN博客_p…

统计学-R语言-7.3

文章目录 前言总体方差的检验一个总体方差的检验两个总体方差比的检验 非参数检验总体分布的检验正态性检验的图示法Shapiro-Wilk和K-S正态性检验总体位置参数的检验 练习 前言 本篇文章继续对总体方差的检验进行介绍。 总体方差的检验 一个总体方差的检验 在生产和生活的许多…

1 月 26日算法练习

文章目录 九宫幻方穿越雷区走迷宫 九宫幻方 小明最近在教邻居家的小朋友小学奥数&#xff0c;而最近正好讲述到了三阶幻方这个部分&#xff0c;三阶幻方指的是将1~9不重复的填入一个33的矩阵当中&#xff0c;使得每一行、每一列和每一条对角线的和都是相同的。 三阶幻方又被称…