介绍此主题继承至vuepress的默认主题，添加功能有标签页改造，主页改造，博客分类及展示，gitalk集成及gitalk自动化配置，最新google Analytics集成等。使用npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform
复制代码然后在docs/.vuepress/config.js文件中添加
VuePress 如何自定义主题和页面布局要自定义VuePress的主题，需要做以下几步：创建主题文件夹：在VuePress项目的根目录下创建一个themes文件夹，并在其中新建一个以主题名命名的文件夹，例如my-theme。创建主题配置文件：在my-theme文件夹中创建一个config.js文件，用于配置主题的一些选项，例如导航栏、侧边栏、颜色等。创建主题模板文件：在my-theme文件夹中创
VuePress使用教程前言作为一个程序员，拥有一个自己的博客网站算得上是家常便饭了 每当我们解决一个问题时，及时总结并记录下来是一个对学习很有帮助的习惯，方便以后遇到同类型的问题时，不用再去百度谷歌找半天。而将这些内容发布在自己的博客网站上，同样也可以让其他遇上同样问题的人看到，并帮助到他们。借用在一个个人博客上看到的一句话：对任何渴望进步的人来说，写博客/文章/回答对自己的成长帮助都是巨大的。
vuepress 基本配置::: tip 本页所列的选项仅对默认主题生效。如果你在使用一个自定义主题，选项可能会有不同。 :::首页配置首页配置文件是doc目录下的README.md文件，以下是一个如何使用的例子：---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
ac
前言市面上的博客框架有很多，鉴于vuepress是静态博客框架，可以部署到GitHub Pages而不用自己提供服务器，并且对前端也非常友好，因此我选择了vuepress，主题选用了vuepress-theme-hope。准备工作mkdir vuepress-demo
cd vuepress-demo
npm init vuepress-theme-hope docs这里的 docs 是一个参数，
首先附上vuepress官网： 介绍 | VuePress 正如官网上介绍的一样，vuepress由两部分组成： 极简静态网站生成器，默认主题（为写技术文档儿优化的）。这里我们先了解下如何搭建一个静态网站。目标：搭建一个类似如下的文档：没错，我除了看文档，还借鉴了这位大神的技术博客。附上链接： 搭建步骤：1. 创建并进入一个新目录，然后初始化。 2. 将
最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题.只需体验三分钟，你就会跟我一样，爱上这款主题.vuepress-theme-indigo-material, 已经发布到npm, 请客官享用~~介绍vuepress-theme-indigo-material 的原主题是hexo-theme-indigo, github 的 star 数高达2042, fork 的有451个
前言上一章已经讲了 vuepress 主题如何实现继承，这样我们可以任意修改默认主题的任何组件及样式了。我们知道 vuepress 是无法自动根据我们 markdown 文件中的---
tags:
- js
- vue
---
复制代码生成标签云的页面的，而一个博客，标签在其中有知识分类及导航功能，是必不可少的一环，下面带领大家来改造一下默认主题让它能支持自动生成标签云页面第一步配置的修改既然是主
推荐一款惊艳的VuePress主题：IndigoVuePress 是由 Vue.js 作者尤雨溪开发的一款轻量级静态站点生成器，它让编写文档变得更加便捷、美观。而今天我要向大家推荐的是一个基于 VuePress 的优秀主题——VuePress Theme Indigo。这是一个优雅且功能丰富的主题，为你的技术博客或文档站点提供了全新的视觉体验。项目简介是由开发者 @yscoder 制作的，其灵感来
前言想要分分钟搭建自己博客，可以直接跳到最后，教你如何分分钟搭建博客。速览预览地址
主题插件GitHub地址
个人博客部署GitHub地址
主题使用安装主题创建一个新的项目 my-blog：mkdir my-blog
cd my-blog初始化 yarn 或 npm ：yarn init 或 npm init -y安装 vuepress 和 vuepress-theme-melodydl：yar
随着开源项目knife4j添加的新特性越来越多,搭建一个开源软件的技术博客迫在眉睫，针对非专业前端的开发者来说，能快速搭建一个网站当然是最好的，正好，看到了VuePress这款产品特点简直是和自己完美契合，主要有几点；通过编写Markdown文件就可以轻松完成整个站点的内容输出,不用考虑排版，专注于协作基于Vue、Node等技术的可插拔式的自定义插件开发体系,构建自定义的主题、插件等简单、方便安装
4.1 项目结构首先说明一下官方推荐的目录结构：4.2 创建项目文件夹可以右键手动新建，也可以使用 mkdir 命令新建：mkdir vuepressBlogDemo全局安装 VuePressnpm install -g vuepress进入 vuepressBlogDemo 文件夹，初始化项目 使用 npm init 或 npm init -y（默认yes）npm init -y4.3 创建文件
花了2天多的时间总算搭出一个博客的雏形了。 搭建的博客没有使用官方提供的主题，而是自己创建了一个主题。所以，在样式上，有自己的风格和特点。转入正题。
环境搭建安装VuePressyarn global add vuepress
或者：npm install -g vuepress
也可以直接下载我的代码。然后cnpm i 下载依赖 https://github.com/newway7/blog
在项目扩展到一定程度，我们会对项目中大量的公共业务做封装，当多人开发时就带来一个问题：如何让所有人快速使用封装好的组件，降低学习成本？这里提供一个解决方案，那就是Vuepress框架，最新的 Vuepress2.x 框架已经蓄势待发，支持Vue3.x。一、创建一个基础Vuepress项目1、创建并进入一个新目录创建VuepressDocs目录mkdir VuepressDocs
cd Vuepre
1 什么是VuePress？vuePress是以vue驱动的主题系统的简约静态网站生成工具2 如何搭建？在官方网址上说的其实很清楚的，这边简要的说一下2.1 利用npm 安装 vuepress# 初始化 npm
npm init -y
# 安装
yarn global add vuepress # 或者：npm install -g vuepress
# 新建一个 docs 文件夹
mkdir
说明最近想把常用的一些干货知识点都集中起来，方便发布和查找。相当于创建一个自己的知识库，我就叫它Java技术文档。虽然博客写文档也挺方便，但是在于文档的集中阅读和管理方面还是不够简洁和快速。此处就以Vue官方文档举例，它就是用的自家技术vuepress创建的。关于vuepresshttps://www.vuepress.cn/关于github pagesGithub Pages其实等于jekyll
最终效果使用方式页面效果一、需求vitepress-theme-demoblock插件在编辑md文件时，不支持TSX模式，也无法import其他依赖，并且展开隐藏的vue代码都在md文件中，不够优雅，且每个md文件太长。至此弃用此拆件，改用自己封装demo组件二、plugins配置：在docs/.vitepress下新建config文件夹1、在config文件夹新建global.ts文件，代码如下
前言在上一篇文章 vuepress（一）：搭建个人博客插件的使用基础用法module.exports = {
plugins: [ 'vuepress-plugin-xxx', .... ]
}Babel 式module.exports = {
plugins: [
[
'vuepress-plugin-xxx',
{ /* options */ }
前端博客（VuePress）一、介绍VuePress 是尤雨溪发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网。VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而
通过VuePress管理项目文档
原创
2021-07-21 16:29:53
465阅读
