在过去 VuePress 只提供默认的文档主题，然而你可以通过它开发各种静态网站，除了文件以外，我最常看到的大概非博客莫属。 而我们在今天正式移除官方博客插件与主题的 WIP 状态。...Markdown 是一种轻量级标记式语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们「使用易读易写的纯文字格式编写文件，然后转换成有效的 XHTML（或者 HTML）文件」。...这个主题还提供了以下配置， 以下配置都要写在 .vuepress/config.js 的themeConfig 中。 以下配置都不是必要配置，请针对你的需求去选择。...默认情况下，将使用Rss feed，但也可以使用Atom和JSON feed。...例如，基于目录对帖子进行分类，例如，官方博客主题假定_posts下的所有.md文件均为博客文章，并在根目录/中列出。
要生成静态的 HTML 文件，运行： yarn docs:build 或者：npm run docs:build 默认情况下，文件将会被生成在 .vuepress/dist，也可以通过 .vuepress...以上步骤都成功以后，就可以在浏览器总看到页面了，接下来就是对页面进行布局 主题配置 本文是根据VuePress默认主题配置 1.首页 在docs文件夹下创建.vuepress文件夹和README.md文件...下一步是如何在markdown中使用vue组件，也就是在页面中展示自己的项目。 在markdown中使用Vue 在.vuepress中创建components文件夹。...放在public文件夹中，可以在components文件夹中的组件引入。 这是docs文件夹目录结构 ?...如： 注意：在markdown文件中如果需要给组件名缩进，不要用tab键，会被当做markdown语法解析。
你可以使用 Markdown在新窗口打开 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。...build docs" } } 将默认的临时目录和缓存目录添加到 .gitignore 文件中 echo 'node_modules' >> .gitignore echo '.temp' >>...这个功能是默认启用的，你可以通过配置来禁用它。 你可以在代码块添加 :line-numbers / :no-line-numbers 标记来覆盖配置项中的设置。...总结 优点：配套工具较为完善，默认给的主题已经集成度很高了，自定义选项多，更适合程序员发的文档。...使用的是默认的构建输出目录 (.vuepress/dist) ； 注意构建产物的路径问题，需要设置正确的 base 选项。
使用Vuepress和Nginx搭建个人博客 ## Vuepress VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件...API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。...而VuePress除了使用Vue外，还继承了Vue各项能力，比如使用stylus写css，也能通过enhanceApp来增强应用，比如在Vuepress中使用Vuex等等。...后续将介绍如果安装Vuepress，如果使用enhanceApp，如果使用stylus，如何在Vuepress中自定义主题，并且最终将vuepress内容发布到Nginx供internet访问。...run docs:build 命令可以编译生成所有的静态html文件，这些静态文件可以配置在nginx服务器直接访问 vuepress目录结构 ├── docs │ ├── .vuepress (
使用VuePress2.X构建个人知识博客，并且用个人域名部署到GitHub Pages中 什么是VuePress VuePress 是一个以 Markdown 为中心的静态网站生成器。...你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。...当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。...报错） 更换主题，一直报错就决定不换主题了，使用默认主题了！.../ 访问 改成使用域名，发现缺少CNAME 文件 于是在docs.yml文件中添加一步 - name: Add CNAME file # 添加 CNAME 文件 run: echo
markdown 是美国科技博主 John Gruber 于 2004 年推出，是一种纯文本格式的轻量级标记语言。...主题配置 一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。...同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等 默认主题： 首页 修改首页，修改 docs/README.md，VuePress...在 .vuepress/config.js 配置文件中，通过 themeConfig.nav 增加一些导航栏链接: // .vuepress/config.js module.exports = {.../config.js 配置文件中，通过 themeConfig.sidebar 增加侧边栏配置: // .vuepress/config.js module.exports = { ...
Vuepress自带一个彩色的主题风格，很漂亮，相对于前面几个来说，可操作性比较方便，上手快，格式众多，适合小白学习和使用。下面具体讲一下Vuepress的使用。....vuepress/components 该目录中的 Vue 组件将会被自动注册为全局组件。 .vuepress/theme 用于存放本地主题。...6.在markdown中的使用： 在markdown文件开头加入以下两个css链接，然后再去写katex语法即可。...（二）config.js配置 路径为：hello_vuepress/docs/.vuepress/config.js （1） 普通配置 设置网站标题，并显示在默认主题的导航栏中。...1.首页 默认的主题提供了一个首页（Homepage）的布局。
参数配置 vuepress 提供了两类配置： 配置文件，如 .vuepress/config.js，需要导出一个js对象，一般用于进行全局配置 YAML front matter，配置在 md 文件头部...3.1.1 主页(homepage) 默认主题提供了一个首页（Homepage）布局，用于网站的主页 docs/README.md，使用 YAML front matter 配置。...index.styl 作为全局样式文件生成在最终的css文件结尾，具有比默认样式更高的优先级，palette.styl 用于重写默认样式常量，或者设置新的 stylus 颜色常量，如： $accentColor...在 Markdown 中使用 Vue .vuepress/components 中的所有 *.vue 文件都会自动注册为全局异步组件，如： . └─ .vuepress └─ components...自定义主题 创建 .vuepress/theme 目录和 Layout.vue 文件，详见文档。 7.
安装 VuePress基础版（默认主题）：bashnpm install -D vuepress@next美化版（推荐主题 vuepress-theme-reco）：bashnpm install -D...静态资源将图片（如 logo.png、avatar.jpg）放入 docs/.vuepress/public/images/。在 Markdown 中引用：markdown!...使用第三方主题以 vuepress-theme-reco 为例：javascript// config.jsimport themeReco from 'vuepress-theme-reco'; export...生产构建：bashnpm run build生成静态文件到 docs/.vuepress/dist/。六、部署到 GitHub Pages1....仓库名（如 /vuepress-blog/）});2.
默认的主题是不存在的，但基本的工作流程是有的。 定制化 可以通过.vitepress/config.js进行配置（见src/config.ts）。 您可以通过添加以下文件来开发您的自定义主题。...从根本上讲，这是因为VuePress是一个底层的Webpack应用程序。即使只有两页，也要编译完整的webpack项目（包括所有主题源文件）。...注意，在应用优化的同时，用户仍然可以在标记内容中自由混合Vue组件 - 编译器会自动为你做静态/动态分离，你永远不需要考虑。...它鼓励使用原生JavaScript和CSS变量进行主题设计。 这将成为未来的下一个VuePress吗？ 也许！...但是总的想法是，VitePress将具有尽可能少的主题API（最好使用JavaScript API而不是文件布局约定），并且可能没有插件（所有自定义均在主题中完成）。
这里使用的官方默认主题： 左上角的logo与title 右上角的全局搜索框与nav导航栏 左侧的sidebar导航栏（自动将md一级标题设置为导航文案） 右侧的markdown内容 注意：项目自带热更新...变更主题（可选） ① 更换主题： 对默认主题不满意，想换个别的主题？安排！...在config.js中设置： module.exports = { theme: 'vuepress-theme-xx' } 可以在npm中寻找自己喜欢的主题，其中以 @vuepress/theme...执行如下命令，可将默认主题的各功能组件释放出来： vuepress eject docs 你会发现，在根目录下，多了一个theme文件夹，如下： 上图列出了主要的布局组件，只需在其中做适量修改以满足业务需求即可...9. md文件中使用vue组件（可选） vuepress项目中的md文件，可以直接使用vue组件。
初始化项目 npm init \-y // 默认配置yes 在生成的package.json中，添加如下两个启动命令： "scripts": { "dev": "vuepress dev docs"...这里使用的官方默认主题： 左上角的logo与title 右上角的全局搜索框与nav导航栏 左侧的sidebar导航栏（自动将md一级标题设置为导航文案） 右侧的markdown内容 注意：项目自带热更新...在config.js中设置： module.exports = { theme: 'vuepress-theme-xx' } 可以在npm中寻找自己喜欢的主题，其中以 @vuepress/theme...那就在默认主题基础上做一些修改，以满足需求。 执行如下命令，可将默认主题的各功能组件释放出来： vuepress eject docs 你会发现，在根目录下，多了一个theme文件夹，如下： ?...9. md文件中使用vue组件（可选） vuepress项目中的md文件，可以直接使用vue组件。
感谢 vuepress-theme-reco主题与一篇博客使用文章使用 vuepress 构建个人博客 在写这篇文章前，本人非前端专业人士，只是一时兴起想开始搭建一个博客，在该博客上记录与分享一下自己所学的一切内容...其余相关的 key 和 publish 等相关参数还请读者查看 reco 主题的官方文档立即前往与 vuepress 官网立即前往 样式修改 可能你会局限于 reco 主题的默认样式，这里就说下如何修改样式...当然你已经觉得 reco 主题都很完美了，不需要更改源码，那么你只需要在 .vuepress/styles/ 来创建文件index.styl来方便地添加额外样式（还有一个默认样式，不推荐修改），然后把你要修改的样式代码写在...自己搭建遇到的坑 图片路径 首先就是 markdown 图片相对路径的坑，在写文章的话，如果涉及的本地图片引入，那么默认不操作的，也就是需要配置一下，默认在当前同级文件下，在创建一个文件名相同的文件夹来存放图片...参考 Vuepress 图片资源中文路径问题 完美解决上述问题 引入 UI 组件库报错 如果你在该主题使用其他 UI 组件库，如 element，ant design，那么你很有可能会编译失败，官方解释
介绍 VuePress 是一个静态网站生成器，包含由Vue驱动的主题系统和插件API，同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。...如果没有报错，可在浏览器打开http://localhost:8080，默认加载内容为 README.md 中内容。...} 其它详细配置参考官方文档：https://vuepress.vuejs.org/zh/config/ 主题 因为是使用 VuePress 作为静态博客使用，需要替换掉默认的主题。...这里使用官方主题：@vuepress/theme-blog 。...安装 yarn add @vuepress/theme-blog -D # OR npm install @vuepress/theme-blog -D 使用&配置 在config.js 中添加主题相关配置
三、基本配置我们打开 VuePress 的核心配置文件 config.ts，所有的配置基本都集中在这个文件，可以在这里全局改变网站的内容、主题样式、使用插件增强能力等。...官方文档：https://vuepress.vuejs.org/zh/guide/permalinks.html#%E8%83%8C%E6%99%AF 4、开启文件热更新VuePress 默认提供了热更新...VuePress 默认主题，因为更精简、更稳定。...官网默认主题配置：https://vuepress.vuejs.org/zh/theme/default-theme-config.html 也有同学推荐 Hope 主题，其实我以前有的文档网站就是用的它...想修改主题配置，只需要更改 config.ts 配置文件中的 themeConfig 配置即可。
你喜欢哪个主题 因为VuePress除了默认的主题外，提供了扩展主题、扩展插件的能力，不同的主题又组织了不同的插件集合来完成开箱即用的功能， 所以，你首先应该使用哪款主题作为你的个人完整风格。...首先，我们看看各个主题默认的样式 默认主题案例 vue系列早先版本的官网大多数都是默认主题 vuepress-theme-hope案例 蝉沐风的码场: https://www.chanmufeng.com...相反，vuepress-theme-hope 这些做的都不错，成为我新的选择。 搭建项目 初始化项目 如果你选择了一个主题，请务必使用该主题提供的脚手架工具创建项目。...导航栏的相关设置在 navbar.ts文件中。 默认为字符串，对应 src 目录下的文件路径，你可以省略 .md 扩展名，以 / 结尾的路径会被推断为 /README.md。...例如： 搜索功能 该主题内置了几种常见搜索插件的支持，你只需下载你喜欢的插件和配置文件即可，我使用的是vuepress-plugin-search-pro插件，配置参考的官方配置。
第一个尝试，删除临时目录，重新安装 vuepress-theme-hope 主题，再次构建。 竟然失败了！...我又尝试删除配置文件 package.json，重新安装 VuePress 重新构建，等等，均告失败！ 菜，真菜，此刻我只好躲在角落里偷偷抹眼泪。...那只能上最后的杀手锏了，重新初始化 vuepress-theme-hope 主题！...应该直接使用 git revert HEAD 命令直接强制恢复本地仓库到最新远程仓库的版本才对。...小伙伴们日常开发中遇到问题的时候也一定要留意，把该记录的解决方案记录下来！下次再遇到直接翻文档就能解决了。 记住这句话：好记性真的不如烂笔头。
依赖关系从项目package.json文件中检索，并存储在yarn.lock文件中。...如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。...opens new window) 导入代码段(opens new window) 在 Markdown 中 使用 Vue 模板语法(opens new window) 使用组件(opens new window...#GitBook 我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。...它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。
VuePress 由两部分组成：第一部分是一个极简静态网站生成器(opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持...install -D vuepress ### 3.配置 package.json 在 package.json 中添加一些 scripts(opens new window)这一步骤是可选的，但我们推荐你完成它....安装主题 vuepress-theme-reco yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev ...- title: Vue驱动 details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。....vuepress 文件夹 这个文件是全局重要的配置文件，包括配置网站的标题、描述、主题、导航栏等信息，内容如下： module.exports = { title: "XXX的博客", description
云服务器
ICP备案
实时音视频
即时通信 IM
云直播
