使用vuepress 搭建静态个人技术博客

最新推荐文章于 2024-01-03 10:35:44 发布
最新推荐文章于 2024-01-03 10:35:44 发布
阅读量164 收藏
点赞数
文章标签： java github python git vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122065121
版权
本文介绍如何利用VuePress构建一个静态个人技术博客。VuePress提供了一个简洁的默认样式和文件结构，支持Markdown文件，具备搜索和标签功能。通过安装插件，可以增加大纲视图和回到顶部等增强用户体验的特性。
摘要由CSDN通过智能技术生成

原文链接: 使用vuepress 搭建静态个人技术博客

上一篇: nodejs 发送qq邮件 nodemailer

下一篇: nodejs 用 axios 向osc服务器上传图片[需要cookie]

官网

https://v1.vuepress.vuejs.org/

案例

https://github.com/vuepressjs/awesome-vuepress#gallery

创建项目 

yarn create vuepress blog

cd blog

yarn

yarn dev

yarn build

输入配置信息

up-8f7103c50fc4c56f57cddacb97fb0f1f7ce.png

_posts中为博客的md文件, .vuepress为项目的配置文件和公用组件以及静态资源

up-1d03b34d6ae017d1cd7e3b12165cae6186e.png

默认的风格有点简洁, 文件结构有点冗余

up-abc9d5f8b3b5d4ca2f1c25ebf0e6d29fbd0.png

支持搜索和tag

up-bcaca6ec10749607eef0aecc4cb00dbc802.png

插件

大纲视图和回到顶部

https://github.com/xuekai-china/vuepress-plugin-right-anchor 

yarn add -D vuepress-plugin-right-anchor

yarn add -D @vuepress/plugin-back-to-top

up-23b6a4e02501844abc7900db43018ab9026.png

阿豪boy
关注
VuePress搭建静态网站记录
程序员涂小哥的技术博客
04-05 1417
vuepress介绍 最近在看鱼皮直播时，了解到一个新的静态网站生成器，看起来似乎蛮好用，于是就自己也尝试了一下，它就是VuePress。 VuePress是基于vue的静态网站生成器，类似于hexo那种可以直接把markdown等格式的文件解析成静态网页，用来搭建个人网站比较方便。 可能很多人了解过hexo，它生成的静态网站，是支持本地离线运行访问的，这一点尤其是对于笔记管理类的博客就非常方便。 vuepress基本安装 依赖 node.js v12+ yarn v1 如果没有yarn，可以使用npm安
使用VuePress 搭建个人博客
goodspeeed的专栏
06-14 769
介绍VuePress 是一个静态网站生成器，包含由Vue驱动的主题系统和插件API，同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部...
vuepress（二）插件安装推荐
前端学习博客
06-05 4516
vuepress博客搭建系列文章
VuePress插件分享
weixin_42029738的博客
07-17 1993
vuepress各种插件装饰
vuepress（二）：插件
weixin_41897680的博客
04-18 3684
vuepress 常用插件
vuepress菜单栏使用请求接口的数据和编写的文档页面右侧添加 锚点导航栏
最新发布
山文的博客
01-03 1247
vuepress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器，基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。
04.配置vuepress插件
刚子的博客
01-19 3672
一个具有强大功能的 vuepress 主题仓库✨​ 在vuepress或者vdoing主题项目中，其实已经内置了一些第三方插件，比如百度统计，第三方搜索，代码块一件复制，评论区等等。想看用了什么插件，看package.json就可以。以下是我的安装的一些依赖 "devDependencies": { "dayjs": "^1.9.7", "inquirer": "^7.1.0", "json2yaml": "^1.1.0", "vuepress": "1.8.0",
使用vuepress搭建静态博客的示例代码
10-17
本知识点详细介绍了使用VuePress搭建静态博客的过程，包括其核心概念、基本结构、配置方式以及如何进行项目初始化和本地开发。 首先，VuePress作为一款静态网站生成工具，拥有自己的默认主题，但同时也支持主题的...
使用VuePress搭建个人博客教程
"手把手教你使用VuePress搭建个人博客，替换Hexo的新选择" VuePress是由Vue.js创始人尤雨溪在2018年4月12日推出的一款静态网站生成器，它基于Vue.js，内置了webpack配置，特别适合用于编写技术文档和创建个人博客。...
vue利用axios来完成数据的交互
08-27
主要介绍了vue利用axios来完成数据的交互,本文通过实例代码给大家讲解数据交互方法及安装方法,需要的朋友可以参考下
VuePress网站如何使用axios请求第三方接口
itclanCoder
09-16 883
前言VuePress是一个纯静态网站生成器,也就是它是无后端,纯前端的,那想要在VuePress中,发送ajax请求,请求一些第三方接口,有时想要达到自己一些目的在VuePress中，使用axios请求第三方接口，需要先安装axios，然后引入，最后使用本文包括VuePress中安装和使用axios,直接使用与挂载在根实例下使用解决跨域的问题,VuePress中使用axios请求第三方接口时,会出...
Vue 中的 Axios 使用
在下魔王ii的博客
07-16 208
Axios 中文文档地址 axios 的显著优势在于 代码量较 fetch 少了很多 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue fetch</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/v
vue promise封装axios
有问题可关注公众号：前端研究院 后台输入问题回复
08-18 308
index.vue中引用调用 <template> <div class="index-wrap"> <button type="button" @click="ajax_click">调用封装的请求</button> </div> </div> </template> <script> import slideShow from '../components/slide...
vue proxytable_Vue常见的面试知识点汇总（下）「附答案」
weixin_39879122的博客
11-20 572
作者：东起转发链接：https://zhuanlan.zhihu.com/p/103763164目录Vue常见的面试知识点汇总(上)「附答案」Vue常见的面试知识点汇总(下)「附答案」本篇由于Vue常见的面试知识点汇总内容比较多，本篇分为上下两部分。小编建议从上一篇看起⑤ 服务器端SSR渲染除了上面的方案以外，另一种方案也不容小视我们先说说通常项目中是如何加载页面数据：Vue组件生命周期中请求异步...
11.Vue安装Axios及使用
weixin_34008784的博客
04-22 248
1.安装：npm install axios --save-dev 2.main.js中导入 　　import axios from 'axios'; /* 引入axios进行地址访问*/ 　　Vue.prototype.$http = axios; 　　（注意：不使用use来使用该例，而是用prototype原型来使用） 3.login.vue中： 　　import axios fro...
一步步搭建 VuePress 及优化【插件系列】
weixin_33700350的博客
03-30 2722
介绍 在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢…… 当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。 VuePres...
vuepress侧边栏配置_GitHub - realDuang/vuepress-plugin-auto-sidebar: vuepress 自动生成侧边栏的插件。...
weixin_34757565的博客
01-15 1972
Vuepress Plugin Auto Sidebar介绍(Introduction)这是为 vuepress 自动生成侧边栏分组的插件。1. 目录结构示例docs├── exampleMenu1│ ├── exampleSubMenu1-1│ │ └── file1.md│ ├── exampleSubMenu1-2│ │ └── exampleSubMenu1-2-1...
vuepress入门详解（六）vuepress 实用插件
牛魔王的专栏
05-28 8047
vuepress 实用插件 这些插件都是官方提供的，有些在我们实用默认主题的时候已经安装了，不需要再单独安装，有些插件需要我们单独安装。具体请看下面的介绍 默认主题自带的插件 @vuepress/plugin-active-header-links @vuepress/plugin-nprogress @vuepress/plugin-search vuepress-plugin-container vuepress-plugin-smooth-scroll @vuepress/plugin-last-u
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值