文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用我这套模板，几分钟做出文档网站！

editLinks: true, editLinkText: "完善页面", },});2、导航栏配置由于导航栏配置可能比较复杂，为了让配置更清晰，我们可以集中把导航配置写在 navbar.ts...，所有的侧边栏配置都放在 sidebar.ts 文件中，然后在 config.ts 中引用。...但是由于侧边栏的配置比较复杂，文章多的时候需要分组、还要能自动识别文章中的小标题，所以这里我摸索出来的 最佳实践 是：1）将同类的文章放到同一个目录里，比如学习路线：2）将该目录的所有文章（侧边栏配置）...集中写在单独的配置文件中，比如 roadmapSideBar.ts，放到 sidebars 目录下：3）在侧边栏 sidebar.ts 配置中，引用各分类的侧边栏配置文件，实现不同分类下的文章，展示的侧边栏不同...VuePress 自定义主题能力二次开发的功能，和前面讲的配置一样，只用在 extraSideBar.ts 中填写配置，就能自动在网页右侧生成一个固定的侧边栏了，从而提供一些附加能力，比如对站长很重要的引流支持等

30610
您找到你想要的搜索结果了吗？
是的
没有找到

从零开始：VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

；link 字段就是页面的路径 NavbarGroup 对象的 text 字段就是导航栏的名字；children 字段是二级导航的路径 效果就是这样的： 侧边栏配置 接下来我们要把网站改造成自己喜欢的样子...我们先来看下配置好的页面，首页是这样的： 点击右上角的“网络”按钮，出来网络侧边栏： 点击右上角的“设计模式”按钮，出来设计模式侧边栏： 我们先来看一下配置文件： import { defaultTheme...// 不同子路径下的页面会使用不同的侧边栏 sidebar: { '/network/': [ { text: '网络',...key，value 为侧边栏对象数组，如果侧边栏对象里有 children 字段说明这是个二级侧边栏，children 数组里对应的是具体的文档路径。...标签页中，选择Pages侧边栏，Source 选择 Deploy from a branch，然后在 Branch 标签下选择 gh-pages 分支和 root 目录，点保存，就可以看到上面的博客地址了

36411

手把手教你用vuepress搭建自己的网站(2)

服务启动,因为 NodeJs 现不支持模块化,所以在 vuepress 中,是无法使用 import 与 export 语法的 进入.vuepress文件夹,创建config.js文件 cd .vuepress.../guide/ /config.md /config.html 在VuePress中README.md文件,你可以把它视为xxx.vue文件,md 文件中既可以写js,css,html,如果你发现页面...,在您以后用 md 写文章时,同样引入图片时,图片的后缀名都不能带有中文字符 配置导航栏 导航栏中有页面标题、搜索框、 导航栏链接、多语言切换、仓库链接，它们都是可以直接通过配置出来的,在 config.js...你可以按照这个类似的结构,无限制的配置下去 光有 nav 导航是不够的,下面来配置一下侧边栏,怎么配置侧边栏才是重中之重 配置侧边栏-slider 自动获取侧边栏内容 如果你希望自动生成当前页面标题的侧边栏...如果您希望为不同的页面组显示不同的侧边栏, 就和官网一样, 点击导航中的哪个 nav,对应就显示对应的的侧边栏,目前目录有 fontend \ interview \ minprogram 等, 这些目录下都存放着多个

2.5K20

VuePress

以上步骤都成功以后，就可以在浏览器总看到页面了，接下来就是对页面进行布局 主题配置 本文是根据VuePress默认主题配置 1.首页 在docs文件夹下创建.vuepress文件夹和README.md文件...这个文件夹中放的是markdown文件，每一个markdown文件对应一个页面。至于页面之间的跳转和页面导航栏和侧边栏布局在config.js文件中设置。...想要使侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar // .vuepress/config.js module.exports = { themeConfig:...现在页面基本也搭建完成，可以在页面之间进行切换。下一步是如何在markdown中使用vue组件，也就是在页面中展示自己的项目。...Markdown 文件中（组件名是通过文件名取到的）： //文件名和组件名之间同`-`连接 完成这一步以后就可以在页面中看到自己的组件在页面中展示了

1.2K10

如何快速搭建好看的个人博客(完整配置与源码)

导航栏创建好了, 接下来就是配置页面内容中的侧边栏slider 配置侧边栏slider 1.自动获取侧边栏内容 如果你希望自动生成当前页面标题的侧边栏, 可以在config.js中配置来启用 // .vuepress...config.js module.exports = { themeConfig:{ sidebar: 'auto', // sidebarDepth: 1 } } 2.展示每个页面的侧边栏...如果你希望为不同的页面组显示不同的侧边栏, 就和官网一样, 点击指南显示的是对应的侧边栏,目前目录有node \ database \ web等, 这些目录下都存放着多个md文件: module.exports...上面采用了两个方式配置侧边栏, 一个侧边栏是node目录下直接是写的markdown文章, 而在web下又有多个分类, 所有有进行了分栏配置, 其实这两种方式在我们博客中都是比较常见的 自定义布局内容...网站的导航和侧边栏都已经配置好之后, 如果你觉得页面不是很符合你的预期, 你也可以自定修改成你想要的效果。

1.5K10

超详细动手搭建一个Vuepress站点及开启PWA与自动部署

image 侧边栏配置 可以省略.md扩展名,同时以 / 结尾的路径将会被视为 */README.md module.exports = { themeConfig: { sidebar:...// 文字颜色 $borderColor = #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色 自定义页面类 有时需要在不同的页面应用不同的css,可以先在该页面中声明...--- pageClass: custom-page-class --- 然后在override.styl中书写 .theme-container.custom-page-class { /* 特定页面的...将dist文件夹中的内容提交到git上或者上传到服务器就好 yarn docs:build # 或者：npm run docs:build 另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本...目录下的public文件夹 给git仓库绑定了独立域名后,记得修改base路径 设置侧边栏分组后默认会自动生成 上/下一篇链接 设置了自动生成侧边栏会把侧边栏分组覆盖掉 设置PWA记得开启SSL

74240

团队技术文档构建利器vuepress上手实践

参数配置 3.1 主题配置 3.1.1 主页(homepage) 3.1.2 导航栏(navbar) 3.1.3 侧边栏(sidebar) 3.1.4 搜索框(search box) 3.1.5 最近更新...3.1.2 导航栏(navbar) themeConfig.nav 导航栏包括 左侧页面标题、搜索框、导航栏链接、多语言支持、仓库链接，支持下拉分组菜单，还支持在全局或单页面中禁用。...3.1.3 侧边栏(sidebar) themeConfig.sidebar 侧边栏一般用于文档的目录索引，可以直接在 config.js 中配置链接数组，也在页面中配置 sidebar:auto 自动生成侧边栏目录...侧边栏还支持以下更加细节的设置： 设置嵌套层数 是否展开所有 标题链接是否激活(禁用可以懒加载提升性能) 分组 侧边栏分页面定制 禁用 3.1.4 搜索框(search box) themeConfig.search...CSS 类名，可以在该页面的 YAML front matter 中声明一个 pageClass： --- pageClass: custom-page-class --- index.styl 中可以使用对应的类名

1.3K20

一看就会的保姆级教程，10分钟搭建个人博客

) 二、安装脚手架 这里本应该安装 vuepress 的，但是 vuepress 其本身是一个文档型的页面，比较简约，我们肯定都想让自己的博客变得好看一点，所以这里推荐一个大佬制作好的主题 vuepress-theme-reco.../docs/theme-reco/ 下的 README.md 、theme.md 、plugin.md 、api.md 文件进行识别生成侧边栏，如图所示： ?...侧边栏的文字其实是识别了 md 文件中的 title ，例如 theme.md 文件对应的名称就是 title 的值 --- title: theme date: 2020-05-27 --- This...其实就是 blogConfig 中设置的 "blogConfig": { "category": { "location": 2, // 在导航栏中的位置在第二个..."text": "Category" }, "tag": { "location": 3, // 在导航栏中的位置在第三个 "text": "

1.7K20

如何构建自己的技术博客

主题配置 一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。...同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等 默认主题： 首页 修改首页，修改 docs/README.md，VuePress...{{ $frontmatter.xx }} 方式获取 设置 footer 导航栏 在 .vuepress/config.js 配置文件中，通过 themeConfig.nav 增加一些导航栏链接: /...在 .vuepress/config.js 配置文件中，通过 themeConfig.sidebar 增加侧边栏配置: // .vuepress/config.js module.exports =...└─ two.md 可以自动开启侧边栏配置 // .vuepress/config.js module.exports = { themeConfig: { sidebar: 'auto

24430

团队技术文档构建利器vuepress上手实践

3.1.2 导航栏(navbar) themeConfig.nav 导航栏包括 左侧页面标题、搜索框、导航栏链接、多语言支持、仓库链接，支持下拉分组菜单，还支持在全局或单页面中禁用。...3.1.3 侧边栏(sidebar) themeConfig.sidebar 侧边栏一般用于文档的目录索引，可以直接在 config.js 中配置链接数组，也在页面中配置 sidebar:auto 自动生成侧边栏目录...侧边栏还支持以下更加细节的设置： 设置嵌套层数 是否展开所有 标题链接是否激活(禁用可以懒加载提升性能) 分组 侧边栏分页面定制 禁用 3.1.4 搜索框(search box) themeConfig.search...CSS 类名，可以在该页面的 YAML front matter 中声明一个 pageClass： --- pageClass: custom-page-class --- index.styl 中可以使用对应的类名...在 Markdown 中使用 Vue .vuepress/components 中的所有 *.vue 文件都会自动注册为全局异步组件，如： . └─ .vuepress └─ components

2.4K94

超详细动手搭建一个Vuepress站点及开启PWA与自动部署

link: '/language/English' } ] } ] } } 如图： [99a97bd9ly1fr1oz3elibj20fg02bjr9.jpg] 侧边栏配置...'html-standard', 'css-standard', 'js-standard', 'git-standard' ] }] } 支持侧边栏分组...= #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色 自定义页面类 有时需要在不同的页面应用不同的css,可以先在该页面中声明 --- pageClass...: custom-page-class --- 然后在override.styl中书写 .theme-container.custom-page-class { /* 特定页面的 CSS */ }...目录下的public文件夹 给git仓库绑定了独立域名后,记得修改base路径 设置侧边栏分组后默认会自动生成 上/下一篇链接 设置了自动生成侧边栏会把侧边栏分组覆盖掉 设置PWA记得开启SSL

2.4K60

【硬核教程】只需1秒—你也可以有自己的API文档

然后是详情页 可以看到，在首页的配置中，有一个actionLink，这个是指点了首页中的开始开发，需要跳转到的路由。这个就是我们众多详情中的其中一个页面的路由。 你可以对比刚刚详情页的图片。...我们之所以能够看到左边的侧边栏，是因为在config.js里配置了sidebar这个属性。如下。 const router = require('....router.js在vuepress中本身没有，是我做的一个简单抽象，里面长这样。...'children': [ '类别B的张三', ] } ]; /** * 生成sidebar数据 * * @param data 上面定义的抽象侧边栏路由静态文件...在vuepress中，如果路由以/结尾，那么就是指的这个目录下的README.md文件 还有一点很方便的是，单个文件里如果你有二级标题，vuepress会自动的生成该文件下的二级标题导航。

85610

我问导师，Vue3有没有对应工具来生成漂亮的文档？ 用 Vitepress

建立在Vite而非Webpack上，因此启动时间，热重装等更快 使用Vue3来减少JS的有效负载 轻量级 Vitepress 能够实现这些目标的一个原因是，它比Vuepress 更具体，而 Vuepress...Vitepress侧边栏可以做的一件很酷的事情是根据我们所在的页面来更改侧边栏。 比如，我们想让首页显示其标题，其他页面都显示我们刚刚制作的侧边栏。...我们要做的第一件事是创建将our-story侧边栏存储为变量。...在Vitepress中内置元素 Vitepress 附带了对几个元素的支持，我们可以在config.js中或在Markdown中直接声明这些元素。.../vuepress/config.js配置网站，但有时我们还是需要对各个页面进行更细的控制。 幸运的是，我们可以使用markdown文件顶部的YAML块来控制每个页面。

1.5K20

为什么人家的开源项目文档如此炫酷？原来用的是这款神器！

，同时也会生成右侧的大纲栏； 如果你还想给专栏添加个目录页的话，可以在00.目录页文件夹中添加02.mall学习教程.md作为目录，目录页内容如下，permalink可以指定目录页的永久路径； ---...，点击导航栏即可跳转到该目录； 其实你还可以在首页index.md中通过添加feature来实现快速访问，这里我们创建了三个feature； --- home: true # heroImage: /...-- more -->注释来控制摘要的显示，该注释之前内容均会作为摘要来显示； 文章列表是否显示摘要对比如下； 如果你想修改文章作者信息、侧边栏是否折叠、社交信息、页面底部版权信息等信息的话，可以修改主题配置文件...macrozheng', // 必需 link: 'https://github.com/macrozheng', // 可选的 }, blogger: { // 博主信息，显示在首页侧边栏...总结 使用VuePress+Vdoing来搭建文档网站不仅炫酷而且功能强大！对比Docsify的动态生成文档，VuePress生成静态页面性能更好，同时对SEO也更友好。

1.1K20

基于VuePress快速搭建一套项目知识管理工具

线上演示地址：http://39.106.163.86:8081/ GitHub地址：https://github.com/chenshuaikang/ShareDoc 用户背景 我是一名开发人员，经常会迷失在寻找团队内的各种开发文档中...最后选择了vuePress来做，它的好处是可以用markdown语言来做笔记，让你专注于写作，还可以将笔记提交到gitlab进行管理，还有变更记录，而且高度支持自定义主题等等。...但这个开源工具不是下载下来就可以直接用的，还有些开发工作需要做。...和侧边栏 - 自动生成的 GitHub 链接和页面的编辑链接搭建此工具按照官网搭建、 注意 请确保你的 Node.js 版本 >= 8 全局安装 如果你只是想尝试一下 VuePress，你可以全局安装它...作为本地依赖安装让你可以使用持续集成工具，或者一些其他服务（比如 Netlify）来帮助你在每次提交代码时自动部署。

2.1K00
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券